환경변수 정리 (#135)

* chore: 환경변수 줄이기

* docs: 기여문서 업데이트

* chore: docker-compose 파일 수정

* chore: update .env.example

Author: qkrdmstlr3

.env.example

@@ -1,23 +1,16 @@
-VITE_BASE_SERVER_URL_DEV=
-VITE_BASE_SERVER_URL_PROD=
+VITE_BASE_SERVER_URL=
 VITE_AUTH0_DOMAIN=
 VITE_AUTH0_CLIENT_ID=
 VITE_EMAIL_DOMAIN_NAME=
 
-BASE_SERVER_URL_DEV=
-BASE_SERVER_URL_PROD=
+SLACK_BOT_TOKEN=
 
-SLACK_BOT_TOKEN_DEV=
-SLACK_BOT_TOKEN_PROD=
+CODEPOCKET_CHANNEL_ID=
 
-CODEPOCKET_CHANNEL_ID_DEV=
-CODEPOCKET_CHANNEL_ID_PROD=
+CHAPTER_FRONTED_CHANNEL_ID=
 
-CHAPTER_FRONTED_CHANNEL_ID_DEV=
-CHAPTER_FRONTED_CHANNEL_ID_PROD=
+MONGO_DB_URI=
 
-MONGO_DB_URI_DEV=
-MONGO_DB_URI_PROD=
+MONGO_DB_NAME=
 
-MONGO_DB_NAME_DEV=
-MONGO_DB_NAME_PROD=
+BASE_SERVER_URL=

CONTRIBUTING.md

@@ -10,10 +10,25 @@ yarn set version 3.2.1
 
 ### .env 작성하기
 
-아래와 같이 .env파일을 만들어주세요!
+아래와 같이 .env파일을 만들어주세요!(뒤에 !가 들어가있는 부분은 직접 값을 넣어주셔야해요)
 
 ```
+VITE_BASE_SERVER_URL=http://0.0.0.0:8080
+VITE_AUTH0_DOMAIN=AUTO0 도메인!
+VITE_AUTH0_CLIENT_ID=AUTH0 클라이언트 아이디!
+VITE_EMAIL_DOMAIN_NAME=*
 
+SLACK_BOT_TOKEN=슬랙 봇 토큰!
+
+CODEPOCKET_CHANNEL_ID=코드 알림이 올라올 슬랙 채널 아이디!
+
+CHAPTER_FRONTED_CHANNEL_ID=코드가 올라올 슬랙 채널 아이디!
+
+MONGO_DB_URI=mongodb://root:example@localhost:27017
+
+MONGO_DB_NAME=codepocket
+
+BASE_SERVER_URL=http://0.0.0.0:8080
 ```
 
 ### Codepocket 구동하기

client/src/env.d.ts

@@ -1,6 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_BASE_SERVER_URL_DEV: string;
-  readonly VITE_BASE_SERVER_URL_PROD: string;
+  readonly VITE_BASE_SERVER_URL: string;
   readonly VITE_AUTH0_DOMAIN: string;
   readonly VITE_AUTH0_CLIENT_ID: string;
   readonly VITE_EMAIL_DOMAIN_NAME: string;

client/src/shared/constant.ts

@@ -1,5 +1,4 @@
-export const BASE_LOCAL_SERVER_URL = import.meta.env.VITE_BASE_SERVER_URL_DEV;
-export const BASE_PROD_SERVER_URL = import.meta.env.VITE_BASE_SERVER_URL_PROD;
+export const BASE_SERVER_URL = import.meta.env.VITE_BASE_SERVER_URL;
 
 export const AUTH0_DOMAIN = import.meta.env.VITE_AUTH0_DOMAIN;
 export const AUTH0_CLIENT_ID = import.meta.env.VITE_AUTH0_CLIENT_ID;

client/src/shared/lib/axios.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 
-import { BASE_LOCAL_SERVER_URL, BASE_PROD_SERVER_URL } from '../constant';
+import { BASE_SERVER_URL } from '../constant';
 
 export interface ResponseType<T> extends AxiosResponse {
   data: T;
@@ -26,5 +26,5 @@ const transformResponse = (data: string) => {
 
 export const axiosInstance = axios.create({
   transformResponse,
-  baseURL: process.env.NODE_ENV === 'development' ? BASE_LOCAL_SERVER_URL : BASE_PROD_SERVER_URL,
+  baseURL: BASE_SERVER_URL,
 });

docker-compose.yml

@@ -24,20 +24,13 @@ services:
       - '8080:8080'
     environment:
       NODE_ENV: development
-      VITE_BASE_SERVER_URL_DEV: ${VITE_BASE_SERVER_URL_DEV}
-      VITE_BASE_SERVER_URL_PROD: ${VITE_BASE_SERVER_URL_PROD}
+      VITE_BASE_SERVER_URL: ${VITE_BASE_SERVER_URL}
       VITE_AUTH0_DOMAIN: ${VITE_AUTH0_DOMAIN}
       VITE_AUTH0_CLIENT_ID: ${VITE_AUTH0_CLIENT_ID}
       VITE_EMAIL_DOMAIN_NAME: ${VITE_EMAIL_DOMAIN_NAME}
-      BASE_SERVER_URL_DEV: ${BASE_SERVER_URL_DEV}
-      BASE_SERVER_URL_PROD: ${BASE_SERVER_URL_PROD}
-      SLACK_BOT_TOKEN_DEV: ${SLACK_BOT_TOKEN_DEV}
-      SLACK_BOT_TOKEN_PROD: ${SLACK_BOT_TOKEN_PROD}
-      CODEPOCKET_CHANNEL_ID_DEV: ${CODEPOCKET_CHANNEL_ID_DEV}
-      CODEPOCKET_CHANNEL_ID_PROD: ${CODEPOCKET_CHANNEL_ID_PROD}
-      CHAPTER_FRONTED_CHANNEL_ID_DEV: ${CHAPTER_FRONTED_CHANNEL_ID_DEV}
-      CHAPTER_FRONTED_CHANNEL_ID_PROD: ${CHAPTER_FRONTED_CHANNEL_ID_PROD}
-      MONGO_DB_URI_DEV: ${MONGO_DB_URI_DEV}
-      MONGO_DB_URI_PROD: ${MONGO_DB_URI_PROD}
-      MONGO_DB_NAME_DEV: ${MONGO_DB_NAME_DEV}
-      MONGO_DB_NAME_PROD: ${MONGO_DB_NAME_PROD}
+      SLACK_BOT_TOKEN: ${SLACK_BOT_TOKEN}
+      CODEPOCKET_CHANNEL_ID: ${CODEPOCKET_CHANNEL_ID}
+      CHAPTER_FRONTED_CHANNEL_ID: ${CHAPTER_FRONTED_CHANNEL_ID}
+      MONGO_DB_URI: ${MONGO_DB_URI}
+      MONGO_DB_NAME: ${MONGO_DB_NAME}
+      BASE_SERVER_URL: ${BASE_SERVER_URL}

server/src/utils/env.ts

@@ -1,19 +1,10 @@
-export const isDevelopment = () => process.env.NODE_ENV === 'development';
-
-const s = (dev: string | undefined, prod: string | undefined) => (isDevelopment() ? dev : prod);
 export const env = {
-  SELF_URL: s(process.env.BASE_SERVER_URL_DEV, process.env.BASE_SERVER_URL_PROD),
-  MONGO_DB_URI: s(process.env.MONGO_DB_URI_DEV, process.env.MONGO_DB_URI_PROD),
-  MONGO_DB_NAME: s(process.env.MONGO_DB_NAME_DEV, process.env.MONGO_DB_NAME_PROD),
-  SLACK_BOT_TOKEN: s(process.env.SLACK_BOT_TOKEN_DEV, process.env.SLACK_BOT_TOKEN_PROD),
-  CODEPOCKET_CHANNEL_ID: s(
-    process.env.CODEPOCKET_CHANNEL_ID_DEV,
-    process.env.CODEPOCKET_CHANNEL_ID_PROD,
-  ),
-  CHAPTER_FRONTED_CHANNEL_ID: s(
-    process.env.CHAPTER_FRONTED_CHANNEL_ID_DEV,
-    process.env.CHAPTER_FRONTED_CHANNEL_ID_PROD,
-  ),
+  SELF_URL: process.env.BASE_SERVER_URL,
+  MONGO_DB_URI: process.env.MONGO_DB_URI,
+  MONGO_DB_NAME: process.env.MONGO_DB_NAME,
+  SLACK_BOT_TOKEN: process.env.SLACK_BOT_TOKEN,
+  CODEPOCKET_CHANNEL_ID: process.env.CODEPOCKET_CHANNEL_ID,
+  CHAPTER_FRONTED_CHANNEL_ID: process.env.CHAPTER_FRONTED_CHANNEL_ID,
 } as const;
 
 export const checkSlackPossible =