Vercel部署LobeChat数据库版简略流程

#software

LobeChat是一个LLM前端，糅合了文生文、文生图、MCP等等API工具。我之前在VPS中部署OpenWebUI，但他只支持OpenAI的API格式，更新为LobeChat主要是考虑他支持御三家（chatGPT/Claude/Gemini）的原生格式。

官方提供了一份部署方案，本篇是简略流程，旨在作为官方方案的补丁，规避一些坑。

开始部署

这个方案基于Vercel + Cloudflare R2 + Auth0，部署之前，需求准备的资料是：

  1. Github；
  2. Vercel；
  3. Cloudflare；
  4. Auth0；
  5. 一个域名，如example.com，托管到Cloudflare；

如以上资料不全，需自行申请对应账户，或参考其他方法。

Fork官方仓库

LobeChat的Vercel一键部署方案并不是Fork官方仓库，这里建议自行Fork，然后将Fork下来的仓库与Vercel进行连结部署。请注意，因为我们没有设定好环境变量，因此初次部署必然失败，但可获得由Vercel分配的项目连接。

在Vercel的lobe-chat项目 - Settings - Domains中找到由Vercel分配的项目连接，大概会是下面这个样子的

lobe-chat-xxxx-xxxx-xxxx.vercel.app

接下来需要在Vercel的lobe-chat项目 - Settings - Environment Variables中逐步配置环境变量。

配置数据库

服务端数据库使用Vercel提供的Neon实例，请参考官方文档，这步将增加的环境变量是

DATABASE_URL=<你的数据库URL>
NEXT_PUBLIC_SERVICE_MODE=server

还需要自行设定一个加密密钥，可以使用openssl来随机生成。

openssl rand -base64 32

然后增加环境变量

KEY_VAULTS_SECRET=<你的随机密钥>

增加一个域名APP_URL用于指定LobeChat的地址，以防万一，请加上https://

APP_URL=https://chat.example.com

身份验证服务

这里使用Auth0作为身份验证服务，这是和官方文档不同的地方，官方文档使用的是Clerk。Clerk比较麻烦，需要在自己的域名托管商里DNS加上很多的CNAME记录。

Auth0可以参考此篇官方文档。

在Vercel项目中新增的环境变量如下，请注意下面的两个URL，必须加上http://

NEXT_AUTH_SECRET=<又一个随机密钥>
NEXT_AUTH_SSO_PROVIDERS=auth0
AUTH_AUTH0_ID=IXxxxxxxxxxxxxxxxxxxxxxxxN
AUTH_AUTH0_SECRET=rxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx2
AUTH_AUTH0_ISSUER=https://dev-xxxxxxxxxxxxxxxx.us.auth0.com
NEXTAUTH_URL=https://chat.example.com/api/auth

另外，如果只是个人使用，建议在Auth0中禁止注册、并删除所有的社交登录服务。

配置S3储存服务

这里使用[Cloudflare R2]，具体请参考官方文档，这里没啥坑的，主要是R2界面版本更新了，对应的条目需要自己找一下，但是并不困难。

在配置跨域里，输入自己的Vercel lobe-chat项目地址

[
  {
    "AllowedOrigins": ["https://lobe-chat-xxxx-xxxx-xxxx.vercel.app"],
    "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
    "AllowedHeaders": ["*"]
  }
]

这步将增加的Vercel项目环境变量是

S3_BUCKET=lobechat
# 存储桶的请求端点(注意此处链接的路径带存储桶名称，必须删除该路径，或使用申请 S3 API token 页面所提供的链接)
S3_ENDPOINT=https://xxxxxxxxxxxxxxxxxxxxxxxx.r2.cloudflarestorage.com
S3_PUBLIC_DOMAIN=https://s3-for-lobechat.example.com
S3_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
S3_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

重新部署

现在可以重新部署项目了，重新部署后，可以把自己的域名如chat.example.com设置到Domains中，同时在Cloudflare中建立一条CNAME记录，将域名指向Vercel的项目地址lobe-chat-xxxx-xxxx-xxxx.vercel.app。

此时，在Vercel项目的Domains页面下刷新，会提示请将指向地址修改为一个Vercel自己的DNS地址，然后复制该地址，修改Cloudflare中的CNAME记录指向即可。

后记

将LobeChat部署到Vercel主要是为了节省自己的VPS的计算资源，但大善人Vercel的免费额度有限，前期请关注自己的用量。

同时，Vercel对于每个请求有超时限制，可能会造成对话截断或者无返回，可以在LobeChat中设置使用客户端请求模式。