chore-fe: FE dev/prod 코드 빌드 관련 webpack 설정 변경

.github/workflows/fe-ci-cd-dev.yml

@@ -6,22 +6,22 @@ on:
       - fe/develop
 
 env:
-  lurgi: 'U07BJB1M53K'
-  U07BJB1M53K: 'FE팀 러기'
-  llqqssttyy: 'U07AZ2992CW'
-  U07AZ2992CW: 'FE팀 렛서'
-  seongjinme: 'U07B9HQDF4M'
-  U07B9HQDF4M: 'FE팀 아르'
-  Dobby-Kim: 'U07BJABU6G1'
-  U07BJABU6G1: 'BE팀 도비'
-  Chocochip101: 'U07BUEJDS8G'
-  U07BUEJDS8G: 'BE팀 초코칩'
-  xogns1514: 'U07AZ26UC2J'
-  U07AZ26UC2J: 'BE팀 러쉬'
-  cutehumanS2: 'U07B88ZQDU4'
-  U07B88ZQDU4: 'BE팀 냥인'
-  HyungHoKim00: 'U07B5HBKZM1'
-  U07B5HBKZM1: 'BE팀 명오'
+  lurgi: "U07BJB1M53K"
+  U07BJB1M53K: "FE팀 러기"
+  llqqssttyy: "U07AZ2992CW"
+  U07AZ2992CW: "FE팀 렛서"
+  seongjinme: "U07B9HQDF4M"
+  U07B9HQDF4M: "FE팀 아르"
+  Dobby-Kim: "U07BJABU6G1"
+  U07BJABU6G1: "BE팀 도비"
+  Chocochip101: "U07BUEJDS8G"
+  U07BUEJDS8G: "BE팀 초코칩"
+  xogns1514: "U07AZ26UC2J"
+  U07AZ26UC2J: "BE팀 러쉬"
+  cutehumanS2: "U07B88ZQDU4"
+  U07B88ZQDU4: "BE팀 냥인"
+  HyungHoKim00: "U07B5HBKZM1"
+  U07B5HBKZM1: "BE팀 명오"
 
 jobs:
   test-build:
@@ -33,6 +33,11 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}
       cancel-in-progress: true
+    env:
+      API_URL: ${{ secrets.API_URL }}
+      API_VERSION: ${{ secrets.API_VERSION }}
+      SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
     steps:
       - name: 저장소 checkout
@@ -58,10 +63,6 @@ jobs:
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm ci
 
-      - name: 환경변수 설정
-        run: |
-          echo "REACT_APP_CRURU_API_URL=${{ secrets.API_URL }}" >> .env.production
-
       - name: 코드 문법 테스트
         run: npm run lint
 
@@ -89,27 +90,28 @@ jobs:
   deploy:
     needs: test-build
     runs-on: [self-hosted, linux, cruru-fe]
+    environment: dev
 
     steps:
       - name: 작업 디렉터리 생성 및 이동
         run: |
-          mkdir -p ~/actions-runner/deploy
-          cd ~/actions-runner/deploy
+          mkdir -p ~/actions-runner/deploy/dev
+          cd ~/actions-runner/deploy/dev
 
       - name: 기존 빌드 파일들 삭제
         run: |
-          cd ~/actions-runner/deploy
+          cd ~/actions-runner/deploy/dev
           rm -rf dist
 
       - name: 새 빌드 파일을 runner instance에 다운로드
         uses: actions/download-artifact@v4
         with:
           name: fe-dev-dist
-          path: ~/actions-runner/deploy/dist
+          path: ~/actions-runner/deploy/dev/dist
 
       - name: 다운로드 된 빌드 파일을 S3에 배포
         run: |
-          cd ~/actions-runner/deploy
+          cd ~/actions-runner/deploy/dev
           aws s3 sync dist ${{ secrets.FE_DEPLOY_S3_URI }} --delete
 
       - name: CloudFront 캐시 무효화

.github/workflows/fe-ci-cd-prod.yml

@@ -6,22 +6,22 @@ on:
       - fe/main
 
 env:
-  lurgi: 'U07BJB1M53K'
-  U07BJB1M53K: 'FE팀 러기'
-  llqqssttyy: 'U07AZ2992CW'
-  U07AZ2992CW: 'FE팀 렛서'
-  seongjinme: 'U07B9HQDF4M'
-  U07B9HQDF4M: 'FE팀 아르'
-  Dobby-Kim: 'U07BJABU6G1'
-  U07BJABU6G1: 'BE팀 도비'
-  Chocochip101: 'U07BUEJDS8G'
-  U07BUEJDS8G: 'BE팀 초코칩'
-  xogns1514: 'U07AZ26UC2J'
-  U07AZ26UC2J: 'BE팀 러쉬'
-  cutehumanS2: 'U07B88ZQDU4'
-  U07B88ZQDU4: 'BE팀 냥인'
-  HyungHoKim00: 'U07B5HBKZM1'
-  U07B5HBKZM1: 'BE팀 명오'
+  lurgi: "U07BJB1M53K"
+  U07BJB1M53K: "FE팀 러기"
+  llqqssttyy: "U07AZ2992CW"
+  U07AZ2992CW: "FE팀 렛서"
+  seongjinme: "U07B9HQDF4M"
+  U07B9HQDF4M: "FE팀 아르"
+  Dobby-Kim: "U07BJABU6G1"
+  U07BJABU6G1: "BE팀 도비"
+  Chocochip101: "U07BUEJDS8G"
+  U07BUEJDS8G: "BE팀 초코칩"
+  xogns1514: "U07AZ26UC2J"
+  U07AZ26UC2J: "BE팀 러쉬"
+  cutehumanS2: "U07B88ZQDU4"
+  U07B88ZQDU4: "BE팀 냥인"
+  HyungHoKim00: "U07B5HBKZM1"
+  U07B5HBKZM1: "BE팀 명오"
 
 jobs:
   test-build:
