🔨 refactor: Github Actions 워크플로 리팩토링 (#218)

* 📦 chore: install action 작성 * 📦 chore: install action 적용 * 📦 chore: vercel, chromatic 배포 주소 각각 코멘트 작성 * 🚑 fix: 의존성 설치 run 커맨드에 shell 설정 추가 * 📦 chore: react preview 배포 텍스트 emoji 변경 * 📦 chore: CI 단계에 테스트 코드 수행 추가 * 📦 chore: vercel 관련 env를 job 쪽으로 이동 * 📦 chore: CI 단계에 린트 검사 추가 * ➖ remove: CI 단계에서의 lint 다시 제거
dnd-side-project · Feb 26, 2024 · 0f360aa · 0f360aa
1 parent ee64df1
commit 0f360aa
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 63 deletions.
diff --git a/.github/actions/install/action.yml b/.github/actions/install/action.yml
@@ -0,0 +1,22 @@
+name: Install
+description: 'Node.js와 NPM 패키지를 설치합니다.'
+runs:
+  using: composite
+  steps:
+    - 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: 의존성 설치
+      shell: bash
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      run: npm ci
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -17,22 +17,8 @@ jobs:
         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: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
 
       - name: Chromatic에 배포
         id: chromatic

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -1,39 +1,23 @@
 name: Preview
 
-env:
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-
 on:
   pull_request:
     branches: ['main', feat/**, refactor/**, fix/**, chore/**]
 
 jobs:
-  build:
+  ci:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        command: ['build', 'test']
     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: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
 
-      - name: React 빌드
-        run: npm run build --if-present
+      - run: npm run ${{ matrix.command }}
 
   chromatic-preview:
     runs-on: ubuntu-latest
@@ -43,21 +27,8 @@ jobs:
         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: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
 
       - name: Chromatic에 배포
         id: chromatic
@@ -67,11 +38,29 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           onlyChanged: true
           autoAcceptChanges: true
+
+      - name: 현재 시간 가져오기
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: YYYYMMDD-HH
+          utcOffset: '+09:00'
+
+      - name: PR 코멘트로 Preview URL 남기기
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{github.event.number}}-chromatic
+          message: |
+            🚀 Storybook Preview 보러가기: ${{ steps.chromatic.outputs.storybookUrl }}
+            ⏰ 배포 일시: ${{ steps.current-time.outputs.readableTime }}
     outputs:
       storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
 
   vercel-preview:
     runs-on: ubuntu-latest
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     steps:
       - uses: actions/checkout@v4
 
@@ -89,17 +78,18 @@ jobs:
         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: 현재 시간 가져오기
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: YYYYMMDD-HH
+          utcOffset: '+09:00'
+
       - name: PR 코멘트로 Preview URL 남기기
         uses: thollander/actions-comment-pull-request@v2
         with:
-          comment_tag: ${{github.event.number}}
+          comment_tag: ${{github.event.number}}-vercel
           message: |
-            🚀 Storybook Preview 보러가기: ${{ needs.chromatic-preview.outputs.storybook_url }}
-            🚀 React Preview 보러가기: ${{ needs.vercel-preview.outputs.vercel_url }}
+            🎮 React Preview 보러가기: ${{ steps.deploy.outputs.preview_url }}
+            ⏰ 배포 일시: ${{ steps.current-time.outputs.readableTime }}