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

☘️ 前言

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

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

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

🌳 准备阶段

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

🌴 部署 Node 服务

  1. 将后端整个文件夹(除了 node_modules)打包上传到服务器
    在这里插入图片描述

  2. 创建数据库,并上传本地数据库文件
    在这里插入图片描述

  3. 复制用户名和密码,打开根目录的 .env 文件,填入用户名和密码:
    在这里插入图片描述

  4. 进入 网站-运行环境-Node.js 面板,点击 创建运行环境,根据自己实际需求填入配置:
    在这里插入图片描述

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

🌵 部署 web 应用

  1. 网站-网站 点击 创建网站,选择 静态网站,填入所需网站信息:
    在这里插入图片描述

  2. 进入网站目录,将 web 应用打包的 dist 文件夹上传并解压:
    在这里插入图片描述

  3. 进入网站配置,设置网站目录,选择刚上传解压的 dist 目录:
    在这里插入图片描述

  4. 进入 网站-证书,点击 上传证书,将申请的证书信息填入
    在这里插入图片描述

  5. 进入网站配置,点击 HTTPS 选项,选择相应的网站证书:
    在这里插入图片描述

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

🌱 配置反向代理

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

进入网站配置,点击反向代理-创建,填入代理信息:
在这里插入图片描述

这样配置后,当我们访问 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 部署经验,可供大家参考,希望对大家有帮助!😘

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Egg.js 项目的合理 ESLint 配置文件模板

Egg.js 项目的合理 ESLint 配置文件模板 安装依赖 npm install eslint babel/eslint-parser eslint-plugin-import eslint-plugin-promise eslint-plugin-node --save-dev extends: 扩展了 eslint-config-egg 以及其他一些常用的插件配置。 parser: 使用 babel/eslint-parse…

如何重置MySQL的root密码

前言 在使用MySQL数据库的过程中,可能会遇到忘记root用户密码的情况。由于root用户拥有最高权限,一旦忘记了这个密码,就无法通过其他用户来重置。本文将详细介绍如何在Windows和Linux环境下重设MySQL root用户的密码。 适用环境 操作系统:Windows, LinuxMySQL版本:5.7及…

智慧升级,知识无界:十大搭建知识库软件助你前行

在知识爆炸的时代,如何高效地管理、整合与利用信息,成为了个人与企业发展的核心竞争力。智慧升级,意味着我们不仅要掌握丰富的知识,更要学会运用工具,让知识无界流通,助力个人成长与企业创新。以下是精心挑…

全网最全开放式自动猫砂盆测评!魔铲、cewey、萌娃有什么区别?

最近我发现很多铲屎官在购买开放式自动猫砂盆时,总是会在cewey、魔铲、萌娃之间犹豫,不知道这三款自动猫砂盆到底有什么不同,盲选又怕选错,买了个祖宗回去,今天我就给大家好好说说,cewey、魔铲、萌娃之间&a…

SL3160 dcdc150V降压5.1V/1A 车载GPS定位器供电芯片

一、主要特性 宽输入电压范围:SL3160支持10~150V的宽输入电压范围,使其能够适应各种电源电压波动,确保稳定输出。 高效降压转换:该芯片采用先进的电源管理技术,转换效率高达90%以上,降低了散热压力和整体…

解决xhell连接虚拟机导致小键盘无法使用

我们在使用xhell连接虚拟机的时候经常会出现小键盘输入导致一些乱的字母输入,当然会解决方法也简单只需要在连接的时候调试下设置就好 1打开xhell(我的版本是xhell6) 2.创建连接3,选择vt模式-初始数字键盘模式-设置为普通 4.这些…

flutter 使用三方/自家字体

