乐闻世界logo
第 3 / 24 篇

一文教会你如何使用 Vercel 部署你的 NestJS 应用

第 3 / 24 篇
1 零基础入门 Nestjs 开发教程2基于Nestjs实现node发送邮件3一文教会你如何使用 Vercel 部署你的 NestJS 应用 4NestJS 如何进行服务端推送SSE、自定义服务端推送内容5如何在 NestJS 中集成 MongoDB 并实现数据的增删改查操作6如何在 NestJS 中集成 Redis 并基于 Redis 实现接口访问限频率7基于 NestJS 集成 ElasticSearch 实现模糊搜索功能8如何在 NestJS 项目中优雅的使用发布订阅工具 Event Emitter9一篇文章学会使用 NestJS 的 Module 实现高效的代码模块管理10一篇文章学会如何使用 NestJS 的五种 Provider 提供者11 一篇文章学会如何使用 NestJS 的 管道Pipes 实现高效的数据转换和验证12基于 NestJS 操作 TypeORM 中的多对多 ManyToMany13基于 NestJS 操作 TypeORM 中的一对多 OneToMany14一篇文章学会如何使用 NestJS 的 Guards 守卫实现系统身份验证和授权15一篇文章学会 NestJS 中间件的使用,让你的应用更灵活和可扩展16一篇文章学会如何使用 NestJS 过滤器处理全局异常情况17一篇文章学会 NestJS 的拦截器并且附带实战操作案例18NestJS 如何实现接口多版本控制19如何在 NestJS 中安全高效的管理 Config 配置20一篇文章掌握 NestJS 所有的生命周期以及执行时机21如何在 Nest 项目中自定义装饰器22NestJS 基于 Passort 和 JWT Token 实现接口的权限管理23基于NestJS 和 TypeORM 实现 CURD RESTful API接口24探索 @nestjs/cqrs:在 NestJS 中实现命令查询责任分离模式CQRS
返回教程主页

一文教会你如何使用 Vercel 部署你的 NestJS 应用

这篇文章详细解析了如何使用Vercel免费部署Nestjs项目的步骤。首先,我们需要在Nestjs项目中添加Vercel的配置文件。接着,我们将项目上传到GitHub,然后授权给Vercel。选择GitHub上的项目,通过Vercel平台创建新项目并完成部署。此外,如果你想使用个人域名访问你的服务,Vercel也提供了这样的支持,你只要有一个通过备案的个人域名,就可以将其配置到你的Vercel项

背景

当我们学习nestjs框架想跟朋友分享自己的接口,当我们开发了自己的应用想对外开放给其他人使用,我们需要一台有公网IP的电脑设备。

在各大云厂商平台掏钱购买云服务器是一个不错的选择(目前云厂商都有拉新的活动,想尝鲜的同学还是低成本的尝试一下的https://blog.csdn.net/m0_37890289/article/details/109709131

但是,在我们学习或者业务体量较小的阶段,能够白嫖服务器资源肯定是一件让人快乐的事。Vercel平台就是这样的平台,它支持免费部署各种服务。

本文会详细记录Vercel 部署Nestjs项目的步骤。

实现步骤

一、Nestjs 项目添加 vercel 配置文件

在nest项目的根目录下创建 vercel.json 文件,并且设置 nestjs 服务相关的配置。

javascript
{ "version": 2, "builds": [ { "src": "src/main.ts", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "src/main.ts", "methods": [ "GET", "POST", "PUT", "DELETE", "PATCH" ] } ] }

二、Nestjs 项目上传到github

  1. 创建新的 github 仓库

    Untitled.png

    Untitled.png

  2. 本地项目关联 github 新建的仓库

    javascript
    git remote add origin https://github.com/levenx/customer-service-server.git
  3. 本地代码推送到 github

    javascript
    git push --set-upstream origin main

    代码成功推送到 github

    Untitled.png

  4. 将项目授权给 vercel

    🎯 访问地址:https://github.com/settings/installations

    Untitled.png

    搜索对应的项目,关联后记得save

    Untitled.png

三、Vercel 平台新建项目

⛱️ 如果还没有 vercel 账号的同学,需要首先注册 vercel 账号(直接使用github授权登录即可)

登录地址 https://vercel.com/login

  1. 新建 vercel 项目

    Untitled.png

  2. 搜索项目,接着执行 import

    Untitled.png

  3. 修改打包命令,并且执行 deploy

    Untitled.png

  4. 部署成功

    Untitled.png

    Untitled.png

感兴趣的同学可以访问我部署的服务地址:

bookmark

至此,我们已经完成了nestjs在vercel平台的部署。

四、自定义个人域名(非必需)

🎯 Vercel 默认给服务分配了临时的域名,同时支持用户配置个人域名(首先要确认自己已经拥有了个人域名,并且国内还需要完成备案)

Untitled.png

  1. 配置个人域名

Untitled.png

  1. 修改域名DNS解析

    Untitled.png

  2. Vercel 检测解析成功

    Untitled.png

  3. 用自己的域名访问服务

https://customer-service.levenx.com

Untitled.png

总结

在学习Nestjs的过程中,将代码部署到公网上让其他人能够访问,是真的很有成就感,Vercel 是一个非常值得白嫖的平台。

如果这篇文章对你有多启发和帮助,请点一下赞表示对笔者的支持,感恩~