使用 Vercel + Upstash Redis 部署 MoonTV 教程

由于 MoonTV 项目不再支持通过 Cloudflare Pages 进行部署,本教程使用 Vercel 结合 Upstash Redis 的方式来完成部署。这种方法功能上与原先的方式类似。

准备工作

在开始之前,请确保已经拥有以下账号:

  • 一个 GitHub 账号
  • 一个 Vercel 账号
  • 一个 Upstash 账号(如果需要使用数据库功能)

Vercel 部署 (localStorage 模式)

此方法使用浏览器的 localStorage 进行数据存储,无需外部数据库。

第一步:Fork 项目仓库

首先,需要将 MoonTV 的官方仓库 Fork 到自己的 GitHub 账号下。

  1. 访问 MoonTV 的 GitHub 仓库地址:https://github.com/luolehe/MoonTV

  2. 点击页面右上角的 Fork 按钮,将该项目复制到个人仓库中。

    Fork GitHub仓库

第二步:在 Vercel 中创建新项目

  1. 登录 Vercel,进入 Dashboard 仪表盘页面。

  2. 点击 Add New… -> Project

    Vercel添加新项目

  3. 在导入 Git 仓库页面,点击 Continue with GitHub

    从GitHub导入

  4. 如果 Vercel 请求授权,请点击授权按钮。然后,选择刚刚 Fork 的 MoonTV 仓库旁的 Import 按钮。

    导入MoonTV仓库

第三步:配置并部署项目

  1. 进入项目配置页面后,需要注意以下几点:

    • Project Name:项目名称不能包含大写字母,否则会导致部署失败。可以修改为 moontv 或其他全小写名称。
    • Environment Variables (环境变量):这是关键步骤。需要在这里设置登录密码。
      • Key 处输入 PASSWORD
      • Value 处输入要设置的登录密码(例如 123456)。
      • 注意:在复制粘贴变量名 PASSWORD 时,请确保其前后没有多余的空格。

    配置项目名称和环境变量

  2. 确认所有配置无误后,点击 Deploy 按钮开始部署。

  3. 等待部署完成。成功后,Vercel 会显示成功画面。

    部署成功

Upstash Redis 支持 (可选)

如果希望开启收藏、历史记录同步等功能,需要配置 Upstash Redis 数据库。

第一步:创建 Upstash Redis 数据库

  1. 登录 Upstash,进入 Redis 数据库管理页面。

  2. 点击 Create Database 创建一个新的数据库。

  3. 配置数据库:

    • Name: 数据库名称,可随意填写 (如 moontv)。
    • Primary Region: 选择一个地理位置较近的区域,例如 Oregon (US-West-2)
    • Plan: 选择 Free 免费套餐。
  4. 点击 Create 完成创建。

    创建Upstash数据库

第二步:在 Vercel 中添加 Redis 环境变量

  1. 在 Upstash 数据库详情页面,找到并复制以下两个值:

    • Endpoint (HTTPS) - 对应 UPSTASH_URL
    • Token (Read-Only Token) - 对应 UPSTASH_TOKEN

    复制Upstash的Endpoint和Token

  2. 回到 Vercel 的项目设置页面,选择 Settings -> Environment Variables

  3. 添加以下环境变量,并填入对应的值:

    • UPSTASH_URL: 粘贴 Upstash 的 Endpoint 值。
    • UPSTASH_TOKEN: 粘贴 Upstash 的 Token 值。
    • NEXT_PUBLIC_STORAGE_TYPE: 值固定为 upstash
    • USERNAME: 设置一个用于数据隔离的用户名,可自定义。

    再次强调:复制粘贴所有 Key 和 Value 时,请务必检查并删除前后的多余空格。

  4. 添加完成后,点击 Save 保存。

第三步:重新部署

Vercel 会检测到环境变量的变更,并提示需要重新部署。

  1. 点击页面下方出现的 Redeploy 按钮。

  2. 在弹出的窗口中再次点击 Redeploy

  3. 等待部署完成即可。

    重新部署Vercel项目

自定义域名 (可选)

部署成功后,Vercel 会提供一个 .vercel.app 后缀的默认域名。也可以绑定自己的域名。

  1. 在 Vercel 项目设置中,进入 Domains 标签页。

  2. 输入域名并点击 Add

  3. Vercel 会提供需要配置的 DNS 记录(通常是一条 CNAME 记录和一条 TXT 记录)。

  4. 前往域名注册商(如 Cloudflare)的 DNS 管理后台,添加 Vercel 提供的这两条记录。

  5. 等待 DNS 解析生效后,即可通过自定义域名访问 MoonTV。

    配置自定义域名DNS

至此,成功部署了 MoonTV 实例。