宝塔部署 Vue + NestJS 全栈项目

article/2025/7/14 16:01:40

这里写自定义目录标题

  • 前言
  • 一、Node.js版本管理器
    • 1、安装
    • 2、配置
  • 二、NestJS项目管理(等同Node项目)
    • 1、Git安装
    • 2、拉取项目代码
    • 3、无法自动认证
    • 4、添加Node项目
    • 5、配置防火墙(两道)
  • 三、Vue项目管理
    • 1、项目上传
    • 2、Nginx安装
    • 3、配置防火墙(两道)
  • 四、MongoDB
    • 1、安装
    • 2、安全认证
    • 3、配置防火墙(两道)
  • 五、Redis
    • 1、安装
    • 2、配置
    • 3、配置防火墙(两道)
  • 总结

前言

之前写过一篇宝塔部署nodejs项目,当时使用的pm2工具。后来pm2下架了,这次使用 Node.js版本管理器 工具。部署操作前,请先准备好你的 Vue 和 NestJS 项目代码,打开你的服务器和宝塔面板,我们这就开始。

一、Node.js版本管理器

1、安装

打开宝塔面板-软件商店,搜索pm2。

在这里插入图片描述

可以看到该工具已下架,提示使用 Node.js版本管理器,我们直接安装系统推荐的 2.6版本 。建议都安装系统推荐版本,除非你对各软件版本非常熟悉,下面会举例遇到的版本问题。

2、配置

在这里插入图片描述

打开 Node.js 版本管理器,你会发现列举的Node版本很少。可以点击右上角 更新版本列表 来获取所有Node版本,然后左上角选择 显示所有版本 就能选择你的Node版本了。

Node安装完成后,命令行版本选择 你的Node版本 。在下面Node版本列表中,右边 模块 可以进行模块管理,例如:pnpm

在这里插入图片描述

二、NestJS项目管理(等同Node项目)

1、Git安装

我们这里选择用 git 来管理项目代码。

在这里插入图片描述

在软件商店中搜索git没有想要的结果,这里选择命令行下载,在左侧菜单打开终端,输入相应系统的命令行进行下载。

  • CentOS/RedHat:
yum install -y git
  • Ubuntu/Debian:
apt-get update
apt-get install -y git

安装完成后输入命令行查看版本

git -v

在这里插入图片描述

当前 git 版本: 2.43.5

2、拉取项目代码

这里使用的 Gitee 管理远程仓库,打开仓库的 克隆/下载
在这里插入图片描述
在这里插入图片描述

按照提示,执行命令完成配置,并将 公钥 配置到仓库中。简单说一下,个人设置中有 SSH公钥,仓库设置中有 公钥管理。后者只能访问本仓库,并且只允许以 只读 的方式访问仓库。

完成配置后打开宝塔面板,打开左侧文件菜单,进入 根目录 > www > wwwroot 目录,在当前目录打开 终端,把上面 git clone 命令复制到 终端 执行。

在这里插入图片描述

3、无法自动认证

在这里插入图片描述

如果你遇到 无法自动认证 问题,打开左侧 安全 菜单,打开 SSH开关 即可解决。

在这里插入图片描述

4、添加Node项目

现在你的项目代码已经拉取到服务器中,地址:根目录 > www > wwwroot > your-project。下面打开左侧 网站 菜单,切换到 Node项目 导航栏,打开 添加Node项目

在这里插入图片描述

这里我们添加一个 默认项目

在这里插入图片描述

在项目目录选择 根目录 > www > wwwroot > your-project 导入项目,项目名称启动选项 会自动获取。

package.json

启动模式

启动选项 自动获取package.json文件中的启动模式,选择 build:nest build。启动模式是自定义的,不一定和这里相同。

包管理器注意和本地环境相同,后面的 不安装node_module 是智能勾选,如果你手动安装过就默认取消勾选。

确定添加项目后,项目会自动运行并构建生产环境代码 your-project/dist,项目的状态应该为 运行中

在这里插入图片描述

