如何将 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 服务部署到公网上了,如果将我们已经提前部署有了数据库服务或者使用免费的数据库服务,那么这个方法一定是开发个人项目的一个好神器。

相关推荐
爱装代码的小瓶子10 分钟前
【C++与Linux基础】进程间通讯方式:匿名管道
android·c++·后端
数研小生13 分钟前
亚马逊商品列表API详解
前端·数据库·python·pandas
你听得到1115 分钟前
我彻底搞懂了 SSE,原来流式响应效果还能这么玩的?(附 JS/Dart 双端实战)
前端·面试·github
不倒翁玩偶16 分钟前
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
前端·npm·node.js
奔跑的web.18 分钟前
UniApp 路由导航守
前端·javascript·uni-app
程序员良许19 分钟前
嵌入式处理器架构
后端·单片机·嵌入式
EchoEcho22 分钟前
记录overflow:hidden和scrollIntoView导致的页面问题
前端·css
MrSYJ23 分钟前
Redis 做分布式 Session
后端·spring cloud·微服务
Cache技术分享24 分钟前
318. Java Stream API - 深入理解 Java Stream 的中间 Collector —— mapping、filtering 和 fla
前端·后端