Cloudflare Pages 前端

1. 点击 Compute (Workers) -> Workers & Pages -> Create

   

2. 选择 Pages，选择 Use direct upload

   

3. 输入部署的 worker 地址，必须填写后端 API 根地址，并且以 https:// 开头，地址不要带 /，点击生成，成功会出现下载按钮，你会得到一个 zip 包

   • 此处 worker 域名为后端 api 的域名，比如我部署在 https://temp-email-api.awsl.uk，则填写 https://temp-email-api.awsl.uk
   • 如果你的域名是 https://temp-email-api.xxx.workers.dev，则填写 https://temp-email-api.xxx.workers.dev
   • 不要填写前端 Pages 自己的域名，也不要带 /admin、/api 等路径，否则前端请求会打到错误地址，可能出现 Cannot read properties of undefined (reading 'map') 或 405 Method Not Allowed

   注意

   worker.dev 域名在中国无法访问，请自定义域名

   示例：`https://temp-email-api.example.com`，不要填写前端 Pages 域名，也不要带结尾 `/`。

   NOTE

   你也可以手动部署，从这里下载 zip, frontend.zip

   修改压缩包里面的 index-xxx.js 文件 ，xx 是随机的字符串

   搜索 https://temp-email-api.xxx.xxx ，替换成你 worker 的后端 API 根地址，然后部署新的 zip 文件。如果填成前端 Pages 域名，常见现象就是页面报 map 错误或接口返回 405

4. 选择 Pages，点击 Create Pages, 修改名称，上传下载的 zip 包

   重要：SPA 模式

   本项目是单页应用（SPA），必须在部署时展开高级选项，将「未找到处理」设置为 Single-page application (SPA)。 否则刷新页面或直接访问 /admin 等子路径时会返回 404。

   

   然后点击 Deploy

   

5. 打开 刚刚部署的 Pages，点击 Custom Domain 这里可以添加自己的域名，你也可以使用自动生成的 *.pages.dev 的域名。能打开域名说明部署成功。