1 분 소요

AI_Todo Dev 기록 모음

[ AI_Todo 프로젝트 개발기 - DevOps #0 ] Dev 기록 모음

DevOps를 설계하면서의 기록과정입니다.

  1. [ AI_Todo 프로젝트 개발기 - DevOps #1 ] JavaScript로 세 마리 토끼 잡는 방법
  2. [ AI_Todo 프로젝트 개발기 - DevOps #2] ESLint와 Husky로 나만의 품질 파이프라인 구축하기
  3. [ AI_Todo 프로젝트 개발기 - DevOps #3] 환경설정 통일 Docker가 아닌 MIse를 선탁한 이유

프론트엔드 DevOps 설계

프론트는 모노레포(Monorepo) 아키텍처로 모바일, PC, 웹 등 다양한 플랫폼을 효율적으로 지원하고자 했습니다.
이런 구조에서 코드품질 및 개발환경, 파이프라인을 구축하기 위해 ESLint, Husky, Mise등을 이용했습니다.

프론트엔드 모노레포 내부구조 + 도구 계층

graph TD
  subgraph "Local Dev"
    VSCode["VSCode / Vite Dev Server"]
    VSCode --> PNPMDev["pnpm run dev"]
    PNPMDev --> Vite["Vite (HMR)"]
  end

  subgraph "Monorepo Structure"
    Core["packages/core (UI · Store · API)"]
    WebApp["packages/apps/web"]
    MobileApp["packages/apps/mobile"]
    DesktopApp["packages/apps/desktop"]
    Core --> WebApp
    Core --> MobileApp
    Core --> DesktopApp
  end

  subgraph "Build Cache"
    Turbo["Turbo (build · lint · test · typecheck)"]
  end

  subgraph "GitHub"
    PR["Push / Pull Request"]
  end

  subgraph "CI — GitHub Actions (ci.yml)"
    Checkout["actions/checkout@v4"]
    SetupNode["actions/setup-node@v3 (Node 20)"]
    SetupPNPM["pnpm/action-setup@v3"]
    Install["pnpm install --frozen-lockfile"]
    Lint["pnpm run lint"]
    Test["pnpm run test"]
    Build["pnpm run build"]
    Clean["pnpm run clean"]
    Checkout --> SetupNode --> SetupPNPM --> Install --> Lint --> Test --> Build --> Clean
    Build --> Turbo
  end

  Developer["Developer"] --> PR
  PR --> Checkout

  Turbo --> WebApp
  Turbo --> MobileApp
  Turbo --> DesktopApp

  WebApp --> Vite

  Build --> Artefacts["dist/** artefacts"]
  Artefacts --> Deploy["(수동) Deploy Pipeline"]

DevOps 파이프라인 (프론트)

graph TD
    subgraph "Local Development"
        Developer["Developer"] --> VSCode["VSCode / Vite"]
        VSCode --> LocalRun["pnpm run dev (via Turbo)"]
    end

    subgraph "Code & Version Control"
        Repo["Monorepo (packages, apps)"]
        Developer --> |git push| GitHub["GitHub (Pull Request)"]
    end

    subgraph "CI Pipeline (GitHub Actions)"
        trigger(Trigger: on PR) --> Checkout
        
        Checkout["actions/checkout@v4"] --> Setup["Setup (Node, pnpm)"]
        Setup --> Install["pnpm install"]
        
        Install --> CI_Steps
        subgraph "CI Steps (Orchestrated by Turborepo)"
            CI_Lint["pnpm turbo lint"]
            CI_Test["pnpm turbo test"]
            CI_Build["pnpm turbo build"]
        end
        
        CI_Build --> Artifacts["Build Artifacts (dist)"]
    end

    subgraph "CD Pipeline"
        Artifacts --> Deploy["Manual Deploy to Hosting"]
    end
    
    GitHub --> trigger
    Repo -- "Is the target of" --> CI_Steps

다음 단계

모니터링 환경 구축 부하테스트 환경 구축

위의 단계가 완료되면 지속적으로 업데이트 예정

댓글남기기

참고