跳转到内容
搜教程里的步骤和配置项 例如 Vercel、Docker、TOKEN、播放器、域名。

Netlify 部署

目标:danmu_api 部署到 Netlify,拿到一个能直接用的 netlify.app 地址。

截图说明:本页截图大多基于电脑端浏览器。手机浏览器里菜单可能会折叠,按钮位置也可能略有差异;如果某一步找不到入口,先把手机浏览器切换为“桌面版网站 / 电脑端 UA”再继续。

先打开:

然后按顺序做:

  1. 点右上角 Fork
  2. 选择你自己的 GitHub 账号
  3. 等页面变成 你的GitHub用户名/danmu_api
GitHub 仓库页面里的 Fork 按钮截图
先点 Fork
GitHub Fork 确认页面截图
确认 Fork 到你自己的账号下。

直接打开:

这里直接分两种情况:

  1. 还没有账号:点右上角 Sign up
  2. 已经有账号:点右上角 Log in
用户实际操作时打开 Netlify 首页,右上角可以看到 Log in 和 Sign up 的截图
先到 Netlify 首页。没有账号就点 Sign up,有账号就点 Log in

如果你还没有 Netlify 账号,就按顺序做:

  1. 打开注册页:app.netlify.com/signup
  2. GitHub
  3. 如果后面出现资料填写页,按正常信息填完继续就行

如果你已经有账号,这一步跳过,直接登录。

用户实际操作时在 Netlify 注册页选择 GitHub 的截图
注册时直接选 GitHub
用户实际操作时在 Netlify 注册过程中填写资料的截图
如果出现资料页,正常填完继续就行。

登录后直接打开:

如果你已经在后台,也可以自己点:

  • Add new project

到导入页后,直接点 GitHub

用户实际操作时在 Netlify 的 Add new project 页面选择 GitHub 导入仓库的截图
到这里后直接点 GitHub

跳到 GitHub 授权页后,按顺序做:

  1. 怕麻烦就直接选 All repositories
  2. 如果你选 Only select repositories,一定要把你自己的 danmu_api 勾进去
  3. 点授权按钮继续
用户实际操作时在 GitHub 授权页给 Netlify 开放仓库权限的截图
最省事就是直接选 All repositories

第 6 步:回 Netlify,选你自己的 danmu_api

Section titled “第 6 步:回 Netlify,选你自己的 danmu_api”

授权完成后会回到 Netlify。

这里只做 3 件事:

  1. danmu_api
  2. 你的GitHub用户名/danmu_api
  3. 不要选 huangxd-/danmu_api

进入站点创建页后,先这样做:

  1. 构建配置先保持默认
  2. 不要自己乱改 build command 和 publish directory
  3. 直接点 Deploy site
  4. 等它创建完成

创建完成后,会进入站点页面。

第三方教程作者的 Netlify Site overview 实际后台截图
创建完成后会进入这个页面。后面的变量和重新部署都从这里继续。

按这个路径走:

Site configurationEnvironment variablesAdd a variable

然后先加:

TOKEN=87654321
ADMIN_TOKEN=你自己定义的值

如果你只是先把站点跑通,这两项先填进去就够了。

如果接下来要进入前端管理页里的 系统配置、删改变量并触发重新部署,还要按 UI 与环境变量 · Netlify 补齐:DEPLOY_PLATFROM_ACCOUNTDEPLOY_PLATFROM_PROJECTDEPLOY_PLATFROM_TOKEN。云平台只配 ADMIN_TOKEN 不够。

Netlify 论坛用户贴出的环境变量页面实际截图
这里至少先保证已经加上 TOKENADMIN_TOKEN

如果你后面还要在管理员界面里在线回写平台配置,再看:UI 与环境变量 · Netlify

变量保存后,再按这个路径走:

DeploysTrigger deployDeploy site

等这次部署成功,再继续测试。

部署成功后,不在这里重复写测试细节,直接按 部署后自检 继续检查首页、弹幕测试和管理员入口。

第 11 步:把 GitHub 自动同步先启用好

部署已经跑通了,这一步再做一次。后面上游有更新时,会省事很多。

  1. 回到你自己 fork 的 GitHub 仓库,点顶部 Actions
用户实际操作时在自己 fork 的 danmu_api 仓库顶部点开 Actions 的截图
先从你自己 fork 的仓库主页进入 Actions
  1. 第一次进来通常会先看到 workflows 被 GitHub 暂时关掉的提示,继续点启用按钮。
用户实际操作时在 fork 仓库的 Actions 首次提示页里启用 workflows 的截图
第一次进 Actions 时,先把这一步启用掉。
  1. 左边只点 Fork Sync。如果页面还显示 Disabled,就继续点右边的 Enable workflow,不用管旁边那个 Build and Push Docker Image to Docker Hub
用户实际操作时在 Actions 列表里打开 Fork Sync 且页面仍显示 Disabled 的截图
先点左边的 Fork Sync。如果还是 Disabled,就继续点右边的 Enable workflow
用户实际操作时启用 Fork Sync 后看到 Workflow enabled successfully 并准备点击 Run workflow 的截图
启用后看到 Workflow enabled successfully,再继续点 Run workflow
  1. 手动跑一次 Fork Sync。只要看到 Success,就说明这个自动同步工作流已经能正常跑。
用户实际操作时手动运行 Fork Sync 后显示 Success 的截图
先手动验证一次。看到 Success 就可以了。
  1. Netlify 会按你 fork 仓库里的新提交自动重新构建,不用每次手动重新导入。

如果这一步报错,就去网页端手动同步一次 Fork

  1. 回到你自己 fork 的仓库首页。这里必须用网页端,移动端经常看不到这个入口。
  2. 只有在你的 fork 落后上游时,首页才会出现 Sync fork。如果你现在没看到,说明已经同步完了。
  3. 看到 Sync fork 后点进去,再点 Update branch
  4. 手动同步完后,再回 Actions → Fork Sync 跑一次,或者直接等平台自动拉新提交。
用户实际操作时在自己 fork 的仓库首页使用网页端看到 Sync fork 按钮的截图
Sync fork 只会在你的 fork 落后上游时出现。现在没看到,通常就是已经同步好了。