如何将 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 分钟前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
sleeppingfrog10 分钟前
zebra通过zpl语言实现中文打印(二)
javascript
lang2015092812 分钟前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC1 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务2 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
baidu_247438612 小时前
Android ViewModel定时任务
android·开发语言·javascript
嘿起屁儿整2 小时前
面试点(网络层面)
前端·网络
VT.馒头2 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
有位神秘人2 小时前
Android中Notification的使用详解
android·java·javascript
phltxy3 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js