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

Posted on Updated on

油管教程：https://www.youtube.com/watch?v=XR5TV4C3D5E

仓库地址：https://github.com/zaunist/zmail

在线体验：https://mail.mdzz.uk

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

Deploy to Cloudflare

优点：

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

缺点：

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

部署步骤：

  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. 如果有多个域名，请为每个域名重复上述步骤

本地开发

开发

# 安装依赖
pnpm install

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

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

部署

# 部署
pnpm run deploy

技术栈

前端

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

后端

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