mirror of
https://github.com/dreamhunter2333/cloudflare_temp_email.git
synced 2026-05-07 08:12:46 +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
@@ -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`.
|
||||
|
||||
|
||||
|
||||
### Backend - Cloudflare workers
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -50,25 +111,28 @@ const generate = async () => {
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
<div :class="$style.container">
|
||||
<input :class="$style.input" type="text" v-model="domain" placeholder="Please enter address"></input>
|
||||
<input :class="$style.input" type="text" v-model="domain" placeholder="Enter a backend API URL starting with https://"></input>
|
||||
<button :class="$style.button" @click="generate">Generate</button>
|
||||
<a v-if="downloadUrl" :href="downloadUrl" download="frontend.zip">{{ tip }}</a>
|
||||
</div>
|
||||
<p :class="$style.hint">Example: `https://temp-email-api.example.com`. Do not enter the frontend Pages domain and do not add a trailing `/`.</p>
|
||||
<p v-if="errorMessage" :class="$style.error">{{ errorMessage }}</p>
|
||||
|
||||
> [!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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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