共计 3637 个字符，预计需要花费 10 分钟才能阅读完成。
前言
啊，自从 8 月份公布了文章当前，间断两月没有更了，我抵赖我太忙了(其实是特喵的懒的不行)。这转瞬就到了 11 月了，天气也慢慢凉了，各位胖友有没有筹备好肉肉过冬！没有的连忙给我吃起来！
1 月份的时候，整了一篇利用 vercel+hexo 部署博客的教程，详情点我啊，利用 vercel 的免费资源部署本人的一些小我的项目，动态的网站呀什么的，因为很多时候集体玩的话买服务器不是很有必要，网上的一些公共免费资源也够咱们造，当然动态网站部署了，那作为一个前端儿，Nodejs 我的项目是必也要玩一下的，所以明天再给大家带来如何在 Vercel 上部署 Node 我的项目。
本文中我用了 Nest.js，它是一款用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架，写法如同有点想 spring？置信后端同学应用它应该会比拟更容易上手。Nest.js 具备以下特点：
- 完满的反对 TypeScipt
- 面向 AOP 编程
- 反对 Typeorm
- 高并发，异步非阻塞 IO
- Node.js 版的 spring
- 构建微服务利用
那话不多说，开始吧！跟着教程实现了，部署不好你来打我！
筹备工作
在开始之前，咱们须要做一些筹备工作；
装置 nest.js
npm i -g @nestjs/cli
新建一个 nest.js 我的项目，这里我新建的项目名称为 blogServer
命令：nest new blogServer
新建好当前，装置依赖，通过 npm run start 启动我的项目，拜访端口为 3000; 启动起来会看到 Hello World 就 ok 啦。
提交至 Github
我的项目建好后，将我的项目提交到 Github 即可，上面咱们开始部署我的项目。
部署
在 Vercel 上关联我的项目
1、点击 new Project 进行新建我的项目
2、抉择你新建的我的项目，进行导入
3、跳过新建团队，集体应用不须要新建团队，况且团队的须要付费
4、项目名称自由发挥，框架抉择 other，build command 依据本人我的项目 package.json 中的内容写，output directory 也是依据打包进去的文件夹名称填写，nest.js 默认是上面这样的，install command 放弃默认即可，点击Deploy 开始部署。
Ok，文章完了，就这样，哈哈哈哈。
事实上，通过这个形式部署的 nest.js 我的项目，关上后会是 404，所以咱们须要接下来的操作。
配置 vercel.json
1、在我的项目根目录新建文件,vercel.json，外面内容如下，name 就是你的项目名称，与 package.json 中的 name 保持一致即可。
{
"version": 2,
"name": "blog-server",
"builds": [
{
"src": "dist/main.js",
"use": "@vercel/node"
}
],
"routes": [
{"src": "/(.*)",
"dest": "dist/main.js"
}
]
}配置了这个文件后，你就能够在本地应用 vercel 的命令行工具进行部署了。当然前提是须要装置 vercel 的脚手架工具，npm i -g vercel装置即可。有了 vercel 的命令行工具后，通过以下命令即可部署我的项目。
- 在本地进行我的项目打包，
npm run build，打包出 dist 文件夹； - 首先须要登陆，其实有点相似 npm 的形式，
vercle login，执行该命令后会让你抉择用哪个平台登陆，咱们抉择 GitHub 即可，会主动关上浏览器进行权限认证，认证胜利后即登陆胜利； - 间接执行
vercel --prod，而后一路下一步即可。提醒部署的时候能够关上 vercel 平台看看会显示正在部署，期待部署胜利就可能够失常拜访了。 - 到这里的时候，其实我的项目就曾经部署胜利啦，然而如果每次都要手动打包再手动部署，那必定是不合乎咱们的冀望的，因而咱们就须要应用 GitHub Action 进行自动化部署了。
配置 GitHub Action Workflows
- 在 GitHub 的我的项目中新建一个 workflow
- 找到 Nodejs 模板，点击 set up
-
开始写脚本内容，脚本内容如下，name 即为脚本名称，默认模板会在
run: npm run build --if-present上面多一行run:npm run test咱们把它去掉。你也能够间接复制我的这个模板。其中 VERCEL_TOKEN、VERCEL_PROJECT_ID、VERCEL_ORG_ID 都是须要咱们前面去配置的。到这里，咱们 workflow 就新建胜利了。后续代码 push 或者 pr 合并都会触发它执行。# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions name: deploy server blog on: push: branches: [master] pull_request: branches: [master] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x, 14.x, 16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - uses: actions/checkout@v2 - name: Use Node.js ${{matrix.node-version}} uses: actions/setup-node@v2 with: node-version: ${{matrix.node-version}} cache: 'npm' - run: npm ci - run: npm run build --if-present - name: Deploy to Vercel run: npx vercel --token ${VERCEL_TOKEN} --prod env: VERCEL_TOKEN: ${{secrets.VERCEL_TOKEN}} VERCEL_PROJECT_ID: ${{secrets.VERCEL_PROJECT_ID}} VERCEL_ORG_ID: ${{secrets.VERCEL_ORG_ID}} -
接下来咱们开始配置下面的三个变量。还记得上一步中咱们执行了
vercel --prod命令嘛，执行这个命令后会在本地生成一个.vercel的文件夹，外面的内容是这样的，记住这个 projectId 和 orgId，接下来就要用了 -
关上 GitHub 我的项目中的 Settings，抉择 Secrets，在这里新增三个变量，其中 VERCEL_PROJECT_ID、VERCEL_ORG_ID 就是下面的 projectId 和 orgId，咱们持续来设置 VERCEL_TOKEN
-
关上 vercel 平台，找到 settings，关上其中的 Tokens，点击 create 新建一个 token，我这里曾经建好了，叫 serverActionToken，这里的 token 就是为了让 GitHub Action 可能拜访 vercel 的我的项目。新建好了当前记得复制啊！！！
-
再回到 GitHub 的 Settings-Secrets 中新增 VERCEL_TOKEN，对应的值就是下面上次的这个 token。这样咱们的权限就互相买通了，部署相干的配置就曾经 OK 啦。
-
本地轻易改个内容，提交，workflow 主动开始执行
-
执行胜利，至此我的项目就部署好啦，后续只有我的项目更新，提交之后都会通过 GitHub Action 主动部署了。
总结
总啥结呀，就这样吧，okok，你们能够试试哈！！！
参考
参考链接外面有些博文可能是旧的，因为 vercel 以前叫 now，然而操作大同小异了，会玩 workflow 的必定也会有更多的形式的，大家自行游玩哈。
https://itnext.io/deploy-nest-js-on-zeit-now-with-github-actions-86bc226e7371
https://hyper-text.org/archives/2021/07/nextjs_vercel_deploy.shtml
https://aaronfrancis.com/2021/the-perfect-vercel-github-actions-deployment-pipeline
https://www.eliostruyf.com/deploy-site-vercel-github-actions-releases/