Cloudflare Pages 部署前端

前端基于 React + Vite，构建后为静态文件（SPA），推荐使用 Cloudflare Pages 部署。

前置条件

1. 创建 Pages 项目

  1. 登录 Cloudflare Dashboard → Workers & Pages → Create
  2. 选择 Pages → Connect to Git
  3. 选择你的 GitHub 仓库

2. 构建配置

由于项目是 monorepo 结构，需要注意配置：

配置项值
构建命令npm ci && npm run build --workspace=console
输出目录console/dist
根目录/（保持默认）
Node.js 版本22

设置 Node.js 版本：在 Environment variables 中添加 NODE_VERSION = 22

3. 环境变量

在 Cloudflare Pages → Settings → Environment variables 中添加前端需要的环境变量：

PUBLIC_BACK_END=https://api.yourdomain.com
PUBLIC_CONSOLE_URL=https://console.yourdomain.com
...

前端环境变量必须以 PUBLIC_ 开头才能在代码中访问，与后端共用同一份 .env 文件。

4. 自定义域名

  1. Pages 项目 → Custom domains → Set up a custom domain
  2. 输入域名，如 console.yourdomain.com
  3. Cloudflare 会自动添加 DNS 记录并申请 SSL 证书

部署触发

5. SPA 路由处理（Pages 方式部署时需要）

如果使用 Pages 方式部署（非 Workers），需要在 console/public/ 目录下创建 _redirects 文件：

/*  /index.html  200

如果使用 Workers 方式部署（wrangler deploy），wrangler.jsonc 中已配置 not_found_handling: "single-page-application"，无需此文件。

注意事项