Skip to content

feat: 前端容器化并接入 docker-compose 部署 #185

Description

@huyanxius

问题

#162 合入的 docker-compose.yml 编排了 PostgreSQL、Redis、Backend 三个服务,前端不在其中。前端目前只有 Vercel 一条部署路径(frontend/vercel.json),服务器上没有前端产物,整套系统无法在一台机器上自包含地起起来。

连带一个问题:前端与后端一旦不同源,浏览器对非简单请求先发 CORS 预检,后端要维护来源白名单——#139 与仍开着的 #184 都出自这里。

目标

前端与既有三个服务同属一份 docker-compose.ymldocker 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=/apiVITE_* 是 Vite 的构建期变量,会被烘进产物,运行期注入环境变量无效;取相对路径后镜像不绑定具体域名,同一镜像可跨环境复用。

范围

改动:新增 frontend/Dockerfilefrontend/nginx.conffrontend/.dockerignoredocker-compose.yml 增加 frontend 服务(同 windup-netdepends_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 不修它,但同源部署下该路径不再触发)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions