前言
啊，自從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/
本文由博客群發一文多發等運營工具平台 OpenWrite 發布