前段时间介绍过通过LibreTV搭建影视平台的文章，今天再教你用零成本、零代码的方式，部署功能强大的影视聚合神器MoonTV！无需服务器的方法，全程只需点击鼠标，10分钟拥有专属影视站，支持多设备同步观看进度！

2025-07-28_202110.jpg

🔍 MoonTV的惊艳功能

MoonTV 不只是普通播放器，它拥有这些黑科技：

  • 多源聚合搜索：一次搜索即可获取数十个资源站的结果
  • 智能去广告：自动跳过视频中的切片广告（实验性功能）
  • 全平台支持：PWA技术实现移动端原生体验，支持安装到桌面
  • 观看进度同步：收藏记录+播放进度多设备同步
  • 豆瓣级详情页：完整展示剧集列表/演员/年份/简介
  • 自适应界面：桌面侧边栏+移动底部导航，完美适配各种设备
项目地址：https://github.com/senshinya/MoonTV

☁️ 为什么选择Cloudflare Pages？

  • 永久免费：每月10万次访问额度
  • 全球CDN加速：访问速度提升200%
  • 无需信用卡：完全零成本
  • 自动HTTPS：安全加密连接
  • 简单易用：图形化操作界面

🚀 五步部署教程

第一步：获取MoonTV源代码

  1. 打开项目页面：https://github.com/senshinya/MoonTV
  2. 点击右上角 Fork 按钮
  3. 在你的GitHub账号下生成副本仓库

第二步：进入Pages控制台

  1. 登录 Cloudflare控制台
  2. 在左侧菜单栏找到 "Workers 和 Pages" 并点击
  3. 点击顶部蓝色按钮 "创建应用程序"
  4. 选择 "Pages" 选项卡

第三步：连接GitHub仓库

  1. 点击 "连接到Git" 按钮
  2. 选择 GitHub 作为代码源
  3. 授权Cloudflare访问你的GitHub账号
  4. 在仓库列表中找到你fork的 MoonTV仓库（名称格式：你的用户名/MoonTV）
  5. 点击 "开始设置"

第四步：项目配置（关键步骤）

  1. 项目名称：输入自定义名称（如 my-moontv）
  2. 生产分支：保持 main
  3. 构建设置：
  • 框架预设：选择 "无"
  • 构建命令：复制粘贴：
pnpm install --frozen-lockfile && pnpm run pages:build
  • 构建输出目录：填写：
.vercel/output/static
  1. 展开 "环境变量（高级）" 但暂时不设置
  2. 点击 "保存并部署"

第五步：配置环境变量（部署完成后）

  1. 等待初始部署完成（约3分钟）
  2. 在项目概览页，点击顶部导航栏 "设置"
  3. 选择左侧 "函数" 菜单
  4. 找到 "兼容性标志" 区域：
  • 点击 "添加兼容性标志"
  • 输入：nodejs_compat
  • 点击 "保存"
  • 返回设置页，选择左侧 "环境变量"
  • 点击 "添加变量" 选择 "机密" 类型：
变量名称：PASSWORD
值：输入你的访问密码（建议10位以上混合密码）
  1. 点击 "保存"

第六步：触发重新部署

  1. 返回项目 "概览" 页
  2. 点击右上角 "重试部署" 按钮
  3. 等待部署完成（状态变为"生产部署"）

第七步：访问你的站点

  1. 在概览页找到 "生产部署" 区域
  2. 复制 "您的网站现已上线" 下方的链接（格式：xxx.pages.dev）
  3. 首次访问时输入你设置的PASSWORD密码
  4. 成功进入MoonTV主界面！

🌐 绑定自定义域名详细步骤

前置准备：

  1. 拥有一个域名（如 example.com）
  2. 域名已在Cloudflare管理（若不在需先添加站点）

操作流程：

  1. 在Pages项目页点击顶部 "自定义域"
  2. 点击 "设置自定义域"
  3. 输入你想要绑定的子域名（如 tv.example.com）
  4. 选择操作：
  • 情况1：域名已在Cloudflare
  • 系统自动添加DNS记录
  • 自动签发SSL证书
  • 等待几分钟生效
  • 情况2：域名不在Cloudflare
步骤一：到域名注册商（如阿里云）添加CNAME记录：
  主机记录：tv (或其他前缀)
  记录类型：CNAME
  记录值：xxx.pages.dev (你的Pages域名)
  TTL：600

步骤二：返回Cloudflare点击"验证"
步骤三：等待SSL证书自动签发（约5分钟左右）
  1. 验证成功提示：
✅ tv.example.com 现已激活
SSL状态：有效（绿色对勾）

高级设置：

  • 强制HTTPS：在"自定义域"设置中开启
  • 重定向规则：可设置www跳转（在"页面规则"中配置）
  • 缓存配置：建议保持默认的"缓存所有内容"

🎉 访问你的专属影视站

部署完成后，在浏览器中输入刚刚设置的域名访问视频网站页面。

打开后就能看到清爽的MoonTV界面：

  • 顶部搜索栏可查找影视资源
  • 左侧分类切换电影/电视剧/综艺
  • 点击任意影片即可播放

❓ 常见问题解答

Q：需要懂编程吗？
A：完全不需要！跟着教程点击按钮即可

Q：会被收费吗？
A：Cloudflare Pages免费额度完全够用（每月10万次访问）

Q：如何更新内容？
A：项目原作者更新后，在你fork的仓库点击 Sync fork 同步即可

Q：能自定义界面吗？
A：可以！在GitHub编辑 /src 目录下的Vue文件（需基础前端知识）

💡 进阶技巧

  1. 开启自动更新
    在构建部署设置中添加环境变量：
NODE_VERSION = 18
  1. 解决播放问题
    若遇播放错误，尝试在设置中切换「数据来源」

⚠️ 故障排除指南

问题现象解决方案
部署失败（构建错误）检查构建命令是否完整复制，特别注意空格
访问提示"需要密码"1. 确认已设置机密变量PASSWORD
2. 确保执行了"重试部署"
播放器加载失败在设置 > 函数中确认nodejs_compat已启用
域名解析错误检查DNS记录是否生效：dig tv.yourdomain.com +short
SSL证书问题在SSL/TLS设置中设为"完全"加密模式

📱 移动端优化设置

  1. 开启PWA功能：
  • 首次访问时浏览器会提示"添加到主屏幕"
  • 在设置中启用"离线缓存"功能
  1. 触控优化：
// 在config.json中添加
"touchConfig": {
  "swipeThreshold": 50,
  "doubleTapTimeout": 300
}
  1. 移动数据节省：
  • 在播放设置中开启"移动网络压缩"
  • 设置自动画质切换
💡 提示：部署完成后建议在GitHub仓库设置：
  1. 进入你的MoonTV仓库 > Settings > Actions > General
  2. 开启"Read and write permissions"
  3. 这将允许自动同步上游更新

结语

通过Cloudflare Pages，我们轻松实现了：
✅ 零成本部署影视网站
✅ 免服务器维护
✅ 全球CDN加速访问

现在就去创建你的专属影视库吧！如果遇到问题，欢迎在MoonTV的GitHub仓库提交Issue讨论。

项目地址：https://github.com/senshinya/MoonTV
Cloudflare Pages：https://pages.cloudflare.com