Cloudflare Pages 前端

注意

下面几种方式选择一种即可

部署带有前端资源的 Worker

参考 部署 Worker

前后端分离部署

重要：SPA 模式

本项目是单页应用（SPA）。如果你通过 Cloudflare 控制台手动上传部署，必须在高级选项中将「未找到处理」设置为 Single-page application (SPA)，否则刷新页面或直接访问 /admin 等子路径时会返回 404。 通过 CLI（wrangler pages deploy）部署时会自动处理，无需额外配置。

第一次部署会提示创建项目, production 分支请填写 production

cd frontend
pnpm install
cp .env.example .env.prod

修改 .env.prod 文件

将 VITE_API_BASE 修改为上一步创建的 worker 的 url, 不要在末尾加 /

例如: VITE_API_BASE=https://xxx.xxx.workers.dev

可通过 VITE_DEFAULT_LANG 设置前端默认语言，支持 zh、en、es、pt-BR、ja、de，未配置或配置无效时使用 zh。

例如: VITE_DEFAULT_LANG=en

其他配置项请查看 前端变量说明。

pnpm build --emptyOutDir
# 第一次部署会提示创建项目, production 分支请填写 production
pnpm run deploy

部署完成之后你可以在 Cloudflare 控制台看到你的项目, 可以为 pages 配置自定义域名

通过 page functions 转发后端请求

从 page functions 转发请求到 worker 后端, 可以获取更快的响应速度

第一次部署会提示创建项目, production 分支请填写 production

如果你的 worker 后端 名称不为 cloudflare_temp_email 请修改 pages/wrangler.toml

如需设置默认语言，在 frontend/.env.pages.local 中添加 VITE_DEFAULT_LANG=en。同域请求不需要设置 VITE_API_BASE，其他配置项请查看 前端变量说明。

cd frontend
pnpm install
# 如果你要启用 Cloudflare Zero Trust, 需要使用 pnpm build:pages:nopwa 来禁用缓存
pnpm build:pages
cd ../pages
pnpm run deploy