AI_Todo 프로젝트 개발기 - DevOps 기록 모음
AI_Todo Dev 기록 모음
[ AI_Todo 프로젝트 개발기 - DevOps #0 ] Dev 기록 모음
DevOps를 설계하면서의 기록과정입니다.
- [ AI_Todo 프로젝트 개발기 - DevOps #1 ] JavaScript로 세 마리 토끼 잡는 방법
- [ AI_Todo 프로젝트 개발기 - DevOps #2] ESLint와 Husky로 나만의 품질 파이프라인 구축하기
- [ 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
다음 단계
모니터링 환경 구축 부하테스트 환경 구축
위의 단계가 완료되면 지속적으로 업데이트 예정
댓글남기기