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

相关推荐
装不满的克莱因瓶1 小时前
Java7新特性:try-with-resources写法
java·前端·javascript·jdk·新特性·jdk7
马士兵教育1 小时前
程序员简历如何编写才能凸显出差异化,才能拿到更多面试机会?
开发语言·后端·面试·职场和发展·架构
SailingCoder2 小时前
【 从“打补丁“到“换思路“ 】一次企业级 AI Agent 的架构拐点
大数据·前端·人工智能·面试·架构·agent
~央千澈~2 小时前
抖音弹幕游戏开发之第12集:添加冷却时间机制·优雅草云桧·卓伊凡
java·服务器·前端
CappuccinoRose3 小时前
CSS 语法学习文档(十三)
前端·css·学习·postcss·模块化·预处理器
OpenTiny社区3 小时前
Angular Module→Standalone 架构进化解析
前端·架构·angular.js
哆啦A梦15883 小时前
Vue3魔法手册 作者 张天禹 06_监控
前端·vue.js·typescript
无心水3 小时前
5、微服务快速启航:基于Pig与BladeX构建高可用分布式系统实战
服务器·分布式·后端·spring·微服务·云原生·架构
恋猫de小郭3 小时前
你知道不,你现在给 AI 用的 Agent Skills 可能毫无作用,甚至还拖后腿?
前端·人工智能·ai编程
用户600071819104 小时前
【翻译】用生成器实现可续充队列
前端