[FE] github actions 으로 cd 를 구축한다.

.github/workflows/frontend-dev-cd.yml

@@ -1,49 +1,60 @@
-name: Deploy Development to S3 and invalidate CloudFront Cache
-
+name: frontend-dev-cd
 on:
   push:
     branches:
-      - dev-fe #dev-fe가 trigger 브랜치
+      - dev-fe
+    paths:
+      - "frontend/**"
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-
+    environment: frontend-development
     steps:
-      # 1. 소스코드 체크아웃
-      - name: Checkout Source Code
-        uses: actions/checkout@v3
-
-      # 2. Node.js 설치 (필요시)
-      - name: Node.js
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: "npm"
+          node-version: 16
 
-      # 3. 빌드
-      - run: npm --force ci
-
-      - name: Build Production
-        run: CI=false npm run build --if-present
+      - name: Checkout Source Code
+        uses: actions/checkout@v3
 
-      # 4. AWS Credentials 설정
-       - name: Configure AWS credentials
+      - name: Generate .env File
+        working-directory: ./frontend
+        run: |
+          echo "API_ENV=${{ secrets.API_ENV }}" >> .env
+          echo "API_URL=${{ secrets.API_URL }}" >> .env
+          echo "REDIRECT_URI=${{ secrets.REDIRECT_URI }}" >> .env 
+          echo "CLIENT_ID=${{ secrets.CLIENT_ID }}" >> .env 
+          echo "KAKAO_MAP_KEY=${{ secrets.KAKAO_MAP_KEY }}" >> .env 
+          echo "SENTRY_DSN_TOKEN=${{ secrets.SENTRY_DSN_TOKEN }}" >> .env 
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env 
+          echo "SENTRY_ORG=${{ secrets.SENTRY_ORG }}" >> .env 
+          echo "SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }}" >> .env 
+          echo "ANALYZE_BUNDLE=${{ secrets.ANALYZE_BUNDLE }}" >> .env 
+          echo "CI=${{ secrets.CI }}" >> .env
+          echo "AMPLITUDE_API_KEY=${{ secrets.AMPLITUDE_API_KEY }}" >> .env
+
+      - name: Install Dependencies
+        working-directory: ./frontend
+        run: npm install
+
+      - name: Build for Dev
+        working-directory: ./frontend
+        run: npm run build:dev-fe
+
+      - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v2
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ap-northeast-2 # 서울 리전
+          aws-region: ap-northeast-2
 
-      # 5. S3에 파일 업로드
       - name: Deploy to S3
+        working-directory: ./frontend/dist
         run: |
-          aws s3 sync build/ s3://dev-fe.bang-ggood.com --delete
+          aws s3 sync . s3://${{secrets.S3_BUCKET}} --delete
 
-      # 6. CloudFront 캐시 무효화
       - name: Invalidate CloudFront Cache
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.github/workflows/frontend-prod-cd.yml

@@ -0,0 +1,60 @@
+name: frontend-prod-cd
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "frontend/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    environment: frontend-production
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Checkout Source Code
+        uses: actions/checkout@v3
+
+      - name: Generate .env File
+        working-directory: ./frontend
+        run: |
+          echo "API_ENV=${{ secrets.API_ENV }}" >> .env
+          echo "API_URL=${{ secrets.API_URL }}" >> .env
+          echo "REDIRECT_URI=${{ secrets.REDIRECT_URI }}" >> .env 
+          echo "CLIENT_ID=${{ secrets.CLIENT_ID }}" >> .env 
+          echo "KAKAO_MAP_KEY=${{ secrets.KAKAO_MAP_KEY }}" >> .env 
+          echo "SENTRY_DSN_TOKEN=${{ secrets.SENTRY_DSN_TOKEN }}" >> .env 
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env 
+          echo "SENTRY_ORG=${{ secrets.SENTRY_ORG }}" >> .env 
+          echo "SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }}" >> .env 
+          echo "ANALYZE_BUNDLE=${{ secrets.ANALYZE_BUNDLE }}" >> .env 
+          echo "CI=${{ secrets.CI }}" >> .env
+          echo "AMPLITUDE_API_KEY=${{ secrets.AMPLITUDE_API_KEY }}" >> .env
+
+      - name: Install Dependencies
+        working-directory: ./frontend
+        run: npm install
+
+      - name: Build for Prod
+        working-directory: ./frontend
+        run: npm run build
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        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: Deploy to S3
+        working-directory: ./frontend/dist
+        run: |
+          aws s3 sync . s3://${{secrets.S3_BUCKET}} --delete
+
+      - name: Invalidate CloudFront Cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

frontend/src/pages/AdminPage.tsx

@@ -27,7 +27,7 @@ const S = {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh; /* 전체 화면 높이에 맞춰 정렬 */
+    height: 100vh;
 
     background-color: ${({ theme }) => theme.palette.white};
   `,