Nest.js 实战 (十五):前后端分离项目部署的最佳实践

简介: 这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用,并将其部署到生产环境。文章涵盖了准备阶段,包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节,包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后,作者总结了部署经验,并希望对读者有所帮助。

☘️ 前言

本项目是一个采用现代前端框架 Vue3 与后端 Node.js 框架 Nest.js 实现的前后端分离架构的应用。Vue3 提供了高性能的前端组件化解决方案,而 Nest.js 则利用 TypeScript 带来的类型安全和模块化优势构建了一个健壮的服务端应用。通过这种技术栈组合,我们不仅实现了快速开发,同时也保证了应用的可维护性和扩展性。

随着项目的开发完成,接下来将详细介绍如何将这个应用部署到生产环境,以便让最终用户能够访问并使用我们的服务。

这里以 1Panel面板 为例,其它的运维平台应该大差不差。

🌳 准备阶段

  • 云服务器: 安装 1Panel面板,并安装后端服务数据库。
  • 域名:完成实名认证,并完成域名备案。
  • SSL 证书:建议使用,可在腾讯云 SSL申请免费证书。

🌴 部署 Node 服务

  1. 将后端整个文件夹(除了 node_modules)打包上传到服务器
    0no3a5zfy2ra8uwv8gadt0ustx4f3pap.png

  2. 创建数据库,并上传本地数据库文件
    8rex2ni4n3g1hiio53iaztg7fxvp08ls.png

  3. 复制用户名和密码,打开根目录的 .env 文件,填入用户名和密码:
    4e9rk4b0r9nrs6pac8o0tzaludd2h9io.png

  4. 进入 网站-运行环境-Node.js 面板,点击 创建运行环境,根据自己实际需求填入配置:
    wu3lybum9rmc821a8mbwneccczaxv3dd.png

  5. 稍等几分钟,如果看到状态显示 已启动,并且查看日志无报错异常,则说明服务运行正常,这里记住端口号,等下我们部署前端应用做反向代理会用到。

🌵 部署 web 应用

  1. 网站-网站 点击 创建网站,选择 静态网站,填入所需网站信息:
    ujt8xus9zzxmiz32p5k83bw1g0ei1n67.png

  2. 进入网站目录,将 web 应用打包的 dist 文件夹上传并解压:
    zuj2ld2gla01k58p63rrbyuempalmkmv.png

  3. 进入网站配置,设置网站目录,选择刚上传解压的 dist 目录:
    f8xcjde00l3zrwrebc6z1c2lci28opst.png

  4. 进入 网站-证书,点击 上传证书,将申请的证书信息填入
    e7afoup4wnl9ubzolzne0uc1o0sgmp2k.png

  5. 进入网站配置,点击 HTTPS 选项,选择相应的网站证书:
    etyt0y5urf4i2ixnyme1ac5y7t2zef5h.png

到这里,我们的 web 应用就部署成功了,打开域名应该就能看到网站信息了。但这时候还不能访问后端服务,我们需要做反向代理,将接口请求转发到后端服务。

🌱 配置反向代理

一般现在前后端分离项目,前端的接口请求都有一个共同前缀,比如:/api等。

进入网站配置,点击反向代理-创建,填入代理信息:
39fsz5fkq2c5kz9lxetzg1brz65wbptm.png

这样配置后,当我们访问 https://vue3.baiwumm.com/api/login 的地址时,服务器内部会做一个转发,相当于访问了服务器内部的:http:127.0.0.1:6689/login 请求。

如果有多个接口前缀,或者有其他如图片服务的前缀,那就配置多个代理,道理是一样的。

如果顺利的话,重新刷新页面,就能看到前端能正常请求数据了。

🪴 常见问题

这里罗列一下项目部署中我遇到最常见的问题:

  1. 前端请求接口,页面直接报 404
    答:这个是网站的反向代理没有成功,检查一下网站配置中的反向代理配置,看看是不是前缀不一致等问题。

  2. 前端请求接口,服务报 502
    答:这个是网站的反向代理成功了,但是后端服务没启动成功,检查一下 Node.js 服务日志是否有报错,状态是否显示 已启动 绿色标志。

  3. 接口能正常请求,但 sql 语句报错
    答:这个是后端服务启动成功了,前端也能正常请求,但可能由于数据库缺失表,或者服务本身 sql 语句有误,检查数据库每张表的信息是否完整,根据 sql 报错信息检查。

这几个问题是我部署过程中最常见的问题,如果是首次部署,也许可能会遇到各种奇奇怪怪的问题,我们可问度娘或者有经验的开发者,一一排查解决。
祝君部署应用一路绿灯!

🌹 总结

本篇文章是根据我的项目 Vue3 Admin 部署经验,可供大家参考,希望对大家有帮助!😘

相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
3月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
28天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
43 0
|
2月前
|
数据采集 JSON 前端开发
JavaScript逆向爬虫实战分析
JavaScript逆向爬虫实战分析
31 4
|
2月前
|
前端开发 JavaScript API
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(二)
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(二)
23 2
|
2月前
|
前端开发 JavaScript API
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
26 1
|
3月前
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下,为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念,并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例,并以一个效果演示结束,总结SSE在Nest.js中的应用。
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
|
3月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
98 11