前言

     啊,自从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-actionsname: deploy server blogon: 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-86bc226e7371https://hyper-text.org/archives/2021/07/nextjs_vercel_deploy.shtmlhttps://aaronfrancis.com/2021/the-perfect-vercel-github-actions-deployment-pipelinehttps://www.eliostruyf.com/deploy-site-vercel-github-actions-releases/