通过Vercel部署前端项目和node服务

基础设施建设

vercel 可以用 vc 来代替，vc 是 Vercel 的缩写

全局安装vercel


npm i vercel -g

登录vercel


vercle-node % vercel login
Vercel CLI 28.18.3
? Log in to Vercel github
> Success! GitHub authentication complete for stefan_ysh@foxmail.com
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

部署

部署静态资源

创建静态资源，随便一个 html 文件即可

进入到静态资源根目录，此处为 vercel-test

执行，命令 vercel dev 进行本地开发，检验应用是否正常运行

Info in the terminal


ysh@yuanshuaideMBP vercel-test % vercel dev
Vercel CLI 28.18.3
? Set up and develop “~/Desktop/vercel-test”? [Y/n] y
? Which scope should contain your project? stefan-ysh
? Link to existing project? [y/N] n
? What’s your project’s name? vercel-test
? In which directory is your code located? ./
Local settings detected in vercel.json:
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Development Command: None
- Install Command: `yarn install`, `pnpm install`, or `npm install`
- Output Directory: `public` if it exists, or `.`
? Want to modify these settings? [y/N] n
🔗  Linked to stefan-ysh/qwe (created .vercel and added it to .gitignore)
> Ready! Available at http://localhost:3000

执行命令 vercel 部署到 vercel

Info in the terminal


ysh@yuanshuaideMBP vercel-test % vercel
Vercel CLI 28.18.3
🔍  Inspect: https://vercel.com/stefan-ysh/vercel-test/4oV1QbRanV9v [2s]
✅  Production: https://vercel-test-ebon.vercel.app [7s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/stefan-ysh/vercel-test/settings

# 说明
1. 🔍：部署在 vercel 上的项目地址
2. ✅：部署之后生成的可供访问的项目链接
3. 📝：如果需要更新内容，直接执行 vercel --prod 即可
4. 💡：项目设置中心地址，点击进入项目设置，可设计域名等信息

此时，访问链接 https://vercel-test-ebon.vercel.app 即可看到静态资源内容

部署服务

新建项目

code


mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js

编写 index.js中的内容

index.js


const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    ctx.body = 'Hello Vercel';
});

app.listen(3008, () => {
    console.log('3008项目启动')
});

PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口

再 package.json 中增加构建命令

package.json


{
  "name": "vercle-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vercel/node": "^2.10.2",
    "koa": "^2.14.1"
  }
}

增加 vercel.json 用来配置和覆盖 vercel 默认行为

执行 npm i @vercel/node -S 安装@vercel/node 模块
填写 vercel.json 配置信息

vercel.json


{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ]
}

开发和部署同静态资源，至此，就完成了 Koa 服务的部署，与部署静态资源多了两个步骤下载 @vercel/node 和配置 vercel.json

参考

https://juejin.cn/post/7094911994226016292