将 KVideo(基于 Next.js 16 构建的影视聚合平台)部署到 Cloudflare Pages(CF Pages)非常简单。

由于项目基于 Next.js 开发,在 Cloudflare Pages 部署时,推荐使用 GitHub 存储库集成构建 方式完成部署。

1.准备 Cloudflare 账号并连接 GitHub:确保 Cloudflare 拥有对你 Fork 仓库的访问权限。

登录 Cloudflare 控制台。

在左侧导航栏点击 Compute (Workers & Pages) -> Workers & Pages。

点击 Create application,

选择 Pages 选项卡,然后点击 Connect to Git。

如果尚未绑定,授权连接你的 GitHub 账号,并选择授权访问你的 Aaron-xi2/KVideo 存储库。

2.配置 Pages 项目构建参数:

适配 Next.js 静态/SSR 构建框架。在仓库列表中选择 Aaron-xi2/KVideo,点击 Begin setup(开始配置)。

填入或确认以下构建配置(请务必保持一致):

Project name(项目名称):kvideo(或自定义名称,会作为默认二级域名如 kvideo.pages.dev)

Production branch(生产分支):main

Framework preset(框架预设):选择 Next.js (Static Export) 或 Next.js

Build command(构建命令):npx @cloudflare/next-on-pages@1 或 npm run buildBuild

output directory(输出目录):.vercel/output/static 或 out

提示:如果项目根目录有 wrangler.toml 文件或使用 @cloudflare/next-on-pages,Cloudflare 会自动识别适配设置。

3.设置环境变量(可选及安全访问控制):配置密码防护及默认站点信息。

在同一配置页面的 Environment variables (advanced) 部分,按需添加以下常用环境变量(后续也可在项目设置中修改):变量名推荐设置值 / 说明NEXT_PUBLIC_SITE_NAME我的专属影院(修改网站顶部显示的名称)ACCESS_PASSWORD设置你的访问密码(防止网站被其他人公开滥用)ADMIN_PASSWORD超级管理员密码(用于管理后台及多用户模式)

注意:在 Cloudflare Pages 环境下,IPTV 流中继功能出于合规性默认关闭,如需基础托管认证还可结合 Upstash Redis 配置。

4.部署与部署后域名配置:完成初次构建并测试访问。点击 Save and Deploy(保存并部署)。

等待 Cloudflare 的日志跑完(通常需要 1~3 分钟),构建成功后会显示一个 https://<你的项目名>.pages.dev 格式的访问网址。点击链接测试访问。

如果有设置 ACCESS_PASSWORD,输入密码即可进入主页。

5.导入视频订阅源:KVideo 默认无内置源,需手动导入。

打开你的站点,点击右上角的 设置(齿轮图标)。滚动到页面底部,找到 导入设置 / 订阅管理。粘贴你收集到的视频源/订阅链接 JSON,点击 添加/导入。返回首页即可正常搜索和播放影视内容。

如果日志中提示 Found wrangler.toml file … does not appear to be valid,说明仓库根目录下的 wrangler.toml 缺少必要配置。

你可以直接在你的 GitHub 仓库(Aaron-xi2/KVideo)根目录下找到或新建 wrangler.toml 文件,添加如下内容并提交:

name = “kvideo”

compatibility_date = “2024-09-23”

compatibility_flags = [“nodejs_compat”]

pages_build_output_dir = “.vercel/output/static”

在 Cloudflare Pages 控制台中将构建命令重置为:

npx @cloudflare/next-on-pages@1