跳转至

UI 与环境变量

目标:先按你正在用的云平台,把进入 系统配置 必须用到的变量配齐;部署生效后,打开 https://你的域名/你的ADMIN_TOKEN 进入管理员界面。具体每个变量是什么意思,放到 支持的环境变量 单独讲。


先看这 3 条

  • 云平台不要只配 ADMIN_TOKEN。想进入并使用 系统配置,还要先配本平台需要的 DEPLOY_PLATFROM_* 变量。
  • 新增环境变量时,左边 Name / Key / 变量名 填固定名字,例如 DEPLOY_PLATFROM_PROJECT;右边 Value / 值 填你刚复制出来的 Project ID、Account ID 或 Token。
  • 变量名按项目现在的拼写照抄:DEPLOY_PLATFROM,中间是 PLATFROM,不要改成 PLATFORM

如果是 Docker电脑本地 Node.jsTermux 部署,先回对应页面改 config/.env。下面主要讲云平台。


先选你的平台


Vercel

目标:先拿到 Project IDVercel Token,再回项目自己的 Environment Variables 页面,一项一项添加变量并保存。下面的截图按"一个截图只做一个动作"来跟,不要跳着点。

第 1 步:在 All Projects 点进你的项目

路径: Vercel → All Projects → 点你的项目卡片

Vercel All Projects 页面里点击项目卡片进入项目

只点红圈里的项目卡片标题/缩略图区域,进入已经部署好的项目。

第 2 步:在项目页点 Settings

路径: 你的项目 → Settings

Vercel 项目 Overview 页面左侧栏点击 Settings

进入项目后,点左侧栏靠下的 Settings,不要去账号设置。

第 3 步:在 General 里复制 Project ID

路径: Settings → General → Project ID

Vercel Project Settings 的 General 页面里复制 Project ID

只处理红圈里的 Project ID:点右侧复制图标,把这串值保存下来,稍后填到 DEPLOY_PLATFROM_PROJECT

第 4 步:创建 Vercel Token

打开 Vercel Token 页面

打开后按顺序做:点 Create Token,名字可以填 danmu-api,创建后立刻复制 Token。复制出来的这串值,稍后填到 DEPLOY_PLATFROM_TOKEN

Vercel Token 创建页面官方截图

Token 只显示一次,复制后先保存到自己能找到的地方。

第 5 步:在项目左侧栏点 Environment Variables

路径: 你的项目 → 左侧栏 → Environment Variables

Vercel 项目 Overview 页面左侧栏点击 Environment Variables

在项目页面左侧栏直接点 Environment Variables。新版 Vercel 不需要先点 Settings 才能找环境变量。

第 6 步:点 Add Environment Variable

Vercel Environment Variables 页面点击 Add Environment Variable

确认页面标题是 Environment Variables 后,只点右上角黑色按钮 Add Environment Variable

第 7 步:在 Key 里填变量名

Vercel Add Environment Variable 弹窗里填写 Key

Key 输入框填变量名。第一条可以先填 ADMIN_TOKEN

第 8 步:在 Value 里填变量值

Vercel Add Environment Variable 弹窗里填写 Value

Value 输入框填这一条变量的值。这里填的是值,不要把变量名再填一遍。

第 9 步:点 Save 保存这一条

Vercel Add Environment Variable 弹窗里点击 Save 保存

填完一条后点右下角 Save。保存成功后,再回到第 6 步继续添加下一条。

每次只新增一条,按第 6~9 步重复添加这 3 项:

ADMIN_TOKEN=你想用来打开管理员页面的密码
DEPLOY_PLATFROM_PROJECT=第 3 步复制的 Project ID
DEPLOY_PLATFROM_TOKEN=第 4 步复制的 Vercel Token

如果还想改普通访问地址,再用同样方法多加一条:

TOKEN=你的普通访问口令

注意

DEPLOY_PLATFROM 中间按项目当前拼写是 PLATFROM,不要改成 PLATFORM

第 10 步:创建一次 main 部署,让新变量生效

Vercel 的环境变量只会影响新部署。变量保存完以后,按下面顺序从 Deployments 页面创建一次 main 部署。

路径: 项目 Overview → Deployments → 右上角 … → Create Deployment → main → Deploy to Production

第 10-1 步:先点左侧栏 Deployments

