基于Vercel+Github Action 部署Nest.js项目

前言

 啊,自从8月份发布了文章以后,连续两月没有更了,我承认我太忙了(其实是特喵的懒的不行)。这转眼就到了11月了,天气也渐渐凉了,各位胖友有没有准备好肉肉过冬!没有的赶紧给我吃起来!

1月份的时候,整了一篇利用vercel+hexo部署博客的教程,[详情点我啊](https://juejin.cn/post/6915246250933616648),利用vercel的免费资源部署自己的一些小项目,静态的网站呀什么的,因为很多时候个人玩的话买服务器不是很有必要,网上的一些公共免费资源也够我们造,当然静态网站部署了,那作为一个前端儿,Nodejs项目是必也要玩一下的,所以今天再给大家带来如何在Vercel上部署Node项目。

本文中我用了[Nest.js](https://docs.nestjs.cn/),它是一款用于构建高效且可伸缩的服务端应用程序的渐进式 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啦。

image

提交至Github

项目建好后,将项目提交到Github即可,下面我们开始部署项目。

部署

在Vercel上关联项目

1、点击new Project进行新建项目

image

2、选择你新建的项目,进行导入
image

3、跳过新建团队,个人使用不需要新建团队,况且团队的需要付费
image

4、项目名称自由发挥,框架选择other,build command根据自己项目package.json中的内容写,output directory也是根据打包出来的文件夹名称填写,nest.js默认是下面这样的,install command保持默认即可,点击Deploy开始部署。

image

Ok,文章完了,就这样,哈哈哈哈。

事实上,通过这个方式部署的nest.js项目,打开后会是404,所以我们需要接下来的操作。

配置vercel.json

1、在项目根目录新建文件,vercel.json,里面内容如下,name就是你的项目名称,与package.json中的name保持一致即可。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="json" cid="n37" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">{
"version": 2,
"name": "blog-server",
"builds": [
{
"src": "dist/main.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/main.js"
}
]
}</pre>

配置了这个文件后,你就可以在本地使用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
    image
  • 找到Nodejs模板,点击set up
    image
  • 开始写脚本内容,脚本内容如下,name即为脚本名称,默认模板会在run: npm run build --if-present下面多一行run:npm run test我们把它去掉。你也可以直接复制我的这个模板。其中VERCEL_TOKEN、VERCEL_PROJECT_ID、VERCEL_ORG_ID都是需要我们后面去配置的。到这里,我们workflow就新建成功了。后续代码push或者pr合并都会触发它执行。

    <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="yaml" cid="n61" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"># 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 }}</pre>
  • 接下来我们开始配置上面的三个变量。还记得上一步中我们执行了vercel --prod命令嘛,执行这个命令后会在本地生成一个.vercel的文件夹,里面的内容是这样的,记住这个projectId和orgId,接下来就要用了

    image
  • 打开GitHub项目中的Settings,选择Secrets,在这里新增三个变量,其中VERCEL_PROJECT_ID、VERCEL_ORG_ID就是上面的projectId和orgId,我们继续来设置VERCEL_TOKEN

    image
  • 打开vercel平台,找到settings,打开其中的Tokens,点击create新建一个token,我这里已经建好了,叫serverActionToken,这里的token就是为了让GitHub Action能够访问vercel的项目。新建好了以后记得复制啊!!!

    image
  • 再回到GitHub的Settings-Secrets中新增VERCEL_TOKEN,对应的值就是上面上次的这个token。这样我们的权限就相互打通了,部署相关的配置就已经OK啦。

    image
  • 本地随便改个内容,提交,workflow自动开始执行

    image
  • 执行成功,至此项目就部署好啦,后续只要项目更新,提交之后都会通过GitHub Action自动部署了。

    image

总结

总啥结呀,就这样吧,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/</pre>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容