chore: 프론트엔드 배포 워크플로우 dev/prod 분리 (#389)

* refactor: dev/prod 분리

* fix: workflow 이름 구분

* chore: 워크플로우 테스트

* fix: dev용 준비

* fix: prod용 워크플로우 원상복구

* fix: dev서버 msw 동작하도록 수정

* fix: dev용 워크플로우 원상복구

* refactor: 주석 제거

.github/workflows/frontend-deploy.yml → .github/workflows/frontend-deploy-dev.yml

@@ -1,4 +1,4 @@
-name: Frontend Deploy
+name: Frontend Deploy to Dev
 
 on:
   push:
@@ -37,24 +37,16 @@ jobs:
         uses: docker/build-push-action@v4
         with:
           context: ./frontend
+          file: ./frontend/Dockerfile.dev
           push: true
           tags: ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
           platforms: |
             linux/amd64
             linux/arm64
 
-      # - name: Build Docker image
-      #   run: |
-      #     docker build -t ${{ secrets.FRONTEND_IMAGE_NAME }}:$GITHUB_RUN_NUMBER --platform linux/arm64 .
-      #     docker tag ${{ secrets.FRONTEND_IMAGE_NAME }}:$GITHUB_RUN_NUMBER ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
-
-      # - name: Push Docker image to DockerHub
-      #   run: |
-      #     docker push ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
-
   deploy-to-develop-EC2:
     needs: build-dockerfile
-    runs-on: self-hosted
+    runs-on: front-dev-server
 
     steps:
       - name: Deploy to Develop EC2

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

@@ -0,0 +1,66 @@
+name: Frontend Deploy to Prod
+
+on:
+  push:
+    branches: [main]
+    paths: frontend/**
+
+jobs:
+  build-dockerfile:
+    defaults:
+      run:
+        working-directory: frontend
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: ./frontend
+          push: true
+          tags: ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
+          platforms: |
+            linux/amd64
+            linux/arm64
+
+  deploy-to-develop-EC2:
+    needs: build-dockerfile
+    runs-on: front-prod-server
+
+    steps:
+      - name: Deploy to Develop EC2
+        run: |
+          docker stop ${{ secrets.FRONTEND_CONTAINER_NAME }} || true
+          docker rm ${{ secrets.FRONTEND_CONTAINER_NAME }} || true
+          docker pull ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
+          docker run -d -p 3000:3000 --name ${{ secrets.FRONTEND_CONTAINER_NAME }} ${{ secrets.FRONTEND_IMAGE_NAME }}:latest
+
+      - name: Slack Notification
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          author_name: 프론트엔드 배포 알림
+          fields: repo,message,commit,author,action,eventName,ref,workflow,job,took
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        if: always()

frontend/.env.development

@@ -1,3 +1,3 @@
 FAST_REFRESH=true
 BASE_URL=https://dev.api.zipgo.pet
-KAKAO_REDIRECT_URI=http://localhost:3000/login
+KAKAO_REDIRECT_URI=https://dev.zipgo.pet/login

frontend/config/paths.js

@@ -35,6 +35,7 @@ const resolveModule = (resolveFn, filePath) => {
 module.exports = {
   appHtml: resolveApp('public/index.html'),
   appFavicon: resolveApp('public/favicon.ico'),
+  msw: resolveApp('public/mockServiceWorker.js'),
   appIndex: resolveModule(resolveApp, 'src/index'),
   appOutput: resolveApp('dist'),
   appTsConfig: resolveApp('tsconfig.json'),

frontend/config/webpack.dev.js

@@ -1,6 +1,7 @@
-const path = require('path');
+const paths = require('./paths.js');
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
@@ -12,5 +13,15 @@ module.exports = merge(common, {
     historyApiFallback: true,
     port: 3000,
   },
-  plugins: [new ReactRefreshWebpackPlugin()],
+  plugins: [
+    new ReactRefreshWebpackPlugin(),    
+    new CopyPlugin({
+      patterns: [
+        {
+          from: paths.msw,
+          to: './',
+        },
+      ]
+    })
+  ],
 });

frontend/package.json

@@ -8,6 +8,7 @@
     "start:prod": "serve -s dist",
     "start:sb": "storybook dev -p 6006",
     "build:prod": "cross-env NODE_ENV=production webpack --progress --config config/webpack.prod.js",
+    "build:dev": "cross-env NODE_ENV=development webpack --progress --config config/webpack.dev.js",
     "build:sb": "sb build",
     "postinstall": "cd .. && husky install frontend/.husky && chmod +x frontend/.husky/*",
     "test-storybook": "test-storybook"