Vercel 项目 Overview 页面左侧栏点击 Deployments

从项目页面左侧栏点 Deployments

第 10-2 步:确认已经进入 Deployments 页面

Vercel Deployments 页面里最新 Production Current 部署记录

页面标题变成 Deployments 后,先看最上面这一条:它应该是 ProductionCurrentReady,分支是 main

第 10-3 步:手机浏览时也先确认在 Deployments 页面

手机浏览器中的 Vercel Deployments 页面

如果你是在手机浏览器里操作,左侧栏的 Deployments 会是选中状态,右侧同样能看到最新的 Production / Current 部署记录。

第 10-4 步:点页面右上角的三个点

Vercel Deployments 页面右上角三个点菜单

Deployments 页面右上角点

第 10-5 步:点 Create Deployment

Vercel Deployments 页面右上角菜单中的 Create Deployment

菜单打开后,点第一项 Create Deployment

第 10-6 步:选择 main 分支

Vercel Create Deployment 弹窗中选择 main 分支

弹窗出现后,点 main。如果没有看到 main 小按钮,就在 Commit or Branch Reference 输入框里输入 main

第 10-7 步:确认弹窗里显示 main / Production

Vercel Create Deployment 弹窗中确认 main Production 部署

点完 main 后,确认这里显示 mainProduction

第 10-8 步:点 Deploy to Production

Vercel Create Deployment 弹窗中点击 Deploy to Production

确认无误后,点右下角的 Deploy to Production

第 10-9 步:等状态变成 Ready,再打开管理员 URL

提交部署后回到部署列表,等待新记录变成 Ready。完成后打开:

https://你的域名/你的ADMIN_TOKEN

看到 系统配置 页面,就说明 Vercel 这一条配好了。

后面如果还想改其他变量,比如弹幕来源、缓存时间、限流、白名单等,不用再回到云平台网页;打开 https://你的域名/你的ADMIN_TOKEN 进入 系统配置 按需修改即可。所有环境变量的含义、哪些平台保存后直接生效、哪些平台要点重新部署,去 支持的环境变量 查看。


Hugging Face Space

目标:从 Space 地址里拿账号名和 Space 名,再创建 Hugging Face Token,最后在 Space 的 Variables and secrets 里填完。

第 1 步:先看你的 Space 地址

Space 页面地址一般长这样:

https://huggingface.co/spaces/账号名/Space名

从这个地址里记下两项:

DEPLOY_PLATFROM_ACCOUNT=账号名
DEPLOY_PLATFROM_PROJECT=Space名

Hugging Face Space 页面官方截图

浏览器地址里的 spaces/账号名/Space名 就是后面要填的两个值。

第 2 步:创建 Hugging Face Token

打开 Hugging Face Tokens

按顺序做:点 Create new token,权限选 Write 或给目标 Space 写权限,名字填 danmu-api,创建后立刻复制 Token。复制出来的值填到 DEPLOY_PLATFROM_TOKEN

Hugging Face Access Tokens 页面官方截图

Hugging Face 创建新 Access Token 并选择 Write 权限的实际截图

Token type 选 Write。创建后复制出来的是值,不是变量名。

第 3 步:进 Space 的 Variables and secrets

路径: 你的 Space → Settings → Variables and secrets

Hugging Face Space 顶部 Settings 入口截图

先点 Space 顶部的 Settings

Hugging Face Space Variables and secrets 页面实际截图

往下找到 Variables and secrets,新增变量点右上角 New variable

第 4 步:把必须变量填进去

新增这 4 项:

ADMIN_TOKEN=你想用来打开管理员页面的密码
DEPLOY_PLATFROM_ACCOUNT=第 1 步记下来的账号名
DEPLOY_PLATFROM_PROJECT=第 1 步记下来的 Space 名
DEPLOY_PLATFROM_TOKEN=第 2 步复制的 Hugging Face Token

建议放法:DEPLOY_PLATFROM_ACCOUNTDEPLOY_PLATFROM_PROJECT 放 Variables;ADMIN_TOKENDEPLOY_PLATFROM_TOKEN 放 Secrets。

如果还想改普通访问地址,再加:

TOKEN=你的普通访问口令

第 5 步:等 Space 重新运行,再打开管理员 URL

Hugging Face 保存变量后通常会自动重新构建/部署。等状态回到 Running 后打开:

