mirror of
https://github.com/dreamhunter2333/cloudflare_temp_email.git
synced 2026-07-08 22:12:07 +08:00
docs: clarify Pages backend URL config (#960)
* docs: clarify pages backend url setup * docs: refine pages and d1 examples * docs: harden pages zip generator
This commit is contained in:
Dream Hunter
@@ -14,7 +14,8 @@
|
||||
- 在 GitHub fork 本仓库
|
||||
- 打开仓库的 `Actions` 页面
|
||||
- 找到 `Deploy Backend` 点击 `enable workflow` 启用 `workflow`
|
||||
- 如果需要前后端分离部署, 找到`Deploy Frontend` 点击 `enable workflow` 启用 `workflow`
|
||||
- 如果需要前后端分离并直连 Worker, 找到 `Deploy Frontend` 点击 `enable workflow` 启用 `workflow`
|
||||
- 如果需要通过 Page Functions 转发后端请求的 Pages 部署, 找到 `Deploy Frontend with page function` 点击 `enable workflow` 启用 `workflow`
|
||||
|
||||
### 配置 Secrets
|
||||
|
||||
@@ -43,17 +44,18 @@
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `FRONTEND_ENV` | 前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html) |
|
||||
| `FRONTEND_ENV` | `Deploy Frontend` workflow 使用的前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html)。如果是前后端分离直连 Worker，`VITE_API_BASE` 应填写后端 Worker API 根地址，并且以 `https://` 开头、末尾不要带 `/`。地址配置错误时，常见现象是前端报 `map` 错误或接口返回 `405` |
|
||||
| `FRONTEND_NAME` | 你在 Cloudflare Pages 创建的项目名称，可通过 [用户界面](https://temp-mail-docs.awsl.uk/zh/guide/ui/pages.html) 或者 [命令行](https://temp-mail-docs.awsl.uk/zh/guide/cli/pages.html) 创建 |
|
||||
| `FRONTEND_BRANCH` | (可选) pages 部署的分支，可不配置，默认 `production` |
|
||||
| `PAGE_TOML` | (可选) 使用 page functions 转发后端请求时需要配置，请复制 `pages/wrangler.toml` 的内容，并根据实际情况修改 `service` 字段为你的 worker 后端名称 |
|
||||
| `PAGE_TOML` | (可选) 仅供 `Deploy Frontend with page function` workflow 使用。通过 page functions 转发后端请求时需要配置，请复制 `pages/wrangler.toml` 的内容，并根据实际情况修改 `service` 字段为你的 worker 后端名称。这个 workflow 会以 Pages 模式构建前端并走同域请求，因此不会读取 `FRONTEND_ENV` |
|
||||
| `TG_FRONTEND_NAME` | (可选) 你在 Cloudflare Pages 创建的项目名称，同 `FRONTEND_NAME`，如果需要 Telegram Mini App 功能，请填写 |
|
||||
|
||||
### 部署
|
||||
|
||||
- 打开仓库的 `Actions` 页面
|
||||
- 找到 `Deploy Backend` 点击 `Run workflow` 选择分支手动部署
|
||||
- 如果需要前后端分离部署, 找到 `Deploy Frontend`, 点击 `Run workflow` 选择分支手动部署
|
||||
- 如果需要前后端分离并直连 Worker, 找到 `Deploy Frontend`，点击 `Run workflow` 选择分支手动部署
|
||||
- 如果需要通过 Page Functions 转发后端请求的 Pages 部署, 找到 `Deploy Frontend with page function`，点击 `Run workflow` 手动部署
|
||||
|
||||
## 如何配置自动更新
|
||||
|
||||
|
||||
@@ -8,10 +8,13 @@
|
||||
cd worker
|
||||
cp wrangler.toml.template wrangler.toml
|
||||
# 创建 D1 并执行 schema.sql
|
||||
wrangler d1 create dev
|
||||
wrangler d1 execute dev --file=../db/schema.sql --remote
|
||||
wrangler d1 create temp-email-db
|
||||
wrangler d1 execute temp-email-db --file=../db/schema.sql --remote
|
||||
```
|
||||
|
||||
> [!tip] 命名建议
|
||||
> 数据库名称建议使用和项目相关、方便识别的名字，例如 `temp-email-db`、`cloudflare-temp-email-prod`，不要继续使用过于宽泛的 `dev`。
|
||||
|
||||
创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
|
||||
|
||||
|
||||
@@ -25,6 +28,6 @@ wrangler d1 execute dev --file=../db/schema.sql --remote
|
||||
|
||||
```bash
|
||||
cd worker
|
||||
wrangler d1 execute dev --file=../db/2024-01-13-patch.sql --remote
|
||||
wrangler d1 execute dev --file=../db/2024-04-03-patch.sql --remote
|
||||
wrangler d1 execute temp-email-db --file=../db/2024-01-13-patch.sql --remote
|
||||
wrangler d1 execute temp-email-db --file=../db/2024-04-03-patch.sql --remote
|
||||
```
|
||||
|
||||
@@ -19,13 +19,14 @@
|
||||
| `二级域名无法发送邮件` | [参考](https://github.com/dreamhunter2333/cloudflare_temp_email/issues/515) |
|
||||
| `Failed to send verify code: No balance` | admin 后台设置无限制邮件或者发件权限页面增加额度 |
|
||||
| `Github OAuth无法获取到邮箱 400 Failed to get user email` | 需要 github 用户设置公开邮箱 |
|
||||
| `Cannot read properties of undefined (reading 'map')` | worker 变量没有设置成功，请检查 `DOMAINS`、`ADMIN_PASSWORDS` 等 JSON 格式变量是否正确配置 |
|
||||
| 页面初始化时报 `Cannot read properties of undefined (reading 'map')` | 先看 `/open_api/settings` 返回是否正常。如果是 Worker 直连部署，通常是 worker 变量没有设置成功，请检查 `DOMAINS`、`ADMIN_PASSWORDS` 等 JSON 格式变量是否正确配置；如果是 Pages 前端部署并且请求打到了错误地址，则继续看下方 Pages 相关排障 |
|
||||
|
||||
## Pages 相关
|
||||
|
||||
| 问题 | 解决方案 |
|
||||
| --------------- | ---------------------------------------- |
|
||||
| `network error` | 使用无痕模式或者清空浏览器缓存，DNS 缓存 |
|
||||
| Pages 部署后页面报 `map` 错误，或 `/admin/users`、`/admin/new_address` 等接口返回 `405 Method Not Allowed` | 通常是前端后端地址配置错误。请检查 `VITE_API_BASE`、UI 页面生成 zip 时填写的地址或 `FRONTEND_ENV`：前后端分离直连 Worker 时，应填写后端 Worker API 根地址，并且以 `https://` 开头、末尾不要带 `/`；如果使用 `PAGE_TOML` 通过 Page Functions 反代后端，则可保持 `VITE_API_BASE` 为空走同域请求。详见 [Pages 前端部署](/zh/guide/ui/pages) |
|
||||
| 刷新页面或直接访问 `/admin`、`/user` 返回 404 | 本项目是单页应用（SPA），通过 UI 部署 Pages 时需要在高级选项中将「未找到处理」设置为 `Single-page application (SPA)`。详见 [Pages 前端部署](/zh/guide/ui/pages) |
|
||||
|
||||
## 发送邮件相关
|
||||
|
||||
@@ -7,14 +7,67 @@ import JSZip from 'jszip';
|
||||
const domain = ref("")
|
||||
const downloadUrl = ref("")
|
||||
const tip = ref("下载")
|
||||
const errorMessage = ref("")
|
||||
|
||||
const resetDownloadUrl = () => {
|
||||
if (!downloadUrl.value) {
|
||||
return
|
||||
}
|
||||
window.URL.revokeObjectURL(downloadUrl.value)
|
||||
downloadUrl.value = ""
|
||||
}
|
||||
|
||||
const validateDomain = (value) => {
|
||||
const normalizedValue = value.trim()
|
||||
if (!normalizedValue) {
|
||||
return "请输入以 https:// 开头的后端 API 地址"
|
||||
}
|
||||
if (/\s/.test(normalizedValue)) {
|
||||
return "后端 API 地址不能包含空白字符"
|
||||
}
|
||||
if (!normalizedValue.startsWith("https://")) {
|
||||
return "后端 API 地址必须以 https:// 开头"
|
||||
}
|
||||
if (normalizedValue.endsWith("/")) {
|
||||
return "后端 API 地址末尾不要带 /"
|
||||
}
|
||||
try {
|
||||
const url = new URL(normalizedValue)
|
||||
if (url.protocol !== "https:") {
|
||||
return "后端 API 地址必须以 https:// 开头"
|
||||
}
|
||||
if (url.pathname !== "/" || url.search || url.hash) {
|
||||
return "请填写后端 API 根地址，不要带路径、参数或锚点"
|
||||
}
|
||||
} catch {
|
||||
return "后端 API 地址格式不正确"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
const generate = async () => {
|
||||
const normalizedDomain = domain.value.trim()
|
||||
const validationError = validateDomain(normalizedDomain)
|
||||
errorMessage.value = validationError
|
||||
resetDownloadUrl()
|
||||
if (validationError) {
|
||||
return
|
||||
}
|
||||
domain.value = normalizedDomain
|
||||
let timeoutId = 0
|
||||
try {
|
||||
const response = await fetch("/ui_install/frontend.zip");
|
||||
const controller = new AbortController()
|
||||
timeoutId = window.setTimeout(() => controller.abort(), 10000)
|
||||
const response = await fetch("/ui_install/frontend.zip", {
|
||||
signal: controller.signal
|
||||
});
|
||||
if (!response.ok) {
|
||||
errorMessage.value = "下载前端压缩包失败，请稍后重试"
|
||||
return
|
||||
}
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
var zip = new JSZip();
|
||||
await zip.loadAsync(arrayBuffer);
|
||||
let target_content = ""
|
||||
let target_path = ""
|
||||
const directory = zip.folder("assets");
|
||||
if (directory) {
|
||||
@@ -22,7 +75,7 @@ const generate = async () => {
|
||||
console.log(relativePath);
|
||||
if (relativePath.startsWith("assets/index-") && relativePath.endsWith(".js")){
|
||||
let content = await zipEntry.async("string");
|
||||
content = content.replace("https://temp-email-api.xxx.xxx", domain.value);
|
||||
content = content.replaceAll("https://temp-email-api.xxx.xxx", normalizedDomain);
|
||||
target_path = relativePath;
|
||||
zip.file(relativePath, content);
|
||||
break;
|
||||
@@ -30,14 +83,22 @@ const generate = async () => {
|
||||
}
|
||||
}
|
||||
if (!target_path) {
|
||||
tip.value = "生成失败";
|
||||
downloadUrl.value = '';
|
||||
errorMessage.value = "没有找到前端入口文件，生成失败"
|
||||
return
|
||||
}
|
||||
const blob = await zip.generateAsync({ type: "blob" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
errorMessage.value = ""
|
||||
downloadUrl.value = url;
|
||||
} catch (error) {
|
||||
console.error("Error: ", error);
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
errorMessage.value = "下载超时，请刷新页面后重试"
|
||||
return
|
||||
}
|
||||
errorMessage.value = "生成失败，请刷新页面后重试"
|
||||
} finally {
|
||||
window.clearTimeout(timeoutId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -50,25 +111,28 @@ const generate = async () => {
|
||||
|
||||
|
||||
|
||||
3. 输入部署的 worker 的地址, 地址不要带 `/`，点击生成，成功会出现下载按钮，你会得到一个 zip 包
|
||||
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`
|
||||
|
||||
> [!warning] 注意
|
||||
> `worker.dev` 域名在中国无法访问，请自定义域名
|
||||
|
||||
<div :class="$style.container">
|
||||
<input :class="$style.input" type="text" v-model="domain" placeholder="请输入地址"></input>
|
||||
<input :class="$style.input" type="text" v-model="domain" placeholder="请输入以 https:// 开头的后端 API 地址"></input>
|
||||
<button :class="$style.button" @click="generate">生成</button>
|
||||
<a v-if="downloadUrl" :href="downloadUrl" download="frontend.zip">{{ tip }}</a>
|
||||
</div>
|
||||
<p :class="$style.hint">示例：`https://temp-email-api.example.com`，不要填写前端 Pages 域名，也不要带结尾 `/`。</p>
|
||||
<p v-if="errorMessage" :class="$style.error">{{ errorMessage }}</p>
|
||||
|
||||
> [!NOTE]
|
||||
> 你也可以手动部署，从这里下载 zip, [frontend.zip](https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip)
|
||||
>
|
||||
> 修改压缩包里面的 index-xxx.js 文件 ，xx 是随机的字符串
|
||||
>
|
||||
> 搜索 `https://temp-email-api.xxx.xxx` ，替换成你worker 的域名，然后部署新的zip文件
|
||||
> 搜索 `https://temp-email-api.xxx.xxx` ，替换成你 worker 的后端 API 根地址，然后部署新的 zip 文件。如果填成前端 Pages 域名，常见现象就是页面报 `map` 错误或接口返回 `405`
|
||||
|
||||
4. 选择 `Pages`，点击 `Create Pages`, 修改名称，上传下载的 zip 包
|
||||
|
||||
@@ -108,4 +172,14 @@ const generate = async () => {
|
||||
.button:hover {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 8px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-top: 8px;
|
||||
color: #d03050;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user