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 不修它,但同源部署下该路径不再触发)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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