https://你的Space访问地址/你的ADMIN_TOKEN

默认地址一般是:

https://你的账号名-你的Space名.hf.space/你的ADMIN_TOKEN

看到 系统配置 页面,就说明 Hugging Face 这一条配好了。


Netlify

目标:先拿 Site IDTeam slug / Team ID 和 Personal Access Token,再回项目环境变量页填完。

第 1 步:进入项目的 Project configuration

路径: Netlify → Projects → 你的项目 → Project configuration

Netlify 项目页面里 Project configuration 入口截图

进入项目后,先点左侧 Project configuration

第 2 步:复制 Project ID / Site ID

路径: Project configuration → Project details

Netlify Project details 页面里 Project ID 位置截图

复制 Project ID。它也叫 Site ID,稍后填到 DEPLOY_PLATFROM_PROJECT

第 3 步:复制 Team slug 或 Team ID

路径: Team settings → Team details

Netlify Team details 页面里 Slug 和 Team ID 位置截图

优先记 Slug;如果你更方便复制 Team ID,也可以用 Team ID。稍后填到 DEPLOY_PLATFROM_ACCOUNT

第 4 步:创建 Personal Access Token

打开 Netlify Personal Access Token 页面

创建一个新 Token,名字可以填 danmu-api。创建后立刻复制,稍后填到 DEPLOY_PLATFROM_TOKEN

第 5 步:回 Environment variables,填必须变量

路径: 你的项目 → Project configuration → Environment variables

Netlify Environment variables 页面 Add a variable 按钮截图

Add a variable,把下面几项一项项加进去。

新增这 4 项:

ADMIN_TOKEN=你想用来打开管理员页面的密码
DEPLOY_PLATFROM_ACCOUNT=第 3 步复制的 Team slug 或 Team ID
DEPLOY_PLATFROM_PROJECT=第 2 步复制的 Site ID
DEPLOY_PLATFROM_TOKEN=第 4 步复制的 Personal Access Token

如果还想改普通访问地址,再加:

TOKEN=你的普通访问口令

第 6 步:触发新部署,再打开管理员 URL

路径: 你的项目 → Deploys → Trigger deploy

部署完成后打开:

https://你的域名/你的ADMIN_TOKEN

看到 系统配置 页面,就说明 Netlify 这一条配好了。


Cloudflare Workers

目标:先拿 Account ID、Worker 脚本名和 API Token,再回 Worker 的变量页填完。

Cloudflare Workers 不建议作为长期主力部署。免费版单次请求最多 50 个外部子请求,腾讯视频这类分片多的弹幕可能超过上限,导致弹幕获取不全。已经部署在 Workers 上时,这一页可以用来补齐变量;如果还没开始部署,优先看 Docker、Vercel、Netlify 或 EdgeOne Pages。

第 1 步:进入 Worker,记下脚本名

路径: Cloudflare → Workers & Pages → 你的 Worker

Cloudflare Worker 页面里 Worker 脚本名位置截图

把 Worker 名称记下来,稍后填到 DEPLOY_PLATFROM_PROJECT

第 2 步:复制 Account ID

Cloudflare 后台复制 Account ID 的截图

复制 Account ID,稍后填到 DEPLOY_PLATFROM_ACCOUNT

第 3 步:创建 Cloudflare API Token

打开 Cloudflare API Token 页面

创建 Token 时给 Workers 编辑权限。创建后立刻复制,稍后填到 DEPLOY_PLATFROM_TOKEN

Cloudflare API Token 页面 Create API Token 位置截图

复制出来的是右侧 Value,变量名填 DEPLOY_PLATFROM_TOKEN

第 4 步:回 Variables and Secrets,填必须变量

路径: Workers & Pages → 你的 Worker → Settings → Variables and Secrets

新增这 4 项:

ADMIN_TOKEN=你想用来打开管理员页面的密码
DEPLOY_PLATFROM_ACCOUNT=第 2 步复制的 Account ID
DEPLOY_PLATFROM_PROJECT=第 1 步记下的 Worker 脚本名
DEPLOY_PLATFROM_TOKEN=第 3 步复制的 Cloudflare API Token

如果还想改普通访问地址,再加:

TOKEN=你的普通访问口令

第 5 步:保存后打开管理员 URL

Cloudflare Workers 保存变量后,直接打开:

