Vercel 部署服务

参考文章：https://www.cnblogs.com/wang-bo/p/15472423.html

主要操作和流程链接里已经给了👆

这篇主要是对操作进行翻译？(第一次用vercel部署好懵(可能是困的…)，还再套了个github的CI/CD更绕了)

注：文档里的 workflows 文件应该是 branches 有问题，组里加个 main 应该能过

主要功能

项目应用在互联网内可访问

实现 本地提交→Github→Vercel 流水线过程完全自动化

流程实现

  1. nest new blogServer 命令：在本地创建了项目模板

  2. 跑一下

  3. 将项目提交到 github 云端

  4. 在 Vercel 平台，new Project新建项目

  5. 新建的 Vercel 项目链接到你的 github 仓库

  6. Configure Project 按照你的项目运行方式填（比如 build 命令npm build, 生成目录 dist…因项目而异）

  7. 在本地项目根目录新建 vercel.json，是给 Vercel 平台提供的信息。参考文章中的代码解释如下

    1. "src": "dist/main.js"：服务器入口文件是 dist 文件夹里的 main.js

    2. "use": "@vercel/node"：使用Vercel的Node.js环境来运行它

    3. src": "/(.*)", "dest": "dist/main.js"：无论访问任何路径，都把请求交给 dist/main.js 文件来处理

  8. 本地 pnpm build 打包出 dist 文件夹

  9. 本地 vercle login 命令登录 Github

  10. 本地 vercle --pord 将代码部署到 Vercel 的生产环境，并生成三个 Secret 的其中两个变量（VERCEL_PROJECT_ID, VERCEL_ORG_ID）

  11. 在 Github 平台，打开你的项目，选择 Action 👉 New workflow 👉 你项目的工作流环境 👉 CI/CD工作流脚本

  12. 在 Vercel 平台，头像 👉 Account Settings 👉 Tokens 👉 TOKEN NAME 写你容易辨别的名字 👉 Create 👉 复制密钥（生成后，Token 只会显示这一次！ 请立刻把它复制到一个安全的地方）

  13. 现在有三个密钥，一个就是刚配的 Vercel Token，两个在你项目的 .vercel\project.json（因为自动流程 Vercel 需要权限才可以操作 Github 仓库）

  14. 在 Github 平台，打开你的项目，选择 Settings 👉 Secrets and variables 👉 Actions 👉 New repository secret 👉 添加你的三个仓库密钥

  15. 现在改代码提交就可以实现自动流水线部署了