如何将 NestJs 应用部署到 vercel,让别的小伙伴也能够访问到你的接口?🐳🐳🐳

文章开始之前分享两个开源项目,会一直维护的,欢迎 star,如果你感兴趣或者想参与学习,可以加我微信 yunmz777,最近也在找工作 ing,欢迎内推......

浪费你两秒钟时间,我们正文开始!!!

Vercel 是一个云平台,专门为前端开发者设计,用于部署和托管网站和前端应用程序。它提供了简单、快速的部署体验,并且非常适合用于现代的 web 项目,特别是那些构建在 React、Vue、Angular、Next.js 等现代 JavaScript 框架上的项目。

可是他也能部署我们的 NestJs 项目,你是否知道呢?

部署 NestJs 应用到 vercel

在 Vercel 上部署 NestJS 应用需要一些特别的配置,因为 NestJS 是一个构建在 Node.js 上的后端框架,而 Vercel 主要是用于部署前端应用和无服务器函数的平台。

首先我们得先创建一个 nestjs 项目并确保它能够在本地运行,如果该应用需要数据库或其他外部服务,那么请确保这些服务可以从公共网络访问

这些都处理完成之后,我们要在 NestJs 项目根目录之下创建一个名为 vercel.json 的文件,该文件用于指定 vercel 的部署配置,如下所示:

json 复制代码
{
  "version": 2,
  "builds": [
    {
      "src": "dist/main.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/main.js"
    }
  ]
}

这个配置假设你的 NestJS 项目被编译到 dist/main.js。确保你的 tsconfig.json 中的编译输出设置正确。

配置完成之后,我们使用要全局安装 vercel cli,如下所示:

bash 复制代码
npm install -g vercel

安装完成之后,执行 vercel -v 能看到如下输出则证明成功了:

在项目目录中打开终端,运行以下命令来登录你的 Vercel 账号:

bash 复制代码
vercel login

因为我们在 vercel 上使用的是 Github 账号登录,并且之后要关联 Github 仓库的,所以这里选择的是 Github 登录,你可以根据需求选择特定的。

登录后,运行以下命令进行部署:

bash 复制代码
vercel

这个命令是需要我们在项目根目录的终端中执行!!!

因为我刚才已经配置了,我这里就不重新写了

在上面的这些选项中,我们来详细讲解一下:

  1. Set up and deploy "~/Desktop/project-name"?:这个选项询问是否要设置并部署位于 ~/Desktop/project-name 目录下的项目。回答"yes"表示你确认要部署这个项目。

  2. Which scope do you want to deploy to? xun082's projects:这个选项询问你想将项目部署到哪个作用域或账户下。这里的 xun082's projects 是我的跟人账号,选择这个意味着你将项目部署到该账户下。

  3. Link to existing project?:这个询问是问你是否想将这次部署链接到一个已经存在的项目。选择"no"意味着你希望创建一个新的项目进行部署。

  4. What's your project's name?:这里让你输入你的项目名称,这个名称将用于在部署平台上标识你的项目。在这个例子中,你输入的是 project-name。

  5. In which directory is your code located?:这个选项询问你的代码位于哪个目录。./ 表示当前目录,意味着你的项目代码就在你执行部署命令的同一个目录中。

当执行完成之后,那么我们就可以看到如下的界面:

当我们访问 Domains 的那个链接时我们就可以访问到我们的 NestJs 服务了。

因为我们的项目是没有添加到 Github 仓库上的,那么我们也可以关联一下 Github 仓库。

点击 Connext git repository,我们会看到这样的页面:

那么这个时候我们就可以选择一个仓库来进行关联了,并且可以选择一个分支,当分支代码发生变更的时候会重新部署,默认是 main 分支。

总结

通过上述步骤我们就可以将我们的 NestJs 服务部署到公网上了,如果将我们已经提前部署有了数据库服务或者使用免费的数据库服务,那么这个方法一定是开发个人项目的一个好神器。

相关推荐
To_OC4 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC4 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
vipbic4 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy4 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志5 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble6 小时前
c端系统,其实更像一个信息展示平台
前端
你怎么知道我是队长6 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯7 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
戮漠summer7 小时前
Missing Semester 计算机教育中缺失的一课 Lecture 01 Shell
开发语言·后端·scala
名字还没想好☜7 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js