当前位置: 首页 > web >正文

在 Cloudflare 平台上完整部署 GitHub 项目 MoonTV 实现免费追剧流程

🎬 MoonTV 是一个开箱即用的、跨平台的影视聚合播放器。它基于 Next.js 14 + Tailwind CSS + TypeScript 构建,支持多资源搜索、在线播放、收藏同步、播放记录、本地/云端存储,让你可以随时随地畅享海量免费影视内容。
仓库地址:https://github.com/senshinya/MoonTV

图片2-MoonTV 一个开箱即用的、跨平台的影视聚合播放器! 完全免费开源-零度博客

✨ 功能特性

  • 🔍 多源聚合搜索:内置数十个免费资源站点,一次搜索立刻返回全源结果。
  • 📄 丰富详情页:支持剧集列表、演员、年份、简介等完整信息展示。
  • ▶️ 流畅在线播放:集成 HLS.js & ArtPlayer。
  • ❤️ 收藏 + 继续观看:支持 Redis/D1 存储,多端同步进度。
  • 📱 PWA:离线缓存、安装到桌面/主屏,移动端原生体验。
  • 🌗 响应式布局:桌面侧边栏 + 移动底部导航,自适应各种屏幕尺寸。
  • 🚀 极简部署:一条 Docker 命令即可将完整服务跑起来,或免费部署到 Vercel 和 Cloudflare。
  • 👿 智能去广告:自动跳过视频中的切片广告(实验性)

1. Fork 仓库并同步主仓库

  1. 登录 GitHub 后访问 MoonTV 官方仓库 → 点击 Fork 到你的账号下。
    在这里插入图片描述

  2. 若官方有更新,可在你 fork 的仓库页面使用 Sync fork 功能保持同步(GXNAS博客)。
    在这里插入图片描述


2. 在 Cloudflare Pages 上创建部署项目

  1. 登录 Cloudflare 控制台 → 转至 Pages → Create project
    在这里插入图片描述

  2. 选择你 fork 后的 GitHub 仓库作为项目源。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 设置构建命令为:

    pnpm install --frozen-lockfile && pnpm run pages:build
    

    框架选择 “None”,构建输出目录设置为:

    .vercel/output/static
    

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 首次部署成功后需要进入设置,将兼容性标志设置为 nodejs_compat,并新增 PASSWORD 密钥(变量和机密下),而后重试部署。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

如果不设置密码,会有如下提醒,所以还是设置一下密码
在这里插入图片描述


4. 外网访问

根据以上步骤部署完成后就可以通过生成的免费域名反问了,不过这个域名很可能被墙。
在这里插入图片描述

5. 设置自定义域名实现国内访问

  1. 点击自定义域–>设置自定义域。
    在这里插入图片描述
  2. 这里设置托管在Cloudflare上的域名,可以参考这里获取和托管域名:https://blog.csdn.net/loutengyuan/article/details/149096491?spm=1011.2415.3001.5331
  3. 设置好域名后点击激活域,几分钟后就可以访问了。
    在这里插入图片描述

6. 可选:使用 Cloudflare D1 数据库实现跨设备数据同步

启用 D1 支持后,MoonTV 可以把播放记录、收藏等存储在数据库中,而非仅本地浏览器。

  1. 在 Cloudflare 控制台 -> Storage & Databases → D1,创建一个新数据库。

  2. 执行自由 ID 初始化脚本(通常在 README 或项目文件夹中的 D1初始化.md)来创建表结构和初始化数据(GitHub)。

  3. 添加环境变量:

    NEXT_PUBLIC_STORAGE_TYPE = d1
    USERNAME = <管理员用户名>
    PASSWORD = <管理员密码>
    
  4. 重新部署完成后,即可访问 /admin 页面管理用户,并开启注册功能或停用注册(GitHub, GXNAS博客)。


7. 后续维护与更新同步

  • 在 GitHub 中开启 .github/workflows/sync.yml 自动同步 upstream 更新。
  • 使用 GitHub「Sync fork」功能手动同步主仓库。
  • 每次同步后都需要重新构建部署。
  • 可通过 config.json 自定义更多站点设置,例如公告、站点名称、搜索页数等变量(GitHub)。

小贴士 / 注意点

  • 构建输出目录 .vercel/output/static 即使用于 Cloudflare Pages 也不要修改。
  • 构建命令需要使用 pnpm 环境;如你截图中使用 npm 或 yarn,也可以替换为对应命令。
  • 若页面无法刷新内容,可能是 Cloudflare EdgeOne 与 MoonTV 不兼容的问题,建议优先采用 Pages + nodejs_compat 标志部署(GitHub, GitHub)。
  • OrionTV 可作为电视端客户端使用,MoonTV 可作为其后端数据源功能,可后续扩展此支持(老E的博客)。
  • 如果你截图中展示了 config.json 的具体字段(如 Douban 代理、搜索页数等),请将其直接加入 Fork 仓库后同步至云端部署。

http://www.xdnf.cn/news/16734.html

相关文章:

  • 广泛分布于内侧内嗅皮层全层的速度细胞(speed cells)对NLP中的深层语义分析的积极影响和启示
  • 基于springboot/java/VUE的旅游管理系统/旅游网站的设计与实现
  • 枚举中间位置高级篇
  • UE5 打包Windows平台时无法找到SDK的解决方法
  • 远程Qt Creator中文输入解决方案
  • Flex布局面试常考的场景题目
  • python中的 @dataclass
  • 第4章唯一ID生成器——4.5 美团点评开源方案Leaf
  • 【22】C# 窗体应用WinForm ——定时器Timer属性、方法、实例应用,定时切换画面
  • 破解企业无公网 IP 难题:可行路径与实现方法?
  • 【MySQL基础篇】:MySQL表的约束常用类型以及实战示例
  • 【C#获取高精度时间】
  • Prometheus + Grafana + Micrometer 监控方案详解
  • JVM指令集
  • 重生之我在暑假学习微服务第四天《Docker-下篇》
  • 【学习路线】游戏开发大师之路:从编程基础到独立游戏制作
  • uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
  • Python与Spark
  • 【深度学习】独热编码(One-Hot Encoding)
  • C++_红黑树树
  • CMake 完全实战指南:从入门到精通
  • 使用redis 作为消息队列时, 如何保证消息的可靠性
  • Leetcode 08 java
  • 鸿蒙Harmony-自定义List组件,解决List组件手势滑动点击卡住问题
  • Apache Ignite 的分布式队列(IgniteQueue)和分布式集合(IgniteSet)的介绍
  • 【dropdown组件填坑指南】鼠标从触发元素到下拉框中间间隙时,下拉框消失,怎么解决?
  • 0基礎網站開發技術教學(一) --(前端篇)--
  • 《Java 程序设计》第 9 章 - 内部类、枚举和注解
  • Java07--面向对象
  • 自动调优 vLLM 服务器参数(实战指南)