feat: GitHub Actions를 이용한 프론트엔드 자동 배포 설정

- GitHub Actions 워크플로우 추가
- Vite 설정 업데이트
- 문서 업데이트
  - CI/CD 파이프라인 설계 추가
  - 작업 목록 업데이트
  - 데모 시나리오 업데이트

.github/workflows/frontend-deploy.yml

@@ -0,0 +1,39 @@
+name: Frontend Deploy
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - 'frontend/**'
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install Dependencies
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Build
+        working-directory: ./frontend
+        run: npm run build
+        env:
+          VITE_API_ENDPOINT: ${{ secrets.VITE_API_ENDPOINT }}
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./frontend/dist
+          cname: todo.awskrug.dev # 필요한 경우 CNAME 설정

doc/demo_scenario.md

@@ -246,3 +246,29 @@ README.md의 시스템 아키텍처를 mermaid로 바꿔줘.
 - AI 도구 활용 확대
 - 자동화 수준 향상
 - 개발 프로세스 최적화
+
+## 14. CI/CD 구축
+
+### 14.1 GitHub Actions 설정
+```
+프론트를 github actions를 이용해서 frontend 업데이트가 일어날때마다 github pages에 배포하고 싶어.
+```
+- GitHub Actions 워크플로우 생성
+- 프론트엔드 자동 배포 파이프라인 구축
+- Vite 설정 업데이트
+
+### 14.2 주요 구성 요소
+1. 트리거 설정
+   - main 브랜치 푸시
+   - frontend 디렉토리 변경
+
+2. 작업 단계
+   - 코드 체크아웃
+   - Node.js 환경 설정
+   - 의존성 설치
+   - 프로덕션 빌드
+   - GitHub Pages 배포
+
+3. 환경 변수
+   - API 엔드포인트 설정
+   - GitHub 토큰 관리

doc/design.md

@@ -155,3 +155,18 @@ Table: TodoItems
 - 마감일 설정
 - 우선순위 지정
 - 공유 기능
+
+## 10. CI/CD 파이프라인
+
+### 프론트엔드 배포
+- GitHub Actions를 사용한 자동 배포
+- GitHub Pages를 통한 정적 웹 호스팅
+- 프론트엔드 코드 변경 시 자동 빌드 및 배포
+- 환경 변수를 통한 API 엔드포인트 관리
+
+### 배포 프로세스
+1. frontend 디렉토리 변경 감지
+2. Node.js 환경 설정
+3. 의존성 설치
+4. 프로덕션 빌드
+5. GitHub Pages 배포

doc/todo.md

@@ -7,7 +7,7 @@
   - [x] 프로젝트 설정 파일 구성
 - [x] TypeScript 설정
 - [ ] ESLint, Prettier 설정
-- [ ] GitHub Actions CI/CD 파이프라인 설정
+- [x] GitHub Actions CI/CD 파이프라인 설정
 
 ## 2. 프론트엔드 (React)
 ### 2.1 초기 설정
@@ -87,6 +87,14 @@
 - [ ] CloudWatch 로그 설정
 - [ ] 알람 설정
 
+## 진행 중인 작업
+
+### CI/CD
+- [x] GitHub Actions 워크플로우 설정
+  - [x] 프론트엔드 자동 배포 파이프라인 구축
+  - [x] GitHub Pages 배포 설정
+  - [ ] 환경 변수 설정 (VITE_API_ENDPOINT)
+
 ## 현재 진행 상태
 - ✅ GitHub 저장소 생성 및 초기 설정 완료
 - ✅ 프로젝트 문서화 (README.md, 설계 문서, 체크리스트) 완료

frontend/vite.config.ts

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: '/aiengineering-demo/',
   plugins: [react()],
 })