[Feature] FE API 요청 주소를 BE 서버 주소로 변경한다. (#364)

HoonDongKang · web-flow · commit eed93935909f · 2026-02-05T10:32:16.000+09:00
* feat: FE API 주소 추가

* feat: BE CORS  URL 추가

* feat: literal 내부에서 import 해오도록 수정

* fix: CORS 하나만 허용하도록 수정

* fix: 누락된 literal API 수정

* fix: Sentry 관련 로직들 주석 해제

* feat: Workflow FE 빌드 작업에 환경변수 추가

* feat: BE 서버로 전송
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -66,5 +66,8 @@ jobs:
           push: false
           build-args: |
             VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SOCKET_URL: ${{ secrets.VITE_SOCKET_URL }}
+            VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+            VITE_ENABLE_SENTRY: ${{ secrets.VITE_ENABLE_SENTRY }}
           tags: |
             ${{ env.REGISTRY }}/${{ steps.image_names.outputs.frontend_image }}:pr-${{ github.event.pull_request.number }}
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -52,6 +52,9 @@ jobs:
           push: true
           build-args: |
             VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SOCKET_URL: ${{ secrets.VITE_SOCKET_URL }}
+            VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+            VITE_ENABLE_SENTRY: ${{ secrets.VITE_ENABLE_SENTRY }}
           tags: |
             ${{ env.REGISTRY }}/${{ steps.image_names.outputs.frontend_image }}:latest
             ${{ env.REGISTRY }}/${{ steps.image_names.outputs.frontend_image }}:${{ github.sha }}
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -89,6 +89,9 @@ jobs:
           push: true
           build-args: |
             VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SOCKET_URL: ${{ secrets.VITE_SOCKET_URL }}
+            VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+            VITE_ENABLE_SENTRY: ${{ secrets.VITE_ENABLE_SENTRY }}
           tags: |
             ${{ env.REGISTRY }}/${{ steps.image_names.outputs.frontend_image }}:latest
             ${{ env.REGISTRY }}/${{ steps.image_names.outputs.frontend_image }}:${{ steps.set_version.outputs.version_tag }}
diff --git a/frontend/src/commons/apis/getBattleInfo.ts b/frontend/src/commons/apis/getBattleInfo.ts
@@ -31,7 +31,7 @@ function isBattleInfo(data: unknown): data is BattleInfo {
 
 const getBattleInfo = async (id: string) => {
   try {
-    const response = await fetch(`/api/battles/${id}/join`, {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/battles/${id}/join`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
diff --git a/frontend/src/commons/apis/getOAuthUser.ts b/frontend/src/commons/apis/getOAuthUser.ts
@@ -36,7 +36,7 @@ function isOAuthUserResponse(data: unknown): data is OAuthUserResponse {
 }
 
 const getOAuthUser = async (): Promise<AuthUser> => {
-  const response = await fetch('/api/auth/me', {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/me`, {
     method: 'GET',
     credentials: 'include'
   });
diff --git a/frontend/src/commons/apis/postGuestLogin.ts b/frontend/src/commons/apis/postGuestLogin.ts
@@ -15,7 +15,7 @@ function isGuestLoginResponse(data: unknown): data is GuestLoginResponse {
 }
 
 const fetchPostGuestLogin = async (battleId: string) => {
-  const response = await fetch(`/api/auth/guest/${battleId}`, {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/guest/${battleId}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
diff --git a/frontend/src/commons/apis/postLogout.ts b/frontend/src/commons/apis/postLogout.ts
@@ -12,7 +12,7 @@ function isLogoutResponse(data: unknown): data is LogoutResponse {
 }
 
 const logout = async () => {
-  const response = await fetch('/api/auth/logout', {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/logout`, {
     method: 'POST',
     credentials: 'include'
   });
diff --git a/frontend/src/commons/apis/postRefreshToken.ts b/frontend/src/commons/apis/postRefreshToken.ts
@@ -1,5 +1,5 @@
 const refreshToken = async (): Promise<void> => {
-  const response = await fetch('/api/auth/refresh', {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/refresh`, {
     method: 'POST',
     credentials: 'include'
   });
diff --git a/frontend/src/pages/battleCreatePage/api/createBattle.ts b/frontend/src/pages/battleCreatePage/api/createBattle.ts
@@ -2,7 +2,7 @@ import type { CreateBattleRequest, CreateBattleResponse } from './types';
 import { isCreateBattleResponse } from './types';
 
 const createBattle = async (battleData: CreateBattleRequest): Promise<CreateBattleResponse> => {
-  const response = await fetch('/api/battles', {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/battles`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
diff --git a/frontend/src/pages/battlePage/hooks/useBattleSocket.ts b/frontend/src/pages/battlePage/hooks/useBattleSocket.ts
@@ -31,7 +31,7 @@ export function useBattleSocket() {
 
     if (!userId || !battleId) return;
 
-    const newSocket = io(import.meta.env.VITE_API_URL, {
+    const newSocket = io(import.meta.env.VITE_SOCKET_URL, {
       transports: ['websocket'],
       auth: { userId },
       reconnection: true,
diff --git a/frontend/src/pages/battleResultPage/apis/getBattleResult.ts b/frontend/src/pages/battleResultPage/apis/getBattleResult.ts
@@ -3,7 +3,7 @@ import { isBattleResultApiResponse } from './types';
 
 export async function getBattleResult(battleId: string): Promise<BattleResultApiResponse> {
   try {
-    const response = await fetch(`/api/battles/${battleId}/result`);
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/battles/${battleId}/result`);
 
     if (!response.ok) {
       throw new Error('배틀 결과를 불러오는데 실패했습니다.');
diff --git a/frontend/src/pages/loginPage/api/loginWithGithub.ts b/frontend/src/pages/loginPage/api/loginWithGithub.ts
@@ -1,15 +1,14 @@
 export async function loginWithGitHub(): Promise<void> {
   try {
     const controller = new AbortController();
-
-    const response = await fetch('/api/auth/github', {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/github`, {
       method: 'GET',
       redirect: 'manual',
       signal: controller.signal
     });
 
     if (response.type === 'opaqueredirect' || response.ok || (response.status >= 300 && response.status < 400)) {
-      window.location.href = '/api/auth/github';
+      window.location.href = `${import.meta.env.VITE_API_URL}/api/auth/github`;
     } else {
       throw new Error('서버 응답이 올바르지 않습니다.');
     }
diff --git a/frontend/src/pages/loginPage/api/loginWithKakao.ts b/frontend/src/pages/loginPage/api/loginWithKakao.ts
@@ -1,15 +1,14 @@
 export async function loginWithKakao(): Promise<void> {
   try {
     const controller = new AbortController();
-
-    const response = await fetch('/api/auth/kakao', {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/kakao`, {
       method: 'GET',
       redirect: 'manual',
       signal: controller.signal
     });
 
     if (response.type === 'opaqueredirect' || response.ok || (response.status >= 300 && response.status < 400)) {
-      window.location.href = '/api/auth/kakao';
+      window.location.href = `${import.meta.env.VITE_API_URL}/api/auth/kakao`;
     } else {
       throw new Error('서버 응답이 올바르지 않습니다.');
     }
diff --git a/frontend/src/pages/mainPage/api/getClosedBattles.ts b/frontend/src/pages/mainPage/api/getClosedBattles.ts
@@ -1,7 +1,7 @@
 import { type GetBattleListParams, type BattleResultListResponse, isBattleResultListResponse } from './types';
 
 export async function getClosedBattles({ offset, limit }: GetBattleListParams): Promise<BattleResultListResponse> {
-  const res = await fetch(`/api/battles/closed?offset=${offset}&limit=${limit}`);
+  const res = await fetch(`${import.meta.env.VITE_API_URL}/api/battles/closed?offset=${offset}&limit=${limit}`);
 
   if (!res.ok) {
     throw new Error('배틀 목록을 불러오지 못했습니다.');
diff --git a/frontend/src/pages/mainPage/api/getOpenBattles.ts b/frontend/src/pages/mainPage/api/getOpenBattles.ts
@@ -1,7 +1,7 @@
 import { type GetBattleListParams, type BattleListResponse, isBattleListResponse } from './types';
 
 export async function getOpenBattles({ offset, limit }: GetBattleListParams): Promise<BattleListResponse> {
-  const res = await fetch(`/api/battles/open?offset=${offset}&limit=${limit}`);
+  const res = await fetch(`${import.meta.env.VITE_API_URL}/api/battles/open?offset=${offset}&limit=${limit}`);
 
   if (!res.ok) {
     throw new Error('배틀 목록을 불러오지 못했습니다.');
diff --git a/frontend/src/pages/nicknamePage/apis/updateOAuthNickname.ts b/frontend/src/pages/nicknamePage/apis/updateOAuthNickname.ts
@@ -5,7 +5,7 @@ interface OAuthUserResponse {
 }
 
 const updateOAuthNickname = async (nickname: string): Promise<void> => {
-  const response = await fetch('/api/auth/nickname', {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/nickname`, {
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json'

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ function isOAuthUserResponse(data: unknown): data is OAuthUserResponse {`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`const getOAuthUser = async (): Promise<AuthUser> => {`
`39`		`- const response = await fetch('/api/auth/me', {`
	`39`	+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/me`, {
`40`	`40`	`method: 'GET',`
`41`	`41`	`credentials: 'include'`
`42`	`42`	`});`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ function isGuestLoginResponse(data: unknown): data is GuestLoginResponse {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`const fetchPostGuestLogin = async (battleId: string) => {`
`18`		- const response = await fetch(`/api/auth/guest/${battleId}`, {
	`18`	+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/guest/${battleId}`, {
`19`	`19`	`method: 'POST',`
`20`	`20`	`headers: {`
`21`	`21`	`'Content-Type': 'application/json'`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ function isLogoutResponse(data: unknown): data is LogoutResponse {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`const logout = async () => {`
`15`		`- const response = await fetch('/api/auth/logout', {`
	`15`	+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/logout`, {
`16`	`16`	`method: 'POST',`
`17`	`17`	`credentials: 'include'`
`18`	`18`	`});`