跳转到内容
danmu_api 图文教程

Vercel 部署

目标：把 danmu_api 部署到 Vercel，拿到一个能直接用的 vercel.app 地址。

第 1 步：先 Fork 上游仓库

Section titled “第 1 步：先 Fork 上游仓库”

先打开这个地址：

然后按顺序做：

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

第 2 步：用 GitHub 登录 Vercel

Section titled “第 2 步：用 GitHub 登录 Vercel”

直接打开这个地址：

然后点 Continue with GitHub。

如果第一次登录时看到 Social Account is not yet connected to any Vercel user. Sign up?，直接点 Sign up 继续。

Vercel 登录页社区真实截图，页面包含 Continue with GitHub 和 Sign Up 入口
第一次用 GitHub 登录时，继续按当前 GitHub 账号完成注册即可。
Vercel Sign Up 页面显示 Unauthorized to access the given account 的社区真实截图
如果你以前删过旧 Vercel 账号，又重新绑定同一个 GitHub，可能会看到这类提示。

如果你看到这类提示，直接联系 Vercel 账号支持处理旧账号残留，处理完再重新用当前 GitHub 登录。

第 3 步：打开新建项目页

Section titled “第 3 步：打开新建项目页”

登录后直接打开这个地址：

到这里以后，你要做的事只有一件：把自己 Fork 出来的 danmu_api 导入进来。

Vercel Add New Project 截图
登录后直接进入新建项目页。

第 4 步：先点 Install，进入 GitHub 授权页

Section titled “第 4 步：先点 Install，进入 GitHub 授权页”

如果你在 Vercel 导入页看到这句：

Install the GitHub application for the accounts you wish to Import from to continue

这里先做的不是部署项目，而是先把 GitHub 仓库访问权限接好。 直接点页面里的 Install。

Vercel Import Git Repository 页面中出现 Install 按钮的社区真实截图
看到这一步时，先点 Install，进入 GitHub 授权页。

跳到 GitHub 后，再做这一步：

  1. 选 All repositories，或者
  2. 选 Only select repositories，但一定要把你自己的 danmu_api 勾进去
  3. 点 Install
GitHub 授权页面里选择仓库权限并点击 Install 的社区真实截图
在 GitHub 授权页里把仓库访问权限选好，再点 Install。

第 5 步：回到 Vercel，导入你自己的 Fork 仓库

Section titled “第 5 步：回到 Vercel，导入你自己的 Fork 仓库”

回到 Vercel 后，在仓库列表里找到：

  • 你的GitHub用户名/danmu_api

然后点右边的 Import。

如果你在列表里看不到它，先回头检查两件事：

  1. 你是不是已经 Fork 成功了
  2. 刚才 GitHub App 授权时，是不是没把这份仓库勾进去
Vercel Import Git Repository 页面社区真实截图
回到仓库列表里，找到你自己账号下的仓库。
Vercel 导入 Fork 仓库截图
看到 你的GitHub用户名/danmu_api 再点 Import。

第 6 步：先点 Deploy，把项目创建出来

Section titled “第 6 步：先点 Deploy，把项目创建出来”

点完 Import 以后，会进入 New Project 页面。 这里先不要来回跳，构建设置保持默认，直接点 Deploy。 等第一次部署完成，再继续下一步补变量。

Vercel Deploy 按钮截图
先把项目创建出来，直接点 Deploy。
Vercel 首次部署完成截图
第一次部署完成后，先拿到一个可访问的 vercel.app 地址。

第 7 步：回项目里补环境变量

Section titled “第 7 步：回项目里补环境变量”

第一次部署完成后，再回项目里补变量。 这一步找的是项目设置里的 Environment Variables，不是账号设置。

  1. 回到 All Projects，点刚部署好的项目。
用户实际操作时在 Vercel All Projects 页面里点进已部署项目的截图
先回到项目列表，再点刚部署好的项目。
  1. 进项目后，点左侧 Settings。
用户实际操作时在 Vercel 项目页左侧点 Settings 的截图
进项目后，先打开 Settings。
  1. 在项目设置里点 Environment Variables，进入变量页。
用户实际操作时在 Vercel 项目设置页里打开 Environment Variables 的截图
这里才是要填变量的页面，不要去账号设置里找。
  1. 先加 TOKEN=***。这个值给普通访问地址用，保留默认值也可以。
  2. 再加 ADMIN_TOKEN=***。这个值用来打开管理员页面。
  3. 如果以后想在前端系统配置界面里修改环境变量、再触发重新部署，还要额外配置 DEPLOY_PLATFROM_PROJECT 和 DEPLOY_PLATFROM_TOKEN。
  4. 详细步骤看 UI 与环境变量 · Vercel。

第 8 步：回 Deployments，重新部署一次再测试

Section titled “第 8 步：回 Deployments，重新部署一次再测试”

改完环境变量后，再做一次：

项目→Deployments→Redeploy
Vercel 社区用户的部署详情实际截图，包含 Redeploy 入口
点 Redeploy 后，再继续测试。

重新部署成功后，直接测这两个地址。

如果你保留默认 TOKEN=87654321，直接测：

https://你的项目名.vercel.app/api/v2/search/anime?keyword=凡人修仙传

管理员页面地址是：

https://你的项目名.vercel.app/你的ADMIN_TOKEN

如果你把 TOKEN 改成了自己的值，就把搜索地址改成：

https://你的项目名.vercel.app/你的TOKEN/api/v2/search/anime?keyword=凡人修仙传

能正常打开搜索结果和管理员页面，这次部署就完成了。

部署完成后使用 vercel.app 地址的示例截图
后面接播放器、接 App、或者继续绑域名，都是从这条已经跑通的 vercel.app 地址往下走。

第 9 步：把 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. Vercel 会按你 fork 仓库里的新提交自动重新构建，不用每次手动重新导入。

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

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

后面要继续做什么

Section titled “后面要继续做什么”