https://你的 Worker 地址/你的ADMIN_TOKEN

看到 系统配置 页面,就说明 Cloudflare Workers 这一条配好了。


EdgeOne Pages

目标:先拿项目 ID 和 EdgeOne API Token,再把 Upstash Redis 一起补上,最后打开管理员界面。

第 1 步:进入你的 EdgeOne Pages 项目

如果你前面走的是中文站,从这里进:

打开腾讯云 EdgeOne Pages 控制台

如果你前面走的是国际站,从这里进:

打开 EdgeOne 国际站 Pages 控制台

EdgeOne Pages 项目列表截图

EdgeOne Pages 项目概览截图

在项目列表里点进自己的 danmu-api 项目。进入项目详情后,下一步直接看浏览器地址栏。

第 2 步:从地址栏复制 pages-xxxxxxxxxxxx

项目详情页 URL 里一般会有一段类似:

pages-xxxxxxxxxxxx

这一段就是 DEPLOY_PLATFROM_PROJECT 要填的值。

EdgeOne Pages 项目详情页地址栏项目 ID 截图

复制红框里的 pages-... 这一段,不要填项目显示名,也不要填访问域名。

第 3 步:创建 EdgeOne API Token

中文站入口:

打开腾讯云 EdgeOne Pages API Token 页面

国际站入口:

打开 EdgeOne 国际站 API Token 页面

EdgeOne Pages API Token 页面截图

API Token 标签页创建 Token。复制出来的值填到 DEPLOY_PLATFROM_TOKEN

第 4 步:回项目环境变量页,填必须变量

路径: EdgeOne Pages → 你的项目 → Project Settings → Environment Variable or Secret

EdgeOne Pages Environment Variable or Secret 页面截图

值都找齐以后,再回这个页面统一填。

新增这 3 项:

ADMIN_TOKEN=你想用来打开管理员页面的密码
DEPLOY_PLATFROM_PROJECT=第 2 步复制的 pages-xxxxxxxxxxxx
DEPLOY_PLATFROM_TOKEN=第 3 步复制的 EdgeOne API Token

EdgeOne 当前不需要填 DEPLOY_PLATFROM_ACCOUNT

如果还想改普通访问地址,再加:

TOKEN=你的普通访问口令

第 5 步:EdgeOne 继续补 Upstash Redis

EdgeOne 这条线建议一开始就补缓存变量。不补时,请求落到新的运行环境后,前一次匹配结果可能接不上,匹配弹幕容易 404 或不稳定。

打开 Upstash Redis 控制台

Upstash 控制台创建 Redis 数据库截图

创建 Redis 数据库后,复制 REST URLREST TOKEN

再把这两项补进 EdgeOne 环境变量:

UPSTASH_REDIS_REST_URL=你的 REST URL
UPSTASH_REDIS_REST_TOKEN=你的 REST TOKEN

第 6 步:保存后重新部署,再打开管理员 URL

https://你的域名/你的ADMIN_TOKEN

看到 系统配置 页面,就说明 EdgeOne Pages 这一条配好了。


以后怎么改变量

第 1 步:打开管理员 URL,进入系统配置

以后不要先回云平台乱找入口,先打开管理员地址:

https://你的域名/你的ADMIN_TOKEN

进入后点 系统配置

管理员 UI 里打开系统配置页面的截图

在这里改变量。要改哪一项,就点对应行的 编辑

第 2 步:保存后让新变量生效

  • Vercel / Netlify / EdgeOne Pages:在 系统配置 里保存后,按页面里的重新部署流程触发新部署。
  • Hugging Face Space:保存或删除变量后通常会自动重新构建/部署;如果页面还没回到 Running,先等它自己完成,再测试。
  • Cloudflare Workers:保存后如果页面提示 Deploy / Save and Deploy / Create deployment,先按提示发布;没有提示再直接测试。
  • Docker / Node.js / Termux:按对应部署页改 config/.env;改完如果不生效,就重启服务。

第 3 步:看具体变量怎么填

这页只讲怎么进入 系统配置。变量含义、默认值、示例写法和冷门项放在单独页面:

打开支持的环境变量


正文依据:huangxd-/danmu_apidanmu_api/ui/README.md 与当前实现代码。配图优先使用用户实际操作截图、官方截图和社区真实截图。