feat: 환경 변수 및 Caddy 라우팅 설정 추가, 게임 API URL 템플릿 지원

2026-07-25 04:32:41 +00:00
parent 976602746c
commit 2824e5af13
11 changed files with 227 additions and 27 deletions
@@ -2,7 +2,6 @@
 <html lang="ko">
    <head>
        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Sammo HiDCHe - Game</title>
    </head>
@@ -7,6 +7,7 @@ declare module '*.vue' {
 }

 interface ImportMetaEnv {
+    readonly VITE_APP_BASE_PATH?: string;
    readonly VITE_GATEWAY_API_URL?: string;
    readonly VITE_GAME_API_URL?: string;
    readonly VITE_GAME_SSE_URL?: string;
@@ -1,17 +1,33 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import tailwindcss from '@tailwindcss/vite';
 import path from 'path';

+const normalizeBasePath = (value: string | undefined): string => {
+    const pathValue = (value ?? '/').trim();
+    if (!pathValue || pathValue === '/') {
+        return '/';
+    }
+    return `/${pathValue.replace(/^\/+|\/+$/g, '')}/`;
+};
+
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), tailwindcss()],
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src'),
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '');
+    return {
+        base: normalizeBasePath(env.VITE_APP_BASE_PATH),
+        plugins: [vue(), tailwindcss()],
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            },
        },
-    },
-    server: {
-        port: 3001,
-    },
+        server: {
+            host: '0.0.0.0',
+            port: 3001,
+        },
+        preview: {
+            host: '0.0.0.0',
+        },
+    };
 });
@@ -2,7 +2,6 @@
 <html lang="ko">
    <head>
        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>삼국지 모의전투 HiDCHe - Gateway</title>
    </head>
