From 3297a0d74b7c371e3c496ef2087a3b6cf6d5c84e Mon Sep 17 00:00:00 2001
From: SangHoon Lee <50488780+bbearcookie@users.noreply.github.com>
Date: Tue, 27 Feb 2024 13:29:27 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Github=20Actions=20=EC=9B=8C?=
 =?UTF-8?q?=ED=81=AC=ED=94=8C=EB=A1=9C=20=EA=B0=9C=EC=84=A0=20(#505)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 | 22 +++++++
 .github/workflows/cd.yml           | 97 ++++++++++++++++++++++++++++++
 .github/workflows/ci.yml           | 24 ++++++++
 .github/workflows/deploy_dev.yml   | 53 ----------------
 .github/workflows/deploy_prod.yml  | 62 -------------------
 .github/workflows/pull_request.yml | 37 ------------
 .vscode/settings.json              |  2 +-
 7 files changed, 144 insertions(+), 153 deletions(-)
 create mode 100644 .github/actions/install/action.yml
 create mode 100644 .github/workflows/cd.yml
 create mode 100644 .github/workflows/ci.yml
 delete mode 100644 .github/workflows/deploy_dev.yml
 delete mode 100644 .github/workflows/deploy_prod.yml
 delete mode 100644 .github/workflows/pull_request.yml

diff --git a/.github/actions/install/action.yml b/.github/actions/install/action.yml
new file mode 100644
index 00000000..1b86c689
--- /dev/null
+++ 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@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
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
new file mode 100644
index 00000000..a2c707c1
--- /dev/null
+++ b/.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
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..b9bb18c1
--- /dev/null
+++ b/.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 }}
diff --git a/.github/workflows/deploy_dev.yml b/.github/workflows/deploy_dev.yml
deleted file mode 100644
index a19268a3..00000000
--- a/.github/workflows/deploy_dev.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-name: React App CI/CD
-
-on:
-  push:
-    branches: ['dev']
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-          cache: 'npm'
-
-      - name: Setup .env
-        run: |
-          echo "VITE_DEPLOY_TARGET"=development >> .env
-          echo "VITE_DEV_BACKEND_API_ENDPOINT=${{ secrets.VITE_DEV_BACKEND_API_ENDPOINT }}" >> .env
-          echo "VITE_PROD_BACKEND_API_ENDPOINT=${{ secrets.VITE_PROD_BACKEND_API_ENDPOINT }}" >> .env
-          echo "VITE_DEV_DEPLOY_ENDPOINT=${{ secrets.VITE_DEV_DEPLOY_ENDPOINT }}" >> .env
-          echo "VITE_PROD_DEPLOY_ENDPOINT=${{ secrets.VITE_PROD_DEPLOY_ENDPOINT }}" >> .env
-
-          echo "VITE_KAKAO_LOGIN_CLIENT_ID=${{ secrets.VITE_KAKAO_LOGIN_CLIENT_ID }}" >> .env
-          echo "VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }}" >> .env
-          echo "VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}" >> .env
-          echo "VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }}" >> .env
-          echo "VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}" >> .env
-          echo "VITE_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}" >> .env
-          echo "VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }}" >> .env
-          echo "VITE_FIREBASE_MEASUREMENT_ID=${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}" >> .env
-          echo "VITE_FIREBASE_VAPID_PUBLIC_KEY=${{ secrets.VITE_FIREBASE_VAPID_PUBLIC_KEY }}" >> .env
-          echo "VITE_TOSS_CLIENT_KET=${{ secrets.VITE_TOSS_CLIENT_KET }}" >> .env
-          echo "VITE_TOSS_CUSTOMER_KEY=${{ secrets.VITE_TOSS_CUSTOMER_KEY }}" >> .env
-
-      - run: cat .env
-
-      - run: npm i
-      - run: npm run build --if-present
-
-      - name: Upload to S3 Bucket
-        uses: awact/s3-action@master
-        with:
-          args: --acl public-read --follow-symlinks --delete
-        env:
-          SOURCE_DIR: 'dist'
-          AWS_REGION: 'ap-northeast-2'
-          AWS_S3_BUCKET: ${{ secrets.AWS_S3_DEV_WEB_HOST }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/.github/workflows/deploy_prod.yml b/.github/workflows/deploy_prod.yml
deleted file mode 100644
index f6e27d4e..00000000
--- a/.github/workflows/deploy_prod.yml
+++ /dev/null
@@ -1,62 +0,0 @@
-name: React App CI/CD
-
-on:
-  push:
-    branches: ['main']
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-          cache: 'npm'
-
-      - name: Setup .env
-        run: |
-          echo "VITE_DEPLOY_TARGET"=production >> .env
-          echo "VITE_DEV_BACKEND_API_ENDPOINT=${{ secrets.VITE_DEV_BACKEND_API_ENDPOINT }}" >> .env
-          echo "VITE_PROD_BACKEND_API_ENDPOINT=${{ secrets.VITE_PROD_BACKEND_API_ENDPOINT }}" >> .env
-          echo "VITE_DEV_DEPLOY_ENDPOINT=${{ secrets.VITE_DEV_DEPLOY_ENDPOINT }}" >> .env
-          echo "VITE_PROD_DEPLOY_ENDPOINT=${{ secrets.VITE_PROD_DEPLOY_ENDPOINT }}" >> .env
-
-          echo "VITE_KAKAO_LOGIN_CLIENT_ID=${{ secrets.VITE_KAKAO_LOGIN_CLIENT_ID }}" >> .env
-          echo "VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }}" >> .env
-          echo "VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}" >> .env
-          echo "VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }}" >> .env
-          echo "VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}" >> .env
-          echo "VITE_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}" >> .env
-          echo "VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }}" >> .env
-          echo "VITE_FIREBASE_MEASUREMENT_ID=${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}" >> .env
-          echo "VITE_FIREBASE_VAPID_PUBLIC_KEY=${{ secrets.VITE_FIREBASE_VAPID_PUBLIC_KEY }}" >> .env
-          echo "VITE_TOSS_CLIENT_KET=${{ secrets.VITE_TOSS_CLIENT_KET }}" >> .env
-          echo "VITE_TOSS_CUSTOMER_KEY=${{ secrets.VITE_TOSS_CUSTOMER_KEY }}" >> .env
-
-      - run: cat .env
-
-      - run: npm i
-      - run: npm run build --if-present
-
-      - name: Upload to S3 Bucket
-        uses: awact/s3-action@master
-        with:
-          args: --acl public-read --follow-symlinks --delete
-        env:
-          SOURCE_DIR: 'dist'
-          AWS_REGION: 'ap-northeast-2'
-          AWS_S3_BUCKET: ${{ secrets.AWS_S3_WEB_HOST }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-
-      - name: Invalidate CloudFront
-        uses: chetan/invalidate-cloudfront-action@v2
-        env:
-          DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_WEB_HOST_ID }}
-          PATHS: '/*'
-          AWS_REGION: 'ap-northeast-2'
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
deleted file mode 100644
index 366ce6aa..00000000
--- a/.github/workflows/pull_request.yml
+++ /dev/null
@@ -1,37 +0,0 @@
-name: Pull Request
-
-on:
-  pull_request:
-    branches: ['main', 'dev']
-
-jobs:
-  build-react:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-          cache: 'npm'
-
-      - run: npm ci
-
-      - name: Build React
-        run: npm run build --if-present
-  build-storybook:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-          cache: 'npm'
-
-      - run: npm ci
-
-      - name: Build Storybook
-        run: npm run build-storybook --if-present
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0a42598b..9e98413a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "files.associations": {
     "*.css": "tailwindcss"