From 6e773595a27f3662638129da7af92f613fddfa8d Mon Sep 17 00:00:00 2001
From: Dohyun Jung <serithemage@gmail.com>
Date: Thu, 23 Jan 2025 12:25:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20GitHub=20Actions=EB=A5=BC=20=EC=9D=B4?=
 =?UTF-8?q?=EC=9A=A9=ED=95=9C=20=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=90=EB=8F=99=20=EB=B0=B0=ED=8F=AC=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GitHub Actions 워크플로우 추가
- Vite 설정 업데이트
- 문서 업데이트
  - CI/CD 파이프라인 설계 추가
  - 작업 목록 업데이트
  - 데모 시나리오 업데이트
---
 .github/workflows/frontend-deploy.yml | 39 +++++++++++++++++++++++++++
 doc/demo_scenario.md                  | 26 ++++++++++++++++++
 doc/design.md                         | 15 +++++++++++
 doc/todo.md                           | 10 ++++++-
 frontend/vite.config.ts               |  1 +
 5 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/frontend-deploy.yml

diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml
new file mode 100644
index 0000000..b3e8980
--- /dev/null
+++ b/.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 설정
diff --git a/doc/demo_scenario.md b/doc/demo_scenario.md
index ee9eccd..d348cf7 100644
--- a/doc/demo_scenario.md
+++ b/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 토큰 관리
diff --git a/doc/design.md b/doc/design.md
index b38586a..03b31a5 100644
--- a/doc/design.md
+++ b/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 배포
diff --git a/doc/todo.md b/doc/todo.md
index 3c9283e..1ff844b 100644
--- a/doc/todo.md
+++ b/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, 설계 문서, 체크리스트) 완료
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 8b0f57b..871555e 100644
--- a/frontend/vite.config.ts
+++ b/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()],
 })