问题
#162 合入的 docker-compose.yml 编排了 PostgreSQL、Redis、Backend 三个服务,前端不在其中。前端目前只有 Vercel 一条部署路径(frontend/vercel.json),服务器上没有前端产物,整套系统无法在一台机器上自包含地起起来。
连带一个问题:前端与后端一旦不同源,浏览器对非简单请求先发 CORS 预检,后端要维护来源白名单——#139 与仍开着的 #184 都出自这里。
目标
前端与既有三个服务同属一份 docker-compose.yml,docker compose up -d --build 之后经宿主机端口直接可访问,无额外手工步骤。前端请求与页面同源,部署形态本身不产生跨域。
方案
前端镜像多阶段构建:Node 阶段 npm ci && npm run build,nginx 阶段只携带 dist/。容器内 nginx 承担两件事——静态资源服务 + SPA fallback(try_files $uri /index.html,对齐 vercel.json 现有 rewrite,避免刷新深链 404);location /api/ 反代至内网 http://backend:8000/,末尾斜杠剥掉 /api 前缀,与后端挂在根路径的路由(/projects、/characters、/users)对齐。
构建期取 VITE_API_BASE_URL=/api。VITE_* 是 Vite 的构建期变量,会被烘进产物,运行期注入环境变量无效;取相对路径后镜像不绑定具体域名,同一镜像可跨环境复用。
范围
改动:新增 frontend/Dockerfile、frontend/nginx.conf、frontend/.dockerignore;docker-compose.yml 增加 frontend 服务(同 windup-net、depends_on: backend、健康检查、端口取自 .env);.env.example 增加前端端口变量;frontend/README.md 补部署说明。
明确排除:不改任何业务代码与 shared/api 实现(相对 base URL 现有 buildUrl 直接支持);不动 vercel.json,Vercel 预览链路保持可用;不引入 TLS / 证书 / 域名配置,宿主机已有反代的话由其接管;不改 frontend-ci.yml。
验收标准
docker compose up -d --build 后四个容器均 healthy
- 浏览器经宿主机前端端口可打开首页;直接访问
/projects 等子路由刷新不 404
- 前端接口请求与页面同源(DevTools Network 可核),后端无需为此配 CORS 来源
npm run test / npm run typecheck 不受影响
相关
Refs #162(现有 compose 编排)、Refs #184(CORS 预检;本 issue 不修它,但同源部署下该路径不再触发)
问题
#162 合入的
docker-compose.yml编排了 PostgreSQL、Redis、Backend 三个服务,前端不在其中。前端目前只有 Vercel 一条部署路径(frontend/vercel.json),服务器上没有前端产物,整套系统无法在一台机器上自包含地起起来。连带一个问题:前端与后端一旦不同源,浏览器对非简单请求先发 CORS 预检,后端要维护来源白名单——#139 与仍开着的 #184 都出自这里。
目标
前端与既有三个服务同属一份
docker-compose.yml,docker compose up -d --build之后经宿主机端口直接可访问,无额外手工步骤。前端请求与页面同源,部署形态本身不产生跨域。方案
前端镜像多阶段构建:Node 阶段
npm ci && npm run build,nginx 阶段只携带dist/。容器内 nginx 承担两件事——静态资源服务 + SPA fallback(try_files $uri /index.html,对齐vercel.json现有 rewrite,避免刷新深链 404);location /api/反代至内网http://backend:8000/,末尾斜杠剥掉/api前缀,与后端挂在根路径的路由(/projects、/characters、/users)对齐。构建期取
VITE_API_BASE_URL=/api。VITE_*是 Vite 的构建期变量,会被烘进产物,运行期注入环境变量无效;取相对路径后镜像不绑定具体域名,同一镜像可跨环境复用。范围
改动:新增
frontend/Dockerfile、frontend/nginx.conf、frontend/.dockerignore;docker-compose.yml增加 frontend 服务(同windup-net、depends_on: backend、健康检查、端口取自.env);.env.example增加前端端口变量;frontend/README.md补部署说明。明确排除:不改任何业务代码与
shared/api实现(相对 base URL 现有buildUrl直接支持);不动vercel.json,Vercel 预览链路保持可用;不引入 TLS / 证书 / 域名配置,宿主机已有反代的话由其接管;不改frontend-ci.yml。验收标准
docker compose up -d --build后四个容器均 healthy/projects等子路由刷新不 404npm run test/npm run typecheck不受影响相关
Refs #162(现有 compose 编排)、Refs #184(CORS 预检;本 issue 不修它,但同源部署下该路径不再触发)