BMM开源项目上云：Vercel部署全攻略，让项目飞起来！

前端卧龙人
556 阅读3分钟

部署至 Vercel

  1. fork 当前 Github 仓库，这个项目是干嘛的，可以看README.md,作者已经详细介绍了，这里就是部署到vercel上面的流程~
  2. 登入 Vercel，新建项目，并关联 fork 的 Github 仓库
  3. 在当前项目下，切换到setting的 Environment Variables 页面中配置环境变量：
  • DB_CONNECTION_URL这个是上一篇文章说到的supabase.com/ 数据库，具体可以查看上一篇文章进行申请并配置、
  • AUTH_URL这个是要部署到网站地址，例如AUTH_URL=https://bmm-six.vercel.app/、
  • AUTH_GITHUB_SECRET这个是申请的github的登录,AUTH_GITHUB_ID = 62519d5cf7e8098627cf、
  • AUTH_GITHUB_ID这个是申请的,例如AUTH_GITHUB_ID=62519d5cf7e8098627cf、
  • AUTH_SECRET这个是部署之后要随机替换的，也可以理解为，随意一个，例如AUTH_SECRET = "haosuibianya"。

Github OAuth App

BMM 使用 Github 授权登录，认证管理员身份，因此需要配置 Github OAuth。

查看创建步骤

  1. 登录您的 Github 账户后，访问 github.com/settings/ap…
  2. 依次填写表单内容

其他内容可随意填写，最重要的是 Authorization callback URL 这一项，请保证它和你的项目最终部署的 线上访问地址 一致！

  1. 创建一个 Client secret

1.png

Github OAuth App 的 Client ID 和 Client Secret 将分别用作环境变量 `AUTH_GITHUB_ID` 和 `AUTH_GITHUB_SECRET`，填写的 Authorization callback URL 要和环境变量 `AUTH_URL` 保持一致。

Vercel 上每个项目都会被自动分配一个域名，如 bmm.vercel.app，如果你最终使用这个域名访问 BMM 服务，那么可以不用配置 AUTH_URL，否则必须配置该环境变量。

  1. 在 「Deployments 面板」再重新部署一下即可

踩坑点

部署之后，数据库没有初始化，这个时候就要拉取你的项目到本地，执行pnpm tsx scripts/db-init.zx -P

如果出现报错，大概率是win系统，无法执行对应的命令，这个时候将其切换为

2.png 可以理解是在linux上执行命令，就不会报错啦，效果如下

3.png

然后你会发现登录不行，一直跳到login页面，不用慌，那是你缺少环境变量，设置上面的

AUTH_SECRET这个是部署之后要随机替换的，也可以理解为，随意一个，例如AUTH_SECRET = "haosuibianya"。

设置好环境变量不要忘记重新在vercel上面执行部署一下，不然环境变量不生效哦~

要设置好这么多变量哦，还有初始化数据库，缺一个环节都会导致部署失败

4.png

下一期要对之前的数据进行csv导出，然后通过supabase.com/ 的导入数据功能，快速实现网站的logo，url，name以及descption

总结

部署这样一个网站，需要的知识比较多

首先是Github OAuth App的申请，其次是supabase数据库的申请和初始化数据库，再其次是vercel的环境变量的设置

最重要的是看懂vercel的logs，上面可以告诉你因为啥报错，对应的可以执行gpt或者google进行查询解决，遇事不要慌，反正bug还是那么多~

avatar
文章
阅读
粉丝