Vercel部署Node.js Express项目
sunshj Lv4
  2022-08-02 19:42:00 2022-08-02 19:42   2023-11-01 18:42:22      420 字  1 分钟  

Vercel是一个强大的网站托管服务

一、注册vercel

官网：https://vercel.com/

推荐用github直接登录注册，注册时会要求验证手机号。

二、安装vercel

本地安装 Vercel

1
npm i vercel -g

登录 Vercel

1
vercel login

三、创建Express项目

使用 express-generator 快速创建应用程序框架

  1. 安装express-generator

    1
    npm install -g express-generator

  2. 在当前工作目录中创建名为 myapp 的 Express 应用程序并将视图引擎将设置为ejs

    1
    express --view=ejs myapp

  3. 安装依赖

    1
    npm install

    生成的应用程序具有以下目录结构：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .
    ├── app.js
    ├── bin
    │   └── www
    ├── package.json
    ├── public
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    │       └── style.css
    ├── routes
    │   ├── index.js
    │   └── users.js
    └── views
        ├── error.pug
        ├── index.pug
        └── layout.pug

    7 directories, 9 files

  4. 在根目录创建index.js，将bin/www里的代码复制到index.js中后即可删除bin目录，并对代码中导入的app模块路径进行修改；由于3000端口默认会被 Vercel 使用，所以 Express 服务要换个端口，在index.js中修改预设的3000端口

  5. 在package.json中的scripts下添加

    1
    "build": "node ./index.js"

  6. 下载 @vercel/node 包

    1
    npm i @vercel/node -S

  7. 在根目录创建vercel.json，写入以下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
        "version": 2,
        "builds": [{
            "src": "index.js",
            "use": "@vercel/node"
        }],
        "routes": [{
            "src": "/(.*)",
            "dest": "/"
        }]
    }

四、部署 Node 服务

本地测试

1
vercel dev

部署服务

1
vercel

后续部署时会提示Deployed to production. Run vercel --prod to overwrite later，所以要更新应用（资源）

1
vercel --prod

五、使用模板

可以使用我的Express.js Starter快速创建支持vercel部署的Express + Prisma项目

 评论
  1. 一、注册vercel
  2. 二、安装vercel
  3. 三、创建Express项目
  4. 四、部署 Node 服务
  5. 五、使用模板