04. 部署前端 Pages

这一章会部署这套模板里的 2 个前端：

• apps/web
• apps/admin

1. 先创建 2 个 Pages 项目

在仓库根目录执行：

npx wrangler pages project create web --production-branch main
npx wrangler pages project create admin --production-branch main

如果命令提示项目已存在，说明你之前创建过。

那就不用再创建一次。

2. 先部署 apps/web

在仓库根目录执行：

cd apps/web
pnpm build
npx wrangler pages deploy --project-name=web --branch=main
cd ../../

这一条命令为什么这样写

因为：

• apps/web/wrangler.toml 里已经写了 pages_build_output_dir = "./dist"
• 所以你不需要再额外手写 dist

apps/web 建议先设置的环境变量

进入 Cloudflare Dashboard：

• Workers & Pages
• web
• Settings
• Variables and Secrets

至少设置：

• APP_KEY=demo
• SITE_URL=https://你的前台域名

建议再补上：

• BLOG_API_URL=https://你的-blog-服务域名
• SITE_SERVICE_URL=https://你的-site-服务域名
• PAY_SERVICE_URL=https://你的-pay-服务域名
• AUTH_SERVICE_URL=https://你的-auth-服务域名
• CHECKIN_SERVICE_URL=https://你的-checkin-服务域名
• AI_SERVICE_URL=https://你的-ai-服务域名

说明：

• 生产环境下很多接口会优先走 service binding
• 但有些 SSR 页面和 fallback 逻辑会直接请求公网 URL
• 所以把这些变量补上最稳

3. 再部署 apps/admin

在仓库根目录执行：

cd apps/admin
pnpm build
npx wrangler pages deploy --project-name=admin --branch=main
cd ../../

apps/admin 当前是已经明确验证过的 Cloudflare Pages 路线：

• nitro.preset = "cloudflare-pages"
• 本地构建产物会输出到 apps/admin/dist

apps/admin 第一遍通常不用额外填环境变量

原因是：

• 它优先走 service binding
• apps/admin/wrangler.toml 已经把主要后端服务都绑上了

如果后来你要做特殊反向代理或自定义公网地址，再单独补变量。

4. 如果你看到 SESSION binding 警告

apps/web 在本地构建时，可能会出现类似提示：

Invalid binding `SESSION`

如果你真的遇到这个问题，处理方式是：

1. 创建一个 KV namespace
2. 进入对应 Pages 项目
3. 在 Settings -> Functions -> KV namespace bindings
4. 增加一个 binding，名字填 SESSION

5. 这一章结束前，你应该已经满足的条件

• web Pages 项目已经存在并成功部署
• admin Pages 项目已经存在并成功部署
• web 至少填了最关键的环境变量