From 9689a1cbcae511452b700da14020269ffb8c485d Mon Sep 17 00:00:00 2001 From: Dream Hunter Date: Tue, 7 Apr 2026 23:59:31 +0800 Subject: [PATCH] docs: clarify Pages backend URL config (#960) * docs: clarify pages backend url setup * docs: refine pages and d1 examples * docs: harden pages zip generator --- vitepress-docs/docs/en/cli.md | 10 ++- .../docs/en/guide/actions/github-action.md | 10 ++- vitepress-docs/docs/en/guide/cli/d1.md | 11 ++- vitepress-docs/docs/en/guide/common-issues.md | 3 +- vitepress-docs/docs/en/guide/ui/pages.md | 90 +++++++++++++++++-- .../docs/zh/guide/actions/github-action.md | 10 ++- vitepress-docs/docs/zh/guide/cli/d1.md | 11 ++- vitepress-docs/docs/zh/guide/common-issues.md | 3 +- vitepress-docs/docs/zh/guide/ui/pages.md | 90 +++++++++++++++++-- 9 files changed, 200 insertions(+), 38 deletions(-) diff --git a/vitepress-docs/docs/en/cli.md b/vitepress-docs/docs/en/cli.md index 3f83cbb1..9f24fd4d 100644 --- a/vitepress-docs/docs/en/cli.md +++ b/vitepress-docs/docs/en/cli.md @@ -33,15 +33,17 @@ git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git ```bash # create a database, and copy the output to wrangler.toml in the next step -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 # schema update, if you have initialized the database before this date, you can execute this command to update -# 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 # create a namespace, and copy the output to wrangler.toml in the next step wrangler kv:namespace create DEV ``` +Use a project-specific D1 database name such as `temp-email-db` instead of a generic name like `dev`. + ![d1](/readme_assets/d1.png) ### Backend - Cloudflare workers diff --git a/vitepress-docs/docs/en/guide/actions/github-action.md b/vitepress-docs/docs/en/guide/actions/github-action.md index 3df915d2..b9acfaf2 100644 --- a/vitepress-docs/docs/en/guide/actions/github-action.md +++ b/vitepress-docs/docs/en/guide/actions/github-action.md @@ -14,7 +14,8 @@ The `worker.dev` domain is inaccessible in China, please use a custom domain - Fork this repository on GitHub - Open the `Actions` page of the repository - Find `Deploy Backend` and click `enable workflow` to enable the `workflow` -- If you need separate frontend and backend deployment, find `Deploy Frontend` and click `enable workflow` to enable the `workflow` +- If you need separate frontend and backend deployment that talks to Worker directly, find `Deploy Frontend` and click `enable workflow` to enable the `workflow` +- If you need Pages deployment with Page Functions forwarding backend requests, find `Deploy Frontend with page function` and click `enable workflow` to enable the `workflow` ### Configure Secrets @@ -43,17 +44,18 @@ Then go to the repository page `Settings` -> `Secrets and variables` -> `Actions | Name | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `FRONTEND_ENV` | Frontend configuration file, please copy the content from `frontend/.env.example`, [and modify according to this guide](/en/guide/cli/pages.html) | + | `FRONTEND_ENV` | Frontend configuration file used by the `Deploy Frontend` workflow. Copy the content from `frontend/.env.example`, [and modify it according to this guide](/en/guide/cli/pages.html). For separate frontend/backend deployment that talks to Worker directly, `VITE_API_BASE` should be the backend Worker API root URL, must start with `https://`, and must not include a trailing `/`. When this address is configured incorrectly, common symptoms are the `map` error or `405` API responses | | `FRONTEND_NAME` | The project name you created in Cloudflare Pages, can be created via [UI](https://temp-mail-docs.awsl.uk/en/guide/ui/pages.html) or [Command Line](https://temp-mail-docs.awsl.uk/en/guide/cli/pages.html) | | `FRONTEND_BRANCH` | (Optional) Branch for pages deployment, can be left unconfigured, defaults to `production` | - | `PAGE_TOML` | (Optional) Required when using page functions to forward backend requests. Please copy the content from `pages/wrangler.toml` and modify the `service` field to your worker backend name according to actual situation | + | `PAGE_TOML` | (Optional) Used only by the `Deploy Frontend with page function` workflow. Required when using page functions to forward backend requests. Please copy the content from `pages/wrangler.toml` and modify the `service` field to your worker backend name according to actual situation. This workflow builds the frontend in Pages mode and uses same-origin requests, so it does not read `FRONTEND_ENV` | | `TG_FRONTEND_NAME` | (Optional) The project name you created in Cloudflare Pages, same as `FRONTEND_NAME`. Fill this in if you need Telegram Mini App functionality | ### Deploy - Open the `Actions` page of the repository - Find `Deploy Backend` and click `Run workflow` to select a branch and deploy manually -- If you need separate frontend and backend deployment, find `Deploy Frontend` and click `Run workflow` to select a branch and deploy manually +- If you need separate frontend and backend deployment that talks to Worker directly, find `Deploy Frontend` and click `Run workflow` to select a branch and deploy manually +- If you need Pages deployment with Page Functions forwarding backend requests, find `Deploy Frontend with page function` and click `Run workflow` to deploy manually ## How to Configure Auto-Update diff --git a/vitepress-docs/docs/en/guide/cli/d1.md b/vitepress-docs/docs/en/guide/cli/d1.md index d55b9581..372d46cd 100644 --- a/vitepress-docs/docs/en/guide/cli/d1.md +++ b/vitepress-docs/docs/en/guide/cli/d1.md @@ -8,10 +8,13 @@ When executing the wrangler login command for the first time, you will be prompt cd worker cp wrangler.toml.template wrangler.toml # Create D1 and execute 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] +> Use a project-specific database name such as `temp-email-db` or `cloudflare-temp-email-prod` so it remains easy to identify later. Avoid generic names like `dev`. + After creation, you can see the D1 database in the Cloudflare console. ![D1](/readme_assets/d1.png) @@ -25,6 +28,6 @@ Find the `patch` file you need to execute and run it, for example: ```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 ``` diff --git a/vitepress-docs/docs/en/guide/common-issues.md b/vitepress-docs/docs/en/guide/common-issues.md index 4ea3af6c..0f0fda15 100644 --- a/vitepress-docs/docs/en/guide/common-issues.md +++ b/vitepress-docs/docs/en/guide/common-issues.md @@ -19,13 +19,14 @@ | `Subdomain cannot send emails` | [Reference](https://github.com/dreamhunter2333/cloudflare_temp_email/issues/515) | | `Failed to send verify code: No balance` | Set unlimited emails in admin console or increase quota on the sending permission page | | `Github OAuth unable to get email 400 Failed to get user email` | GitHub user needs to set email to public | -| `Cannot read properties of undefined (reading 'map')` | Worker variables not set successfully. Check that JSON-format variables like `DOMAINS` and `ADMIN_PASSWORDS` are configured correctly | +| `Cannot read properties of undefined (reading 'map')` during page initialization | First check whether `/open_api/settings` is returning valid data. In a direct Worker deployment, this usually means Worker variables were not configured correctly, so verify JSON-format variables such as `DOMAINS` and `ADMIN_PASSWORDS`. If this happens in a Pages deployment because requests are going to the wrong backend address, continue with the Pages troubleshooting section below | ## Pages Related | Issue | Solution | | --------------- | --------------------------------------------------------- | | `network error` | Use incognito mode or clear browser cache and DNS cache | +| Pages deployment shows the `map` error, or API requests such as `/admin/users` / `/admin/new_address` return `405 Method Not Allowed` | This is usually caused by an incorrect frontend backend address. Check `VITE_API_BASE`, the URL entered when generating the zip in the UI guide, or `FRONTEND_ENV`: for separate frontend/backend deployment talking directly to Worker, it should be the backend Worker API root URL, start with `https://`, and have no trailing `/`; if you use `PAGE_TOML` to proxy backend requests through Page Functions, `VITE_API_BASE` can be left empty to use same-origin requests. See [Pages Frontend Deployment](/en/guide/ui/pages) | | Refreshing page or directly visiting `/admin`, `/user` returns 404 | This project is a Single-Page Application (SPA). When deploying Pages via UI, set "Not Found handling" to `Single-page application (SPA)` in the advanced options. See [Pages Frontend Deployment](/en/guide/ui/pages) | ## Email Sending Related diff --git a/vitepress-docs/docs/en/guide/ui/pages.md b/vitepress-docs/docs/en/guide/ui/pages.md index 296b750a..0bd212c8 100644 --- a/vitepress-docs/docs/en/guide/ui/pages.md +++ b/vitepress-docs/docs/en/guide/ui/pages.md @@ -7,14 +7,67 @@ import JSZip from 'jszip'; const domain = ref("") const downloadUrl = ref("") const tip = ref("Download") +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 "Please enter a backend API URL starting with https://" + } + if (/\s/.test(normalizedValue)) { + return "The backend API URL must not contain whitespace characters" + } + if (!normalizedValue.startsWith("https://")) { + return "The backend API URL must start with https://" + } + if (normalizedValue.endsWith("/")) { + return "Do not add a trailing / to the backend API URL" + } + try { + const url = new URL(normalizedValue) + if (url.protocol !== "https:") { + return "The backend API URL must start with https://" + } + if (url.pathname !== "/" || url.search || url.hash) { + return "Please enter the backend API root URL only, without a path, query, or hash" + } + } catch { + return "The backend API URL format is invalid" + } + 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 = "Failed to download the frontend zip file. Please try again later" + 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 = "Generation failed"; - downloadUrl.value = ''; + errorMessage.value = "Could not find the frontend entry file. Generation failed" + 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 = "Download timed out. Please refresh the page and try again" + return + } + errorMessage.value = "Generation failed. Please refresh the page and try again" + } finally { + window.clearTimeout(timeoutId) } } @@ -50,25 +111,28 @@ const generate = async () => { ![pages](/ui_install/pages.png) -3. Enter the address of the deployed worker. The address should not include a trailing `/`. Click generate, and if successful, a download button will appear. You will get a zip package. +3. Enter the deployed worker address. It must be the backend API root URL, start with `https://`, and must not include a trailing `/`. Click generate, and if successful, a download button will appear. You will get a zip package. - The worker domain here is the backend API domain. For example, if I deployed at `https://temp-email-api.awsl.uk`, then fill in `https://temp-email-api.awsl.uk` - If your domain is `https://temp-email-api.xxx.workers.dev`, then fill in `https://temp-email-api.xxx.workers.dev` + - Do not enter your frontend `Pages` domain, and do not include paths like `/admin` or `/api`. Otherwise frontend requests will hit the wrong address and you may see `Cannot read properties of undefined (reading 'map')` or `405 Method Not Allowed` > [!warning] Note > The `worker.dev` domain is not accessible in China, please use a custom domain.
- + {{ tip }}
+

Example: `https://temp-email-api.example.com`. Do not enter the frontend Pages domain and do not add a trailing `/`.

+

{{ errorMessage }}

> [!NOTE] > You can also deploy manually. Download the zip from here: [frontend.zip](https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip) > > Modify the index-xxx.js file in the archive, where xx is a random string > - > Search for `https://temp-email-api.xxx.xxx` and replace it with your worker's domain, then deploy the new zip file + > Search for `https://temp-email-api.xxx.xxx` and replace it with your worker's backend API root URL, then deploy the new zip file. If you replace it with the frontend Pages domain, common symptoms are the `map` error or `405` responses from API requests 4. Select `Pages`, click `Create Pages`, modify the name, upload the downloaded zip package @@ -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; +} diff --git a/vitepress-docs/docs/zh/guide/actions/github-action.md b/vitepress-docs/docs/zh/guide/actions/github-action.md index 2c25b654..68256148 100644 --- a/vitepress-docs/docs/zh/guide/actions/github-action.md +++ b/vitepress-docs/docs/zh/guide/actions/github-action.md @@ -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` 手动部署 ## 如何配置自动更新 diff --git a/vitepress-docs/docs/zh/guide/cli/d1.md b/vitepress-docs/docs/zh/guide/cli/d1.md index faad396d..5f143669 100644 --- a/vitepress-docs/docs/zh/guide/cli/d1.md +++ b/vitepress-docs/docs/zh/guide/cli/d1.md @@ -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 数据库 ![D1](/readme_assets/d1.png) @@ -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 ``` diff --git a/vitepress-docs/docs/zh/guide/common-issues.md b/vitepress-docs/docs/zh/guide/common-issues.md index 85474124..38ab78dd 100644 --- a/vitepress-docs/docs/zh/guide/common-issues.md +++ b/vitepress-docs/docs/zh/guide/common-issues.md @@ -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) | ## 发送邮件相关 diff --git a/vitepress-docs/docs/zh/guide/ui/pages.md b/vitepress-docs/docs/zh/guide/ui/pages.md index 5ee3506b..71f7ee4f 100644 --- a/vitepress-docs/docs/zh/guide/ui/pages.md +++ b/vitepress-docs/docs/zh/guide/ui/pages.md @@ -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) } } @@ -50,25 +111,28 @@ const generate = async () => { ![pages](/ui_install/pages.png) -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` 域名在中国无法访问，请自定义域名
- + {{ tip }}
+

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

+

{{ errorMessage }}

> [!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; +}