📦 chore: Chromatic 설치 및 CI/CD 워크플로 작성 (#7)

* 📦 chore: Chromatic 설치

* 📦 chore: PR시 Chromatic 배포 CI 작성

* 📦 chore: main에 push시 Chromatic 배포 CI 워크플로 작성

* 🚑 fix: 의존성 캐싱 path 수정

* 📦 chore: 빌드 테스트 job 이름 build로 변경

* 📦 chore: Vercel 배포 CI/CD 세팅 (#10)

* 📦 chore: Pull Request시 Preview에 Vercel 추가

* 📦 chore: 임시로 preview 대상 브랜치 변경

* 📦 chore: preview 대상 브랜치 main으로 원상복구

* 📦 chore: main 브랜치 vercel deploy 워크플로 작성

* ✅ test: 임시로 deploy 대상 브랜치 변경

* 📦 chore: deploy 대상 브랜치 main으로 원상복구

* 🚀 deploy: Vercel 배포 팀으로 변경

* ✅ test: preview 대상 임시 변경

* ✅ test: sleep 60초로 변경 (테스트)

* ✅ test: sleep 30초로 원상복구

* 📦 chore: Vercel SPA Fallback 설정

* 📦 chore: preview 대상 브랜치 main으로 원상복구

* 🚀 deploy: 배포

* ✅ test: output 출력 테스트

* ✅ test: vercel-output.txt 생성 후 출력

* ✅ test: $GITHUB_OUTPUT 으로 직접 URL 내보내기

* ✅ test: cat vercel-output.txt >> $GITHUB_OUTPUT

* ✅ test: env.VERCEL_URL 로 시도

* ✅ test: $GITHUB_OUTPUT 로 변경

* 📝 style: 워크플로 코드 정리

.github/workflows/deploy.yml

@@ -0,0 +1,61 @@
+name: Deploy
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  push:
+    branches: ['main']
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Node.js 설치
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: 의존성 캐싱
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: 의존성 설치
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Chromatic에 배포
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
+          autoAcceptChanges: true
+
+  vercel:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Vercel CLI 설치
+        run: npm install --global vercel@latest
+
+      - name: Vercel 환경 변수 가져오기
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Project Artifacts 빌드하기
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Vercel에 Project Artifacts 배포하기
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/preview.yml

@@ -0,0 +1,104 @@
+name: Preview
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Node.js 설치
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: 의존성 캐싱
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: 의존성 설치
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: React 빌드
+        run: npm run build --if-present
+
+  chromatic-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Node.js 설치
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: 의존성 캐싱
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: 의존성 설치
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Chromatic에 배포
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
+          autoAcceptChanges: true
+    outputs:
+      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
+
+  vercel-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Vercel CLI 설치
+        run: npm install --global vercel@latest
+
+      - name: Vercel 환경 변수 가져오기
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Project Artifacts 빌드하기
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Vercel에 Project Artifacts 배포하기
+        id: deploy
+        run: |
+          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > vercel-output.txt
+          echo "preview_url=$(cat vercel-output.txt)" >> $GITHUB_OUTPUT
+    outputs:
+      vercel_url: ${{ steps.deploy.outputs.preview_url }}
+
+  github-bot:
+    runs-on: ubuntu-latest
+    needs: [chromatic-preview, vercel-preview]
+    steps:
+      - name: PR 코멘트로 Preview URL 남기기
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            🚀 Storybook Preview 보러가기: ${{ needs.chromatic-preview.outputs.storybook_url }}
+            🚀 React Preview 보러가기: ${{ needs.vercel-preview.outputs.vercel_url }}

.gitignore

@@ -25,3 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.vercel

package.json

@@ -29,15 +29,15 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@storybook/addon-essentials": "^7.6.8",
     "@storybook/addon-interactions": "^7.6.8",
     "@storybook/addon-links": "^7.6.8",
     "@storybook/blocks": "^7.6.8",
     "@storybook/react": "^7.6.8",
     "@storybook/react-vite": "^7.6.8",
     "@storybook/test": "^7.6.8",
-    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^18.4.4",
     "@tanstack/eslint-plugin-query": "^5.17.7",
     "@tanstack/react-query-devtools": "^5.17.12",
     "@types/node": "^20.11.2",
@@ -46,6 +46,7 @@
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "chromatic": "^10.3.0",
     "commitlint-config-git-commit-emoji": "^1.0.0",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",

src/App.tsx

@@ -5,7 +5,8 @@ import { ROUTER_PATHS } from './constants/routerPaths';
 const App = () => {
   return (
     <>
-      <h1>Hello World</h1>
+      <h1>Hello World!</h1>
+      <p>Vercel 배포!</p>
       <EmotionTestButton size="small">이모션 테스트</EmotionTestButton>
       <Link to={ROUTER_PATHS.TEST_CONSTANT}>Test Constant Page</Link>
       <Link to={ROUTER_PATHS.TEST_VARIABLE('5')}>Test 5 Page</Link>

vercel.json

@@ -0,0 +1,6 @@
+{
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/(.*)", "dest": "/index.html" }
+  ]
+}