preface

Ah, two months in a row since my August post, I admit I’ve been too busy (and too meow lazy). It’s November in a twinkling of an eye, and the weather is getting cold. Have you prepared meat for winter? If you don’t, eat it!

In January, there was a tutorial on how to use Vercel + Hexo to deploy a blog. For more details, please click here to use Vercel’s free resources to deploy your own small projects, static websites and so on. In many cases, it is not necessary to buy a server for personal play. Of course, static web deployment, as a front-end, Nodejs project is also a must play, so today I will show you how to deploy Node project in Vercel.

For this article I used Nest.js, a progressive Node.js framework for building efficient and scalable server-side applications, written a bit like Spring? I believe the backend students should be easier to use it. Nest.js has the following features:

  • Perfect support for TypeScipt
  • AOP oriented programming
  • Support Typeorm
  • High concurrency, asynchronous non-blocking IO
  • Node. Js version of spring
  • Build microservices applications

So let’s get started! Follow the tutorial completed, deployment is not good you hit me!

The preparatory work

Before we start, we need to do some preparatory work;

Install the nest. Js

npm i -g @nestjs/cli

Create a new nest.js project, in this case called blogServer

Command: Nest new blogServer

After creating, install dependencies, passnpm run startStart the project, access port 3000; When you start up, you’ll see Hello World.

Commit to making

Once the project is built, submit it to Github and start deploying it.

The deployment of

Associate projects on Vercel

1, clicknew ProjectStart a new project

2. Select your new project and import it

3, skip the new team, personal use does not need to build a new team, and the team needs to pay

4, The project name is free to use, the framework is selected as Other, build command is written according to the contents of your project package.json, output directory is also filled according to the name of the packaged folder, the default nest. Leave install Command as default and clickDeployThe deployment starts.

Ok, that’s it, hahaha.

In fact, the Nest. js project deployed this way will be 404 when opened, so we need to do the following.

Configuration vercel. Json

1. Create a new file in the project root directory,vercel.json, which contains the following contents: Name is your project name, same as name in package.json.

{
    "version": 2,
    "name": "blog-server",
    "builds": [
        {
            "src": "dist/main.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/main.js"
        }
    ]
}
Copy the code

With this file configured, you can deploy locally using Vercel’s command line tool. Of course, the premise is to install vercel scaffolding tools, NPM I-G Vercel installation can be. With Vercel’s command line tool, you can deploy your project with the following command.

  • Package projects locally,npm run build, package out the dist folder;
  • The first thing you need to do is log in, which is kind of like NPM,vercle loginAfter executing this command, you will be asked to choose which platform to log in to. We just choose GitHub, and the browser will be automatically opened for permission authentication. After successful authentication, the login will be successful.
  • Direct executionvercel --prodAnd then all the way to the next step. When prompted to deploy, you can open the Vercel platform to see that the deployment is in progress, and wait for the deployment success to access the normal.
  • At this point, the project is already deployed, but manually packaging and deploying each time is not what we want, so we need to automate the deployment using GitHub Actions.

Configure GitHub Action Workflows

  • Create a new Workflow in your GitHub project

  • Locate the Nodejs template and click Set Up

  • Name is the name of the script. The default template will have run: NPM run build –if-present with an extra line run: NPM run test. Let’s remove that. You can also copy my template directly. VERCEL_TOKEN, VERCEL_PROJECT_ID, and VERCEL_ORG_ID need to be configured later. At this point, we’ve created a new workflow. It is triggered by subsequent code push or PR merges.

    # 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 }}
Copy the code

  • Next we start to configure the above three variables. Remember in the last step we ran the Vercel — Prod command, and when we run this command we generate a.Vercel folder locally that looks like this, so remember projectId and orgId, we’re going to use it

  • Open Settings in GitHub project, select Secrets, add 3 variables here, VERCEL_PROJECT_ID, VERCEL_ORG_ID are projectId and orgId, go ahead and set VERCEL_TOKEN

  • Open the Vercel platform, go to Settings, open the Tokens in it, and click Create to create a token. I’ve already created one here, serverActionToken. The token here is to give GitHub Action access to Vercel projects. Remember to copy after new!!

  • Go back to GitHub settings-secrets and add VERCEL_TOKEN. The corresponding token is the one above. Now that we have access to each other, the deployment configuration is OK.

  • A local change, a submission, and workflow start automatically

  • GitHub Action will be used to automatically deploy the project as soon as it is submitted.

conclusion

Total what knot ah, do not sum up, I am off work, that’s it, okok, you can try ha!!

reference

Some of the posts in the reference link may be old, because Vercel used to be called Now, but the controls are pretty much the same now, and there will be more ways for anyone who knows workflow to play.

  • Itnext. IO/deploy – nest…

  • Hyper-text.org/archives/20…

  • Aaronfrancis.com/2021/the-pe…

  • www.eliostruyf.com/deploy-site…