[feat] api 호스트 주소 env 파일을 통해 호출 (#64)

* feat: 환경변수를 통한 api 주소 호출

* feat: environment.d.ts 추가

* chore: github action 실행 시 env 생성

.env.sample

@@ -0,0 +1,6 @@
+API_HOSTNAME=localhost
+API_PORT=3000
+API_VERSION=v1
+
+API_URL=http://$API_HOSTNAME:$API_PORT/api/$API_VERSION
+NEXT_PUBLIC_API_URL=$API_URL

.github/workflows/chromatic.yml

@@ -25,6 +25,21 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Generate Environment Variables File for Production
+        run: |
+          echo "API_HOSTNAME=$API_HOSTNAME" >> .env
+          echo "API_PORT=$API_PORT" >> .env
+          echo "API_VERSION=$API_VERSION" >> .env
+          echo "API_URL=$API_URL" >> .env
+          echo "NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL" >> .env
+        env:
+          API_HOSTNAME: ${{ secrets.API_HOSTNAME }}
+          API_PORT: ${{ secrets.API_PORT }}
+          API_VERSION: ${{ secrets.API_VERSION }}
+          API_URL: ${{ secrets.API_URL }}
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+
+
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

.gitignore

@@ -25,8 +25,6 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
 
 # vercel
 .vercel
@@ -96,12 +94,6 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# Local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 # Vercel
 .vercel
 
@@ -268,3 +260,7 @@ build-storybook.log
 # End of https://www.toptal.com/developers/gitignore/api/storybookjs
 
 .idea
+
+.env
+.env.*
+!.env.sample

environment.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    readonly NEXT_PUBLIC_API_URL: string;
+  }
+}

package.json

@@ -61,6 +61,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "msw": "^0.49.1",
     "msw-storybook-addon": "^1.6.3",
+    "next-env": "^1.1.1",
     "prettier": "^2.7.1",
     "start-server-and-test": "^1.14.0",
     "storybook-addon-next-router": "^4.0.2",

src/configs/axios.ts

@@ -1,7 +1,6 @@
 import axios from 'axios';
 
-// TODO-GYU: 배포시 실제 API 로 변경되는 로직 추가
-export const BASE_URL = 'http://localhost:3000/api/v1';
+export const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
 export const initAxiosConfig = () => {
   axios.defaults.baseURL = BASE_URL ?? '';