diff --git a/.github/workflows/fe-merge-dev.yml b/.github/workflows/fe-merge-dev.yml index 2031ef69e..aff77dd6a 100644 --- a/.github/workflows/fe-merge-dev.yml +++ b/.github/workflows/fe-merge-dev.yml @@ -4,8 +4,8 @@ on: workflow_dispatch: pull_request: - branches: [ develop ] - types: [ closed ] + branches: [develop] + types: [closed] paths: frontend/** permissions: @@ -23,13 +23,18 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18 - cache: "npm" - cache-dependency-path: "frontend" + cache: 'npm' + cache-dependency-path: 'frontend' - name: Install npm run: npm install working-directory: frontend + - name: 테스트 환경변수 설정 + run: | + echo "REACT_APP_API_DEFAULT_DEV=${{ secrets.REACT_APP_API_DEFAULT_DEV }}" >> $GITHUB_ENV + echo "REACT_APP_API_DEFAULT_PROD=${{ secrets.REACT_APP_API_DEFAULT_PROD }}" >> $GITHUB_ENV + - name: Build project run: npm run build working-directory: frontend @@ -41,7 +46,7 @@ jobs: path: frontend/dist deploy: - runs-on: [ self-hosted, dev ] + runs-on: [self-hosted, dev] needs: build-and-upload if: github.event.pull_request.merged @@ -70,5 +75,3 @@ jobs: env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} if: always() - - diff --git a/.github/workflows/fe-merge-prod.yml b/.github/workflows/fe-merge-prod.yml index 7aec838af..54976cbfd 100644 --- a/.github/workflows/fe-merge-prod.yml +++ b/.github/workflows/fe-merge-prod.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: pull_request: - branches: [ main ] + branches: [main] types: [closed] paths: frontend/** @@ -23,13 +23,18 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18 - cache: "npm" - cache-dependency-path: "frontend" + cache: 'npm' + cache-dependency-path: 'frontend' - name: Install npm run: npm install working-directory: frontend + - name: 테스트 환경변수 설정 + run: | + echo "REACT_APP_API_DEFAULT_DEV=${{ secrets.REACT_APP_API_DEFAULT_DEV }}" >> $GITHUB_ENV + echo "REACT_APP_API_DEFAULT_PROD=${{ secrets.REACT_APP_API_DEFAULT_PROD }}" >> $GITHUB_ENV + - name: Build project run: npm run build working-directory: frontend @@ -41,7 +46,7 @@ jobs: path: frontend/dist deploy: - runs-on: [ self-hosted, prod] + runs-on: [self-hosted, prod] needs: build-and-upload if: github.event.pull_request.merged diff --git a/frontend/.gitignore b/frontend/.gitignore index f27b4be64..c54f0de6d 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -1,4 +1,5 @@ node_modules/ + .env dist/ build/ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2e7ceac7c..ba9f5d188 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -42,7 +42,7 @@ "babel-plugin-styled-components": "^2.1.4", "chromatic": "^6.19.9", "cypress": "^12.17.4", - "dotenv": "^16.3.1", + "dotenv-webpack": "^8.0.1", "eslint": "^8.44.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.8.0", @@ -11712,6 +11712,24 @@ "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, + "node_modules/dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "dependencies": { + "dotenv": "^8.2.0" + } + }, + "node_modules/dotenv-defaults/node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/dotenv-expand": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz", @@ -11721,6 +11739,21 @@ "node": ">=12" } }, + "node_modules/dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "dependencies": { + "dotenv-defaults": "^2.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "webpack": "^4 || ^5" + } + }, "node_modules/duplexify": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", @@ -32555,12 +32588,38 @@ "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", "dev": true }, + "dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "requires": { + "dotenv": "^8.2.0" + }, + "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + } + } + }, "dotenv-expand": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz", "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==", "dev": true }, + "dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "requires": { + "dotenv-defaults": "^2.0.2" + } + }, "duplexify": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 508bba258..882616ba5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -49,7 +49,7 @@ "babel-plugin-styled-components": "^2.1.4", "chromatic": "^6.19.9", "cypress": "^12.17.4", - "dotenv": "^16.3.1", + "dotenv-webpack": "^8.0.1", "eslint": "^8.44.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.8.0", diff --git a/frontend/src/apis/getApi.ts b/frontend/src/apis/getApi.ts index cc4f10ccc..b63d88879 100644 --- a/frontend/src/apis/getApi.ts +++ b/frontend/src/apis/getApi.ts @@ -7,7 +7,6 @@ interface Headers { 'Content-Type': string; [key: string]: string; } - export const getApi = async ( type: 'tMap' | 'default' | 'login', url: string, @@ -18,21 +17,17 @@ export const getApi = async ( const headers: Headers = { 'Content-Type': 'application/json', }; - if (userToken) { headers['Authorization'] = `Bearer ${userToken}`; } - const response = await fetch(apiUrl, { method: 'GET', headers: headers, }); - const responseData: T = await response.json(); if (response.status >= 400) { //todo: status 상태별로 로그인 토큰 유효 검증 throw new Error('API 요청에 실패했습니다.'); } - return responseData; }; diff --git a/frontend/src/apis/postApi.ts b/frontend/src/apis/postApi.ts index 8a3086eb7..1464c1ad8 100644 --- a/frontend/src/apis/postApi.ts +++ b/frontend/src/apis/postApi.ts @@ -7,13 +7,11 @@ interface Headers { 'Content-Type': string; [key: string]: string; } - export const postApi = async (url: string, data?: {}, contentType?: string) => { const userToken = localStorage.getItem('userToken'); const headers: Headers = { 'Content-Type': `${contentType || 'application/json'}`, }; - if (userToken) { headers['Authorization'] = `Bearer ${userToken}`; } @@ -23,11 +21,9 @@ export const postApi = async (url: string, data?: {}, contentType?: string) => { headers: headers, body: JSON.stringify(data), }); - if (response.status >= 400) { //todo: status 상태별로 로그인 토큰 유효 검증 throw new Error('API 요청에 실패했습니다.'); } - return response; }; diff --git a/frontend/src/apis/putApi.ts b/frontend/src/apis/putApi.ts index dbfb04d6a..a918740bc 100644 --- a/frontend/src/apis/putApi.ts +++ b/frontend/src/apis/putApi.ts @@ -7,7 +7,6 @@ interface Headers { 'Content-Type': string; [key: string]: string; } - export const putApi = async ( url: string, data: { name: string; images: string[]; description: string }, @@ -16,7 +15,6 @@ export const putApi = async ( const headers: Headers = { 'Content-Type': 'application/json', }; - if (userToken) { headers['Authorization'] = `Bearer ${userToken}`; } @@ -26,10 +24,8 @@ export const putApi = async ( headers: headers, body: JSON.stringify(data), }); - if (response.status >= 400) { throw new Error('API 요청에 실패했습니다.'); } - return response; }; diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index cb686a234..1d9896b54 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -1,10 +1,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { ProvidePlugin, EnvironmentPlugin } = require('webpack'); -const dotenv = require('dotenv'); - -// Load environment variables from '.env' file -const env = dotenv.config().parsed || {}; +const Dotenv = require('dotenv-webpack'); module.exports = { entry: { @@ -23,10 +20,8 @@ module.exports = { React: 'react', process: 'process/browser.js', }), - new EnvironmentPlugin({ - REACT_APP_API_DEFAULT_DEV: env.REACT_APP_API_DEFAULT_DEV, - REACT_APP_API_DEFAULT_PROD: env.REACT_APP_API_DEFAULT_PROD, - }), + + new Dotenv(), ], resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'],