# 使用cloudflare搭建临时域名邮箱网站

油管教程：[**https://www.youtube.com/watch?v=XR5TV4C3D5E**](https://www.youtube.com/watch?v=XR5TV4C3D5E)

仓库地址：[**https://github.com/zaunist/zmail**](https://github.com/zaunist/zmail)

在线体验：[**https://mail.mdzz.uk**](https://mail.mdzz.uk/)

#### 方式一：一键部署（推荐新手）

![Deploy to Cloudflare](https://camo.githubusercontent.com/dbfce91befb9e3595169aab72f1307a504559b7acc255ba911a0e170b927c485/68747470733a2f2f6465706c6f792e776f726b6572732e636c6f7564666c6172652e636f6d2f627574746f6e align="left")

#### 优点：

* 部署简单，一键完成
    
* 无需修改配置文件
    
* 适合快速体验
    

#### 缺点：

* 无法获得后续代码更新
    
* 需要手动绑定自定义域名
    

#### 部署步骤：

1. 点击上方 “Deploy to Cloudflare” 按钮
    
2. 按照页面提示连接您的 GitHub 账户
    
3. 填写应用名称和数据库名称
    
4. 在高级设置 -> 构建变量中设置：
    
    * `VITE_EMAIL_DOMAIN`: 您的域名列表，使用 ‘,’ 分割 (例如: mdzz.uk,zaunist.com)
        
5. 点击”创建和部署”
    
6. 部署完成后，在 Cloudflare Workers 控制面板中绑定自定义域名
    
7. 配置 Cloudflare Email 路由，将邮件转发到您的 Worker
    

#### 方式二：Fork 后自定义部署（推荐进阶用户）

#### 优点：

* 可以获得后续代码更新
    
* 完全自定义配置
    
* 更好的版本控制
    

#### 缺点：

* 需要手动修改配置文件
    
* 需要一定的技术基础
    
* 需要手动创建数据库
    

#### 部署步骤：

1. Fork 本项目到您的 GitHub 账户
    
2. 在 Cloudflare Dashboard 中创建一个 D1 数据库，记住数据库的 name 和 id
    
3. 修改根目录下的 `wrangler.toml` 文件：
    
    * 修改 `name` 为您的应用名称。（可选）
        
    * 修改 `routes` 中的自定义域名。（必须！默认的worker.dev域名在中国大陆无法访问）
        
    * 修改 `database_name` 和 `database_id` 为您的 D1 数据库信息。（必须！）
        
    * 修改 `VITE_EMAIL_DOMAIN` 为您的域名列表。（可选，只是方便网页上复制粘贴邮件地址使用，不设置也不影响接收邮件）
        
4. 在 Cloudflare Dashboard 中选择 “Workers & Pages”
    
5. 点击 “Create application” -> “Pages” -> “Connect to Git”
    
6. 选择您 Fork 的仓库
    
7. 配置构建设置（通常会自动检测）
    
8. 点击 “Save and Deploy”
    
9. 配置 Cloudflare Email 路由，将邮件转发到您的 Worker
    

### 配置邮件路由

无论选择哪种部署方式，都需要配置 Cloudflare Email 路由：

1. 在 Cloudflare 控制面板中找到您的域名
    
2. 进入 “Email” -> “Email Routing”
    
3. 启用 Email Routing
    
4. 添加路由规则：
    
    * 匹配类型：”Catch-all address”
        
    * 操作：”Send to a Worker”
        
    * 选择您部署的 Worker
        
5. 如果有多个域名，请为每个域名重复上述步骤
    

---

## 本地开发

### 开发

```plaintext
# 安装依赖
pnpm install

# 启动前端开发服务器
pnpm dev:frontend

# 启动后端开发服务器
pnpm dev:backend
```

### 部署

```plaintext
# 部署
pnpm run deploy
```

---

## 技术栈

### 前端

* **React** – 用户界面库
    
* **TypeScript** – 类型安全的JavaScript超集
    
* **Tailwind CSS** – 实用优先的CSS框架
    
* **Vite** – 现代前端构建工具
    

### 后端

* **Cloudflare Workers** – 边缘计算平台
    
* **Cloudflare D1** – 边缘SQL数据库
    
* **Cloudflare Email Workers** – 邮件处理服务