@@ -7,7 +7,11 @@ declare module '*.vue' {
 }

 interface ImportMetaEnv {
+    readonly VITE_APP_BASE_PATH?: string;
+    readonly VITE_GATEWAY_API_URL?: string;
+    readonly VITE_GAME_API_URL_TEMPLATE?: string;
    readonly VITE_GAME_WEB_URL?: string;
+    readonly VITE_GAME_WEB_URL_TEMPLATE?: string;
 }

 interface ImportMeta {
@@ -3,11 +3,18 @@ import type { appRouter } from '@sammo-ts/game-api';

 export type GameRouter = typeof appRouter;

-export const createGameTrpc = (port: number) => {
+const resolveProfileUrl = (template: string, profile: string): string =>
+    template.replaceAll('{profile}', encodeURIComponent(profile));
+
+export const createGameTrpc = (profile: string, port: number) => {
+    const urlTemplate = import.meta.env.VITE_GAME_API_URL_TEMPLATE;
+    const url = urlTemplate
+        ? resolveProfileUrl(urlTemplate, profile)
+        : `http://localhost:${port}/api/trpc`;
    return createTRPCProxyClient<GameRouter>({
        links: [
            httpBatchLink({
-                url: `http://localhost:${port}/api/trpc`, // 실제 환경에서는 도메인/경로 조정 필요
+                url,
            }),
        ],
    });
@@ -11,7 +11,7 @@ const getSessionToken = (): string | null => {
 export const trpc = createTRPCProxyClient<AppRouter>({
    links: [
        httpBatchLink({
-            url: '/api/trpc', // 실제 환경에 맞게 조정 필요
+            url: import.meta.env.VITE_GATEWAY_API_URL ?? '/api/trpc',
            headers() {
                const token = getSessionToken();
                return token ? { 'x-session-token': token } : {};
@@ -44,7 +44,7 @@ onMounted(async () => {
            if (profile.status !== 'RUNNING' && profile.status !== 'PREOPEN') {
                return;
            }
-            const gameTrpc = createGameTrpc(profile.apiPort);
+            const gameTrpc = createGameTrpc(profile.profile, profile.apiPort);
            const [infoResult, layoutResult, mapResult] = await Promise.allSettled([
                gameTrpc.lobby.info.query(),
                gameTrpc.public.getMapLayout.query(),
@@ -78,7 +78,11 @@ const handleLogout = async () => {
 };

 const resolveGameUrl = (path: string, profileName: string, gameToken: string): string | null => {
-    const baseUrl = import.meta.env.VITE_GAME_WEB_URL ?? '';
+    const profile = profileName.split(':', 1)[0] ?? profileName;
+    const baseUrl =
+        import.meta.env.VITE_GAME_WEB_URL ??
+        import.meta.env.VITE_GAME_WEB_URL_TEMPLATE?.replaceAll('{profile}', encodeURIComponent(profile)) ??
+        '';
    if (!baseUrl) {
        return null;
    }
@@ -1,17 +1,33 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import tailwindcss from '@tailwindcss/vite';
 import path from 'path';

+const normalizeBasePath = (value: string | undefined): string => {
+    const pathValue = (value ?? '/').trim();
+    if (!pathValue || pathValue === '/') {
+        return '/';
+    }
+    return `/${pathValue.replace(/^\/+|\/+$/g, '')}/`;
+};
+
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), tailwindcss()],
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src'),
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '');
+    return {
+        base: normalizeBasePath(env.VITE_APP_BASE_PATH),
+        plugins: [vue(), tailwindcss()],
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            },
        },
-    },
-    server: {
-        port: 3000,
-    },
+        server: {
+            host: '0.0.0.0',
+            port: 3000,
+        },
+        preview: {
+            host: '0.0.0.0',
+        },
+    };
 });
@@ -0,0 +1,97 @@
+# dev-sam-e2e Caddy 라우팅 계약
+
+`dev-sam-e2e.hided.net`은 URI prefix를 제거하지 않고 frontend/API upstream에
+전달한다. 따라서 Caddy matcher, frontend build base, 브라우저 API URL,
+backend listen path가 같은 prefix를 사용해야 한다.
+
+## Caddy 설정
+
+Caddy path matcher의 `/gateway`는 `/gateway/`나 `/gateway/api/trpc`를
+포함하지 않는다. 각 앱의 exact path는 trailing slash로 redirect하고 하위
+경로는 wildcard matcher로 받아야 한다. API matcher는 frontend matcher보다
+먼저 둔다.
+
+```caddyfile
+redir /gateway /gateway/ 308
+@gatewayApi path /gateway/api /gateway/api/*
+handle @gatewayApi {
+        reverse_proxy http://172.30.1.54:15001 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+handle /gateway/* {
+        reverse_proxy http://172.30.1.54:15000 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+
+redir /che /che/ 308
+@cheApi path /che/api /che/api/*
+handle @cheApi {
+        reverse_proxy http://172.30.1.54:15003 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+handle /che/* {
+        reverse_proxy http://172.30.1.54:15002 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+
+redir /hwe /hwe/ 308
+@hweApi path /hwe/api /hwe/api/*
+handle @hweApi {
+        reverse_proxy http://172.30.1.54:15015 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+handle /hwe/* {
+        reverse_proxy http://172.30.1.54:15014 {
+                header_up X-Real-IP {remote_host}
+                header_down -Strict-Transport-Security
+        }
+}
+```
+
+기존 `/image/*` handler는 앱 route 밖에 그대로 둔다. 위 블록은 URI를
+strip하지 않으므로 backend의 tRPC/SSE path도 public path 전체를 사용한다.
+
+## build/runtime 환경값
+
+| 프로세스 | 포트 | 필수 경로 환경값 |
+| --- | ---: | --- |
+| gateway frontend | 15000 | `VITE_APP_BASE_PATH=/gateway/`, `VITE_GATEWAY_API_URL=/gateway/api/trpc`, `VITE_GAME_API_URL_TEMPLATE=/{profile}/api/trpc`, `VITE_GAME_WEB_URL_TEMPLATE=/{profile}/` |
+| gateway API | 15001 | `GATEWAY_API_HOST=0.0.0.0`, `GATEWAY_API_PORT=15001`, `GATEWAY_TRPC_PATH=/gateway/api/trpc` |
+| che frontend | 15002 | `VITE_APP_BASE_PATH=/che/`, `VITE_GATEWAY_API_URL=/gateway/api/trpc`, `VITE_GAME_API_URL=/che/api/trpc`, `VITE_GAME_SSE_URL=/che/api/events`, `VITE_GAME_ASSET_URL=/image`, `VITE_GAME_PROFILE=che` |
+| che API | 15003 | `GAME_API_HOST=0.0.0.0`, `GAME_API_PORT=15003`, `GAME_TRPC_PATH=/che/api/trpc`, `GAME_API_EVENTS_PATH=/che/api/events`, `GAME_UPLOAD_PATH=/che/api/uploads`, `PROFILE=che` |
+| hwe frontend | 15014 | `VITE_APP_BASE_PATH=/hwe/`, `VITE_GATEWAY_API_URL=/gateway/api/trpc`, `VITE_GAME_API_URL=/hwe/api/trpc`, `VITE_GAME_SSE_URL=/hwe/api/events`, `VITE_GAME_ASSET_URL=/image`, `VITE_GAME_PROFILE=hwe` |
+| hwe API | 15015 | `GAME_API_HOST=0.0.0.0`, `GAME_API_PORT=15015`, `GAME_TRPC_PATH=/hwe/api/trpc`, `GAME_API_EVENTS_PATH=/hwe/api/events`, `GAME_UPLOAD_PATH=/hwe/api/uploads`, `PROFILE=hwe` |
+
+`VITE_*` 값은 frontend build-time 값이다. frontend 프로세스를 시작할 때만
+설정해서는 이미 생성된 bundle이 바뀌지 않는다. Caddy가 prefix를 보존하므로
+`handle_path`로 바꾸거나 upstream에서 다시 strip하면 위 backend path와
+불일치한다.
+
+## 앱을 구동하지 않는 검증
+
+다음 항목을 독립적으로 확인한다.
+
+1. Caddy config를 `caddy validate`/`caddy adapt`로 검증한다.
+2. 각 upstream 대신 요청 URI와 listen port를 돌려주는 mock HTTP server를
+   붙여 public path가 올바른 port로 전달되고 prefix가 보존되는지 확인한다.
+3. frontend를 임시 output directory에 build하고 `index.html`의 module/CSS
+   URL이 각각 `/gateway/`, `/che/`, `/hwe/`로 시작하는지 확인한다.
+4. bundle에서 외부 API/SSE URL과 `/image` asset base를 확인한다.
+
+저장소의 `tools/e2e-routing-check/Caddyfile`은 18080에서 public Caddy
+matcher를 재현하고, 19000번대 mock upstream이 선택된 service와 전달받은
+URI를 응답한다. core2026 프로세스나 DB/Redis 없이 matcher 우선순위와
+prefix 보존 여부를 반복 검증할 수 있다.
+
+이 검증은 proxy/build 계약을 확인하지만 실제 DB, Redis, 인증과 게임 동작을
+검증하지는 않는다.
@@ -0,0 +1,57 @@
+{
+	auto_https off
+	admin off
+}
+
+:18080 {
+	redir /gateway /gateway/ 308
+	@gatewayApi path /gateway/api /gateway/api/*
+	handle @gatewayApi {
+		reverse_proxy 127.0.0.1:19001
+	}
+	handle /gateway/* {
+		reverse_proxy 127.0.0.1:19000
+	}
+
+	redir /che /che/ 308
+	@cheApi path /che/api /che/api/*
+	handle @cheApi {
+		reverse_proxy 127.0.0.1:19003
+	}
+	handle /che/* {
+		reverse_proxy 127.0.0.1:19002
+	}
+
+	redir /hwe /hwe/ 308
+	@hweApi path /hwe/api /hwe/api/*
+	handle @hweApi {
+		reverse_proxy 127.0.0.1:19015
+	}
+	handle /hwe/* {
+		reverse_proxy 127.0.0.1:19014
+	}
+}
+
+:19000 {
+	respond "gateway-frontend {uri}"
+}
+
+:19001 {
+	respond "gateway-api {uri}"
+}
+
+:19002 {
+	respond "che-frontend {uri}"
+}
+
+:19003 {
+	respond "che-api {uri}"
+}
+
+:19014 {
+	respond "hwe-frontend {uri}"
+}
+
+:19015 {
+	respond "hwe-api {uri}"
+}