如果状态是其他,可以打开右侧 设置 > 项目日志 查看报错信息。

your-project/dist 构建完成后,如果没有连接数据库操作,打开右侧 设置 > 项目配置 > 启动选项 改成 start:prod:NODE_ENV=prod node dist/main,保存修改。prod 是根据环境文件 .env.prod 获取的,可以自定义。

5、配置防火墙(两道)

打开左侧 安全 菜单,开启防火墙 并且 添加端口规则,端口填写 your-project 监听的端口。(如果需要连接数据库,下面有Mongodb和Redis的连接步骤

打开 服务器面板,对防火墙执行相同操作。然后回到 宝塔面板 > 网站,重启你的项目。使用apifox/postman请求接口验证是否成功。

三、Vue项目管理

前端项目有两种部署方式,第一种是静态文件托管,第二种是前端独立部署(CDN或Nginx)。这里选择Nginx部署。

1、项目上传

宝塔面板 > 文件根目录 > www > wwwroot 目录下,新建一个 vue-demo 文件夹,进入文件夹,将你前端项目打包后的dist文件夹中所有文件上传。此处默认你的公共基础路径(vite中的base)为 ./

在这里插入图片描述

2、Nginx安装

在软件商店直接安装即可,系统置顶推荐是 1.24版本,这里就选它。

打开 Nginx > 配置文件,按照下面修改

server{listen 888; // 端口,默认888server_name host; // 主机,IP或域名#error_page   404   /404.html;include enable-php.conf;# Vue前端配置location / {root /www/wwwroot/vue-demo; // 前端项目地址try_files $uri $uri/ /index.html; // 路由相关index index.html; // 入口文件}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${root /www/wwwroot/vue-demo; // 图像地址,别忘!expires      30d;}location ~ .*\.(js|css)?${root /www/wwwroot/vue-demo; // js|css 地址,别忘!expires      12h;}location ~ /\.{deny all;}# NestJS API 代理location /prod-api/ {proxy_pass http://host:port/; // 代理地址proxy_http_version 1.1;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";# 超时设置proxy_connect_timeout 60s;proxy_send_timeout 60s;proxy_read_timeout 60s;send_timeout 60s;}access_log  /www/wwwlogs/access.log;}

这步主要遇到的问题就是网页能打开,引用 js|css 一直是 404。注意,图像和js|css的地址不要忘记配置。

3、配置防火墙(两道)

这一步和前面一样,换一个监听端口,不再重复。

配置成功后重启Nginx服务,网页打开 host:888 就能正常打开了。

四、MongoDB

1、安装

在软件商店中下载系统置顶推荐的 7.0.8版本,为什么我前面要说一句 建议都安装系统推荐版本 呢,这儿就是原因。因为我本地开发下载的MongoDB8.0,本着环境统一原则也想安装8.0版本。下拉找到了,但是安装一直失败。网上寻求帮助后,大致结论就是宝塔上的8.0存在问题。

2、安全认证

上面只是个小问题,宝塔的MongoDB 还存在一个离谱问题。正常情况下,MongoDB都会开启安全认证,在此之前,我们先通过 终端 添加几个用户。

// mongo shell 工具
mongosh// 切换 admin 数据库
use admin// 创建用户
db.createUser({user: "root",pwd: "123456",roles: [{ role: "root", db: "admin" }]
})db.createUser({user: "admin",pwd: "123456",roles: [{ role: "userAdminAnyDatabase", db: "admin" }]
})// 切换 new_db 数据库,不存在的话新建并切换
use new_dbdb.createUser({user: "newAdmin",pwd: "123456",roles: [{ role: "dbOwner", db: "new_db" }]
})

创建用户成功,该开启安全认证了。打开 软件商店 > MongoDB
注意! 千万不要通过 配置项 去修改安全认证!
注意! 千万不要通过 配置项 去修改安全认证!
注意! 千万不要通过 配置项 去修改安全认证!
它会导致 根目录 > www > server > mongodb > log > configsvr.pid 文件丢失,更严重的是,卸载重装也没用!我最终是重置系统解决的。

建议通过配置文件修改:

net:port: 27017bindIp: 0.0.0.0security:authorization: enabledjavascriptEnabled: false

主要修改 bindIpauthorization 这两个,保存修改内容。

3、配置防火墙(两道)

这一步和前面一样,换一个监听端口,不再重复。

配置成功后重启MongoDB服务,通过终端命令测试连接是否成功

telnet host port

五、Redis

1、安装

在软件商店中下载系统置顶推荐的 7.4.3版本

2、配置

打开 Redis > 配置文件 修改:

bind 0.0.0.0requirepass 123456

bind:绑定IP
requirepass:redis密码

3、配置防火墙(两道)

这一步和前面一样,换一个监听端口,不再重复。

配置成功后重启MongoDB服务,通过终端命令测试连接是否成功

telnet host port

总结

以上我们就完成了 前端+后端+数据库 的部署,前前后后也是踩了不少奇怪的坑,希望能帮到大家。


http://www.hkcw.cn/article/pekLymnbBJ.shtml

相关文章

MES系统:助力企业数字化转型

MES管理系统是一个高效、灵活的生产管理系统,能够帮助企业提高生产效率和产品质量,从而获得更大的商业价值。如果你是一家制造企业,那么MES管理系统是你不能错过的重要工具。 一、MES系统核心功能大揭秘: 1、计划管理&#xff1a…

当客服遇见大模型:知识管理智能化转型

数字化转型浪潮下,客服中心作为企业服务前沿阵地,正经历一场深刻变革。面对日益多元、个性化的客户需求,传统依赖人工维护的知识管理体系已难以为继。AI大模型的崛起,为客服中心开辟了新赛道——这不仅是技术迭代,更是…

[NOIP 2001 普及组] 求先序排列 Java

import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String infixOrder sc.nextLine(); // 中序String postOrder sc.nextLine(); // 后序sc.close();System.out.println(preOrder(infixOrder, postOrder))…

可蓝牙通信、光电隔离型RS-485集线器——DAM-3222

产品概述 DAM-3222是一款防各类浪涌设计光电隔离型RS-485集线器,集成2路RS485路主机和1路RS485从机接口。支持有线串口连接电脑上位机配置,还支持蓝牙通信,手机蓝牙可通过微信小程序进行参数配置,在安装现场也可以轻松通过手机修…

数据结构 --链表

前言 今天把链表重新用c写了一遍,首先单纯的写一个链表并不困难,无非是定义一个结构体ListNode,设置变量data和下一个指针的地址next,然后完成增删查改的操作,需要注意的是在删除节点的时候记得先保存当前需要删除的节…

【原理扫描】不安全的crossdomain.xml文件和CORS(跨站资源共享)原始验证失败验证与彻底方案

不安全的crossdomain.xml文件【原理扫描】 CORS(跨站资源共享)原始验证失败【原理扫描】 吐槽一下 该漏扫是通过内网漏扫部署服务进行扫描内网minio端口探测到该minio配置不当造成的威胁。 通过nginx配置无效,且必须从MINIO本身解决;MINIO配置存在兼容…

【Web应用】若依框架:基础篇11功能详解-系统接口

文章目录 ⭐前言⭐一、课程讲解⭐二、自己动手实操⭐总结 标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈(,NET/Java/Python/C)、数据库、操作系统、大数据、人工智能、工控、网络、…

每日一题:H指数

继续给大家带来每日一题 题目描述 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义:h 代表“高引用次数” ,一名科研人员的 h 指数 是指…

MPU9250_WE库详解

MPU9250_WE库 https://docs.arduino.cc/libraries/mpu9250_we/ https://github.com/wollewald/MPU9250_WE 三款MPU6050、MPU6500、MPU9250陀螺仪 其初始化以及函数应用方法基本一致,创建初始化对象名称有所差异 初始化相关函数 用于初始化传感器。该函数会尝试与传感器建…

onlyoffice docspace 协作空间企业版使用秘籍-1.如何连接外部存储

背景介绍 ONLYOFFICE 协作空间是一个可在自定义房间中协作处理文本文档、电子表格、演示文稿、表格和 PDF 文件的平台。用户可设置灵活的访问权限,与同事、客户及合作伙伴共享房间和文档。最棒的一个功能是支持文档的中文全文检索功能,方便根据内容找到需要的文档。…

openppp2 -- 1.0.0.25225 优化多线接入运营商路由调配

本文涉及到的内容,涉及到上个发行版本相关内容,人们在阅读本文之前,建议应当详细阅读上个版本之中的VBGP技术相关的介绍。 openppp2 -- 1.0.0.25196 版本新增的VBGP技术-CSDN博客 我们知道在现代大型的 Internet 网络服务商,很多…

Predixy的docker化

概述 当前已有一套redis cluster的集群,但是fs中的hiredis只能配置单实例redis。 AI了一下方案,可以使用redis的proxy组件来实现从hiredis到redis cluster的互通。 代码地址:https://github.com/joyieldInc/predixy Predixy特性介绍&…

Fusion引擎赋能:流利说如何用阿里云Serverless Spark实现数仓计算加速

作者:流利说 Ibson(大数据负责人)/ Bruce(数据工程师) 背景介绍 行业 流利说是领先的科技驱动的教育公司,公司自主研发了领先的英语口语评测、写作打分引擎和深度自适应学习系统,致力于为用户…

Leetcode 340. 至多包含 K 个不同字符的最长子串

1.题目基本信息 1.1.题目描述 给你一个字符串 s 和一个整数 k ,请你找出 至多 包含 k 个 不同 字符的最长子串,并返回该子串的长度。 1.2.题目地址 https://leetcode.cn/problems/longest-substring-with-at-most-k-distinct-characters/description…

历年中南大学计算机保研上机真题

2025中南大学计算机保研上机真题 2024中南大学计算机保研上机真题 2023中南大学计算机保研上机真题 在线测评链接:https://pgcode.cn/school 进制转换 题目描述 请写出一段程序,将十进制数字转为八进制。 输入格式 第一行输入 T T T ( 1 ≤ T ≤…

【js逆向】某某省过验证码逆向

查看响应 查看验证码包 send里面就是载荷的密文 向上跟栈 进入到i里面 找到params的加密处 断点,刷新 提示少扣取 报错:st is not defined 全部扣完后发现不报错但是没输出: 一个难以发觉的错误,大量扣取,不容易被发现…

土耳其总统:支持俄乌代表团的谈判继续推进

当地时间5月30日,土耳其总统埃尔多安与乌克兰总统泽连斯基通电话。双方讨论了两国双边关系以及地区与全球局势。△土耳其总统埃尔多安(资料图)埃尔多安在对话中表示,土耳其将继续努力推动乌克兰与俄罗斯之间实现公正与持久的和平。土耳其支持两国代表团在伊斯坦布尔开启的谈…

下一代液晶显示底层技术与九天画芯的技术突围

一、液晶产业:撑起数字经济的显示脊梁 (一)全球显示市场的核心支柱 作为电子信息产业的战略基石,液晶显示(LCD)占据全球平板显示市场超 60% 的份额,2022 年全球市场规模达 782.41 亿元&#xf…

工控机安装lubuntu系统

工控机安装lubuntu系统指南手册 1. 准备 1个8G左右的U盘 下载Rufus: Index of /downloads 下载lubuntu系统镜像: NJU Mirror Downloads – Lubuntu 下载Ventoy工具: Releases ventoy/Ventoy GitHub 下载后,解压&#…

完整解析 Linux Kdump Crash Kernel 工作原理和实操步骤

完整解析 Linux Kdump Crash Kernel 工作原理和实操步骤 一、前言 在使用 Linux 操作系统进行内核开发或者系统维护时,内核 panic 是最常见的系统崩溃环节。如果想要在内核崩溃后立即分析环境和输出内核内存 dump,Kdump crashkernel 是最接近完美的解…