@@ -33,6 +33,11 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}
       cancel-in-progress: true
+    env:
+      API_URL: ${{ secrets.API_URL }}
+      API_VERSION: ${{ secrets.API_VERSION }}
+      SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
     steps:
       - name: 저장소 checkout
@@ -58,10 +63,6 @@ jobs:
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm ci
 
-      - name: 환경변수 설정
-        run: |
-          echo "REACT_APP_CRURU_API_URL=${{ secrets.API_URL }}" >> .env.production
-
       - name: 코드 문법 테스트
         run: npm run lint
 
@@ -83,27 +84,28 @@ jobs:
   deploy:
     needs: test-build
     runs-on: [self-hosted, linux, cruru-fe]
+    environment: prod
 
     steps:
       - name: 작업 디렉터리 생성 및 이동
         run: |
-          mkdir -p ~/actions-runner/deploy
-          cd ~/actions-runner/deploy
+          mkdir -p ~/actions-runner/deploy/prod
+          cd ~/actions-runner/deploy/prod
 
       - name: 기존 빌드 파일들 삭제
         run: |
-          cd ~/actions-runner/deploy
+          cd ~/actions-runner/deploy/prod
           rm -rf dist
 
       - name: 새 빌드 파일을 runner instance에 다운로드
         uses: actions/download-artifact@v4
         with:
           name: fe-prod-dist
-          path: ~/actions-runner/deploy/dist
+          path: ~/actions-runner/deploy/prod/dist
 
       - name: 다운로드 된 빌드 파일을 S3에 배포
         run: |
-          cd ~/actions-runner/deploy
+          cd ~/actions-runner/deploy/prod
           aws s3 sync dist ${{ secrets.FE_DEPLOY_S3_URI }} --delete
 
       - name: CloudFront 캐시 무효화

.github/workflows/fe-ci-pr-test.yml

@@ -10,11 +10,17 @@ jobs:
   run-test-pr-opened:
     if: startsWith(github.head_ref, 'fe-')
     runs-on: ubuntu-22.04
+    environment: dev
     permissions:
       pull-requests: write
     defaults:
       run:
         working-directory: ./frontend
+    env:
+      API_URL: ${{ secrets.API_URL }}
+      API_VERSION: ${{ secrets.API_VERSION }}
+      SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
     steps:
       - name: 저장소 checkout
@@ -37,10 +43,6 @@ jobs:
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm ci
 
-      - name: 백엔드 API 연동용 환경변수 설정
-        run: |
-          echo "REACT_APP_CRURU_API_URL=${{ secrets.API_URL }}" >> .env.production
-
       - name: 코드 문법 테스트
         run: npm run lint
 

frontend/src/api/endPoint.ts

@@ -1,7 +1,7 @@
-const BASE_URL = process.env.REACT_APP_CRURU_API_URL;
+import { BASE_URL } from '@constants/constants';
 
-export const PROCESSES = `${BASE_URL}/v1/processes`;
+export const PROCESSES = `${BASE_URL}/processes`;
 
-export const APPLICANTS = `${BASE_URL}/v1/applicants`;
+export const APPLICANTS = `${BASE_URL}/applicants`;
 
-export const EVALUATIONS = `${BASE_URL}/v1/evaluations`;
+export const EVALUATIONS = `${BASE_URL}/evaluations`;

frontend/src/constants/constants.ts

@@ -1,3 +1,5 @@
+export const BASE_URL = `${process.env.API_URL}/${process.env.API_VERSION}`;
+
 export const NAV_BAR_MENU = {
   applicant: '지원자 관리',
   process: '프로세스 관리',

frontend/src/env.d.ts

@@ -1,6 +1,8 @@
 declare namespace NodeJS {
   interface ProcessEnv {
-    REACT_APP_CRURU_API_URL: string;
+    API_URL: string;
+    API_VERSION: string;
     SENTRY_DSN: string;
+    SENTRY_AUTH_TOKEN: string;
   }
 }

frontend/src/main.tsx

@@ -7,6 +7,7 @@ import { ModalProvider } from '@contexts/ModalContext';
 
 import { Global, ThemeProvider } from '@emotion/react';
 
+import { BASE_URL } from '@constants/constants';
 import theme from './styles/theme';
 import globalStyles from './styles/globalStyles';
 
@@ -18,7 +19,7 @@ Sentry.init({
   integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
   // Performance Monitoring
   tracesSampleRate: 1.0, //  Capture 100% of the transactions
-  tracePropagationTargets: ['localhost', process.env.REACT_APP_CRURU_API_URL],
+  tracePropagationTargets: ['localhost', BASE_URL],
   // Session Replay
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,

frontend/webpack.prod.js

@@ -1,15 +1,13 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.config.js');
-const Dotenv = require('dotenv-webpack');
+const webpack = require('webpack');
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'hidden-source-map',
   plugins: [
-    new Dotenv({
-      path: './.env.production',
-      systemvars: true,
-      safe: true,
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
     }),
   ],
 });