chore: CI/CD 설정을 위한 빌드 스크립트 수정 (#239)

* chore: 디버깅 스크립트가 포함된 CI/CD 설정

* fix: 잘못 설정된 환경 변수 명 숮어

* fix: 잘못 설정된 환경 변수 명 수정

* fix: 잘못 설정된 CloudFront 환경 변수명 수정

* fix: 액션 버전 업그레이드

* fix: CloudFront 액션에 최신 버전 적용

* chore: aws cli을 직접 사용하여 캐시 무효화 설정

* chore: 디버깅 용 스크립트를 제거한 CI/CD 설정

* chore: 추가 디버깅을 위해 임시 액션 설정

* move: 중복 선언된 aws 자격 증명 제거

* chore: npm ci 를 통한 CI 환경에서의 의존성 설치 추가

* fix: 배포 스크립트와 npm run deploy의 액션을 동일하게 설정

* chore: 디버깅용 스크립트 삭제

.github/workflows/deploy.yml

@@ -3,60 +3,53 @@ name: Deploy React App to AWS S3 and CloudFront
 on:
   push:
     branches:
-      - 'release/v2.0.0'
-      - 'dev'
+      - release/v2.0.0
+      - dev
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Set up AWS credentials
-        uses: aws-actions/configure-aws-credentials@v2
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
         with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ${{ secrets.AWS_REGION }}
+          node-version: '18'
 
-      - name: Cache Node.js modules
-        uses: actions/cache@v3
+      - name: Cache npm packages
+        uses: actions/cache@v4
         with:
           path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-npm
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Install dependencies and build
+      - name: Build the project
         env:
           NODE_ENV: production
           API_URL: ${{ secrets.API_URL }}
           CDN_URL: ${{ secrets.CDN_URL }}
-        run: |
-          npm ci
-          npm run build
+        run: npm run build
+
+      - name: Set up 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: ${{ secrets.AWS_REGION }}
 
       - name: Deploy to S3
         run: |
-          aws s3 sync ./dist/ s3://${{ secrets.AWS_S3_BUCKET }} --delete
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: ${{ secrets.AWS_REGION }}
+          aws s3 sync ./dist/ s3://${{ secrets.S3_BUCKET_NAME }} --delete
 
       - name: Invalidate CloudFront cache
-        uses: chetan/invalidate-cloudfront-action@v2
-        with:
-          distribution: ${{ secrets.AWS_CLOUDFRONT_ID }}
-          paths: "/*"
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: ${{ secrets.AWS_REGION }}
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"

package.json

@@ -12,7 +12,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
-    "deploy": "npm run build && aws s3 sync ./build/ s3://${AWS_S3_BUCKET} --delete && aws cloudfront create-invalidation --distribution-id ${AWS_CLOUDFRONT_ID} --paths '/*'"
+    "deploy": "npm run build && aws s3 sync ./dist/ s3://${S3_BUCKET_NAME} --delete && aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'"
   },
   "author": "",
   "license": "ISC",