将字体放入assets/fonts下 在pubspec.yaml文件中flutter下添加如下代码: flutter:fonts:- family: MyCustomFontfonts:- asset: assets/fonts/MyCustomFont.ttf 在flutter Text widget中使用字体 import package:flutter/material.dart;void main() > runApp(…

【计网】深入理解网络通信:端口号、Socket编程及编程接口

目录 1.端口号 1.1.理解源 IP 地址和目的 IP 地址 1.2.认识端口号 1.3.端口号范围划分 1.4理解 "端口号" 和 "进程 ID" 2.socket编程 2.1.理解 socket 2.2.socket编程的概念 2.3. 传输层的典型代表 认识 TCP 协议 认识 UDP 协议 2.3 网络字节序…

Pg数据库命令的导入导出sql方式

导出 pg_dump -U username -W -F p database_name > outputfile.sql 参数说明: -U username:替换为您的PostgreSQL用户名。 -W:在执行命令时提示输入密码。 -F p:指定输出格式为纯文本(默认)。 datab…

常见的材料力学特性

材料特性参数 目录 一、弹性指标 1. 正弹性模量 2. 切变弹性模量 3. 比例极限 4. 弹性极限 二、强度性能指标 1. 强度极限 2. 抗拉强度 3. 抗弯强度 4. 抗压强度 5. 抗剪强度 6. 抗扭强度 7. 屈服极限(或者称屈服点) 8. 屈服强度 9. 持久…

【OpenAI】第六节(语音生成与语音识别技术)从 ChatGPT 到 Whisper 的全方位指南

前言 在人工智能的浪潮中,语音识别技术正逐渐成为我们日常生活中不可或缺的一部分。随着 OpenAI 的 Whisper 模型的推出,语音转文本的过程变得前所未有的简单和高效。无论是从 YouTube 视频中提取信息,还是将播客内容转化为文本,…

ChatGLM-6B和Prompt搭建专业领域知识问答机器人应用方案(含完整代码)

目录 ChatGLM-6B部署 领域知识数据准备 领域知识数据读取 知识相关性匹配 Prompt提示工程 领域知识问答 完整代码 本文基于ChatGLM-6B大模型和Pompt提示工程搭建医疗领域知识问答机器人为例。 ChatGLM-6B部署 首先需要部署好ChatGLM-6B,参考 ChatGLM-6B中英双…

WPF+Mvvm项目入门完整教程-基于SqlSugar的数据库实例(三)

目录 数据库实现创建数据库类库资源获取 在上一节中,我们实现了主页UI框架和基础菜单功能,本节主要实现数据库的类库创建、数据功能接口以及泛型方法实现。本例使用的数据库为 MySql数据库,ORM框架采用 SqlSugar 实现。 数据库实现 创建数据…

Socket通信基础

1 基本概念 socket是操作系统提供的一套标准化网络编程接口,应用程序调用这些接口,可以编写出服务端(Server)和客户端(Client)的socket程序,两端的socket通过特定的IP地址和端口连接起来&#…

短视频账号矩阵系统源码---独立saas技术部署

#短视频账号矩阵系统# #短视频矩阵源码# #短视频账号矩阵系统技术开发# 抖音seo账号矩阵系统,短视频矩阵系统源码, 短视频矩阵是一种常见的视频编码标准,通过多账号一键授权管理的方式,为运营人员打造功能强大及全面的“矩阵式“…

html 轮播图效果

轮播效果: 1、鼠标没有移入到banner,自动轮播 2、鼠标移入:取消自动轮播、移除开始自动轮播 3、点击指示点开始轮播到对应位置 4、点击前一个后一个按钮,轮播到上一个下一个图片 注意 最后一个图片无缝滚动,就是先克隆第一个图片…

Linux -- 进程间通信、初识匿名管道

目录 进程间通信 什么是进程间通信 进程间通信的一般规律 前言: 管道 代码预准备: 如何创建管道 -- pipe 函数 参数: 返回值: wait 函数 参数: 验证管道的运行: 源文件 test.c : m…

独孤思维:新学员副业一周出单

所谓的一万小时定律。 即在某个技能上面,花费超过1万小时。 如果每天刻意练习1小时,则需要30年。 可行吗? 极难。 所以不要过分迷恋这种定律。 对于我们普通人而言,可以训练一个月或者三个月,即可掌握某项技能。…

深入解析:Linux tcpdump命令在网络流量分析中的实战应用

tcpdump是一个强大的命令行工具,用于捕获和分析TCP、UDP、ICMP等协议的网络流量。 功能与用途 捕获网络流量:tcpdump可以捕获和显示来自本地计算机或通过网络传输的数据包,提供有关数据包的详细信息,如源和目的IP地址、端口号、…

Python正则表达式(re模块)的正确匹配详解

基本匹配及一些符号的特定含义 正则表达式是用于处理文本的强大工具,在Python中通过 re 模块来使用。 基本匹配 - 首先要导入 re 模块。例如,要在字符串中查找简单的单词 apple ,可以这样写: import re text "I have an a…