Feature/#147 깃허브 액션에 env 추가

.github/workflows/frontend-dev-CICD.yml

@@ -2,7 +2,7 @@ name: Dev CI/CD
 
 on:
   push:
-    branches: [ dev ]
+    branches: [dev]
 
 permissions:
   contents: read
@@ -11,7 +11,7 @@ jobs:
   build:
     runs-on:
       group: Default
-      labels: [ self-hosted, dev ]
+      labels: [self-hosted, dev]
     permissions:
       pull-requests: write
 
@@ -29,6 +29,8 @@ jobs:
 
       - name: Run build
         run: npm run build
+        env:
+          VITE_DOMAIN: ${{ secrets.VITE_DOMAIN_DEV }}
 
       - name: 빌드 파일
-        run: cp -rf ./dist ~/
+        run: cp -rf ./dist ~/

.github/workflows/frontend-prod-CICD.yml

@@ -2,7 +2,7 @@ name: Prod CI/CD
 
 on:
   push:
-    branches: [ prod ]
+    branches: [prod]
 
 permissions:
   contents: read
@@ -11,7 +11,7 @@ jobs:
   build:
     runs-on:
       group: Default
-      labels: [ self-hosted, dev ]
+      labels: [self-hosted, dev]
     permissions:
       pull-requests: write
 
@@ -29,12 +29,14 @@ jobs:
 
       - name: Run build
         run: npm run build
+        env:
+          VITE_DOMAIN: ${{ secrets.VITE_DOMAIN_PROD }}
 
       - name: Copy to Prod Server
         uses: appleboy/scp-action@master
         with:
           username: ${{ secrets.PROD_USER_NAME }}
           host: ${{ secrets.PROD_SERVER }}
           key: ${{ secrets.PROD_PEM_KEY }}
-          source: "./dist"
-          target: "~/"
+          source: './dist'
+          target: '~/'

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 *.sw?
 
 # env
-.env.development
+.env
+.env.development

src/axios/instances.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
 
-export const DOMAIN = 'dev.mafia-together.com';
+export const DOMAIN = import.meta.env.VITE_DOMAIN;
 export const BASE_URL = `https://${DOMAIN}/api`;
 
 export const axiosInstance = axios.create({

src/pages/Game.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { getChats, getGamesInfo, getMyJob } from '../axios/http';
-import { BASE_URL } from '../axios/instances';
+import { BASE_URL, DOMAIN } from '../axios/instances';
 import { gameRound, myJobState, roomInfoState } from '../recoil/roominfo/atom';
 import { ChatArray, ChatResponse, GameStatus, SkillResponse, WaitingRoomInfo } from '../type';
 import Day from './Day';
@@ -69,7 +69,7 @@ export default function Game() {
   // WebSocket
   const connect = () => {
     const socket = new StompJs.Client({
-      brokerURL: `wss://dev.mafia-together.com/api/stomp`,
+      brokerURL: `wss://${DOMAIN}/api/stomp`,
       reconnectDelay: 10000,
     });
 

src/pages/WaitingRoom.tsx

@@ -5,7 +5,6 @@ import { Toaster } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { getRoomsCode, startGame } from '../axios/http';
-import { DOMAIN } from '../axios/instances';
 import BigButton from '../components/button/BigButton';
 import { Loading } from '../components/etc/Loading';
 import AppContainerCSS from '../components/layout/AppContainerCSS';
@@ -71,7 +70,7 @@ export default function WaitingRoom({ waitingRoomInfoState }: PropsType) {
 
   const onShareLink = async () => {
     // 링크 공유s
-    const inviteLink = DOMAIN + '/#/participate?code=' + code;
+    const inviteLink = '/#/participate?code=' + code;
     const shareData = {
       url: inviteLink,
     };