refactor: Github Actions 워크플로 개선 (#505)

* chore: eslint fixall을 explicit으로 변경

* chore: install action 추가

* chore: cd workflow 리팩토링

* chore: ci workflow 리팩토링

* chore: concurrency 추가

* chore: .env 파일 확인

* chore: CI 워크플로에 concurrency 제거

* test: push test

* chore: CI 워크플로에 concurrency 재추가

* chore: actions/cache@v4 업데이트

* chore: 중복되던 build 커맨드 제거

.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@v4
+      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

.github/workflows/cd.yml

@@ -0,0 +1,97 @@
+name: CD
+
+on:
+  push:
+    branches: ['main', 'dev']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  VITE_DEV_BACKEND_API_ENDPOINT: ${{ secrets.VITE_DEV_BACKEND_API_ENDPOINT }}
+  VITE_PROD_BACKEND_API_ENDPOINT: ${{ secrets.VITE_PROD_BACKEND_API_ENDPOINT }}
+  VITE_DEV_DEPLOY_ENDPOINT: ${{ secrets.VITE_DEV_DEPLOY_ENDPOINT }}
+  VITE_PROD_DEPLOY_ENDPOINT: ${{ secrets.VITE_PROD_DEPLOY_ENDPOINT }}
+
+  VITE_KAKAO_LOGIN_CLIENT_ID: ${{ secrets.VITE_KAKAO_LOGIN_CLIENT_ID }}
+  VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+  VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+  VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+  VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+  VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+  VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+  VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+  VITE_FIREBASE_VAPID_PUBLIC_KEY: ${{ secrets.VITE_FIREBASE_VAPID_PUBLIC_KEY }}
+
+  VITE_TOSS_CLIENT_KET: ${{ secrets.VITE_TOSS_CLIENT_KET }}
+  VITE_TOSS_CUSTOMER_KEY: ${{ secrets.VITE_TOSS_CUSTOMER_KEY }}
+
+jobs:
+  production:
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - name: .env 파일 생성
+        run: |
+          echo "VITE_DEPLOY_TARGET=production" >> .env
+          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' <<< "$SECRETS_CONTEXT" >> .env
+        env:
+          SECRETS_CONTEXT: ${{ toJson(env) }}
+
+      - name: .env 파일 확인
+        run: cat .env
+
+      - name: 빌드
+        run: npm run build
+
+      - name: AWS credentials 설정
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-northeast-2'
+
+      - name: S3 버킷에 업로드
+        run: aws s3 sync dist s3://${{ secrets.AWS_S3_WEB_HOST }} --delete
+
+      - name: CloudFront 캐시 무효화
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_WEB_HOST_ID }} --paths '/*'
+  development:
+    if: github.ref == 'refs/heads/dev'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - name: .env 파일 생성
+        run: |
+          echo "VITE_DEPLOY_TARGET=development" >> .env
+          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' <<< "$SECRETS_CONTEXT" >> .env
+        env:
+          SECRETS_CONTEXT: ${{ toJson(env) }}
+
+      - name: .env 파일 확인
+        run: cat .env
+
+      - name: 빌드
+        run: npm run build
+
+      - name: AWS credentials 설정
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-northeast-2'
+
+      - name: S3 버킷에 업로드
+        run: aws s3 sync dist s3://${{ secrets.AWS_S3_DEV_WEB_HOST }} --delete

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+    branches: ['main', 'dev']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        command: ['build', 'build-storybook']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - run: npm run ${{ matrix.command }}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "files.associations": {
     "*.css": "tailwindcss"