chore(FE): 프론트엔드 CI/CD 구축 (#144)

* docs: .gitignore 수정 * chore(BE): PR workflow paths 추가 * chore: PR workflow 추가 * chore: dev, prod 배포 workflow 추가 * rename: workflows dev -> staging 이름 변경 * chore: workflows name 변경 * chore: S3 버킷 환경별로 분리 * chore: CloudFront ID 환경별로 분리
freemed-it · Jan 19, 2025 · cbd91da · cbd91da
1 parent 9150e94
commit cbd91da
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 9 deletions.
diff --git a/.github/workflows/backend-ci.yml b/.github/workflows/backend-ci.yml
@@ -1,9 +1,12 @@
-name: BE CI
+name: Backend PR CI
 
 on:
   pull_request:
     branches:
-      - '**'
+      - "**"
+    paths:
+      - backend/**
+      - .github/**
 
 jobs:
   build:
@@ -21,7 +24,7 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: yarn
-          cache-dependency-path: '**/yarn.lock'
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Cache dependencies
         uses: actions/cache@v3

diff --git a/.github/workflows/backend-prod.yml b/.github/workflows/backend-prod.yml
@@ -1,4 +1,4 @@
-name: BE Prod Deploy
+name: Backend Production Deploy
 
 on:
   push:
@@ -27,7 +27,7 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: yarn
-          cache-dependency-path: '**/yarn.lock'
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Cache dependencies
         uses: actions/cache@v3
@@ -83,7 +83,7 @@ jobs:
           aws-region: ${{ secrets.AWS_S3_REGION }}
 
       - name: Upload to S3
-        run: aws s3 cp --region ${{ secrets.AWS_S3_REGION }} ./prod.zip s3://${{ secrets.AWS_S3_BUCKET_NAME }}/prod.zip
+        run: aws s3 cp --region ${{ secrets.AWS_S3_REGION }} ./prod.zip s3://${{ secrets.AWS_S3_BUCKET_NAME_BACKEND }}/prod.zip
 
       - name: Deploy to EC2 with CodeDeploy
         run: aws deploy create-deployment

diff --git a/.github/workflows/backend-dev.yml → .github/workflows/backend-staging.yml b/.github/workflows/backend-dev.yml → .github/workflows/backend-staging.yml
@@ -1,4 +1,4 @@
-name: BE Dev Deploy
+name: Backend Staging Deploy
 
 on:
   push:
@@ -27,7 +27,7 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: yarn
-          cache-dependency-path: '**/yarn.lock'
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Cache dependencies
         uses: actions/cache@v3
@@ -82,7 +82,7 @@ jobs:
           aws-region: ${{ secrets.AWS_S3_REGION }}
 
       - name: Upload to S3
-        run: aws s3 cp --region ${{ secrets.AWS_S3_REGION }} ./dev.zip s3://${{ secrets.AWS_S3_BUCKET_NAME }}/dev.zip
+        run: aws s3 cp --region ${{ secrets.AWS_S3_REGION }} ./dev.zip s3://${{ secrets.AWS_S3_BUCKET_NAME_BACKEND }}/dev.zip
 
       - name: Deploy to EC2 with CodeDeploy
         run: aws deploy create-deployment

diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
@@ -0,0 +1,41 @@
+name: Frontend PR CI
+
+on:
+  pull_request:
+    branches:
+      - "**"
+    paths:
+      - frontend/**
+      - .github/**
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules-
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build
+        run: yarn build
diff --git a/.github/workflows/frontend-prod.yml b/.github/workflows/frontend-prod.yml
@@ -0,0 +1,68 @@
+name: Frontend Production Deploy
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - frontend/**
+      - .github/**
+
+jobs:
+  deploy:
+    env:
+      ENV_PATH: .env.production
+    environment: production
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules-
+
+      - name: Create .env file
+        run: |
+          touch ${{ env.ENV_PATH }}
+          cat ${{ env.ENV_PATH }}
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build
+        run: yarn build
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_S3_REGION }}
+
+      - name: Deploy to S3
+        run: |
+          aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET_NAME_FRONTEND_PROD }} \
+            --delete \
+            --acl public-read \
+            --cache-control "max-age=0, no-cache, no-store, must-revalidate"
+
+      - name: Invalidate CloudFront Cache
+        run: aws cloudfront create-invalidation \
+          --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID_PROD }} \
+          --paths "/*"
diff --git a/.github/workflows/frontend-staging.yml b/.github/workflows/frontend-staging.yml
@@ -0,0 +1,68 @@
+name: Frontend Staging Deploy
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - frontend/**
+      - .github/**
+
+jobs:
+  deploy:
+    env:
+      ENV_PATH: .env.staging
+    environment: staging
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules-
+
+      - name: Create .env file
+        run: |
+          touch ${{ env.ENV_PATH }}
+          cat ${{ env.ENV_PATH }}
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build
+        run: yarn build
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_S3_REGION }}
+
+      - name: Deploy to S3
+        run: |
+          aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET_NAME_FRONTEND_STAGING }} \
+            --delete \
+            --acl public-read \
+            --cache-control "max-age=0, no-cache, no-store, must-revalidate"
+
+      - name: Invalidate CloudFront Cache
+        run: aws cloudfront create-invalidation \
+          --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID_STAGING }} \
+          --paths "/*"
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -22,3 +22,12 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+.env.staging
+.env.production