[FE] chore: 프론트엔드 배포서버 CI/CD 스크립트 작성, 웹팩 설정 추가 (#198)

* feat: 프로덕션 배포 스크립트 `cicd-fe-prod.yml`, `Dockerfile-prod` 작성

* feat: 프로덕션 배포를 위한 `webpack` 설정 파일들 수정

.github/workflows/cicd-fe-prod.yml

@@ -0,0 +1,48 @@
+name: CICD for Frontend Production
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'frontend/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: move to frontend path
+        run: |
+          cd ./frontend
+      - name: Create .env.production variable
+        run: |
+          cd ./frontend
+          touch .env.production
+          echo "BASE_URL=${{secrets.BASE_URL_PRODUCTION}}" >> .env.production
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile-prod
+          push: true
+          tags: ${{ secrets.DOCKER_USERNAME }}/dong-gle-frontend:latest
+          platforms: linux/arm64
+
+  deploy:
+    needs: build
+    uses: ./.github/workflows/deploy-prod.yml
+    secrets: inherit

frontend/Dockerfile-prod

@@ -0,0 +1,14 @@
+FROM node:18-alpine as builder
+WORKDIR /app
+COPY package.json .
+RUN yarn install
+COPY ./ ./
+RUN yarn build:prod
+
+FROM nginx
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY ./default.conf /etc/nginx/conf.d/default.conf 
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 3000

frontend/webpack.common.js

@@ -1,8 +1,9 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
-  mode: 'development',
+  mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
   entry: './src/index.tsx',
   module: {
     rules: [
@@ -49,5 +50,11 @@ module.exports = {
     hot: true,
     open: true,
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      PRODUCT_ENV: JSON.stringify(process.env.NODE_ENV),
+      MOCKING_ENV: JSON.stringify(process.env.MOCKING_ENV),
+    }),
+  ],
   devtool: 'source-map',
 };

frontend/webpack.dev.js

@@ -12,11 +12,5 @@ module.exports = merge(common, {
     hot: true,
     open: true,
   },
-  plugins: [
-    new Dotenv({ path: './.env.development' }),
-    new webpack.DefinePlugin({
-      PRODUCT_ENV: JSON.stringify(process.env.NODE_ENV),
-      MOCKING_ENV: JSON.stringify(process.env.MOCKING_ENV),
-    }),
-  ],
+  plugins: [new Dotenv({ path: './.env.development' })],
 });

frontend/webpack.prod.js

@@ -1,7 +1,9 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'hidden-source-map',
+  plugins: [new Dotenv({ path: './.env.production' })],
 });