宝塔部署 Vue + NestJS 全栈项目

news2025/6/5 15:37:54

宝塔部署 Vue + NestJS 全栈项目

  • 前言
  • 一、Node.js版本管理器
    • 1、安装
    • 2、配置
  • 二、NestJS项目管理(等同Node项目)
    • 1、Git安装
    • 2、拉取项目代码
    • 3、无法自动认证
    • 4、添加Node项目
    • 5、配置防火墙(两道)
  • 三、Vue项目管理
    • 1、项目上传
    • 2、Nginx安装
    • 3、配置防火墙(两道)
  • 四、MongoDB
    • 1、安装
    • 2、安全认证
    • 3、配置防火墙(两道)
    • 4、导入导出本地数据库
  • 五、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; // 端口,默认888
        server_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_db

db.createUser({
	user: "newAdmin",
	pwd: "123456",
	roles: [{ role: "dbOwner", db: "new_db" }]
})

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

建议通过配置文件修改:

net:
  port: 27017
  bindIp: 0.0.0.0
  
security:
  authorization: enabled
  javascriptEnabled: false

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

3、配置防火墙(两道)

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

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

telnet host port

4、导入导出本地数据库

现在我们服务器上还没有任何数据,可以把本地数据库导出导入到服务器中。

在Windows系统上MongoDB8.0是将工具和mongodDB本体分开的,你需要单独下载 MongoDB Database Tools。

4.1 导出数据库使用 mongodump

mongodump --host 主机 --port 端口 --username 用户名 --password 密码 --authenticationDatabase admin -d 数据库名称 --gzip

authenticationDatabase 通常是创建用户时指定的数据库,默认为 admin
--gzip 是将数据库导出成压缩文件。

4.2 导入数据库使用 mongorestore

mongorestore --uri="mongodb://用户名:密码@主机:端口/数据库名称?authSource=admin" --gzip /备份路径

authSource 是授权来源,通常都是 admin。备份路径可以是相对路径或绝对路径,假如在 根目录 > www > wwwroot 目录下新建 mongodb 目录,把上面本地数据库导出的文件上传到 mongodb 目录下,在 wwwroot 目录下打开终端,此时备份路径的相对路径就是 ./mongodb/

五、Redis

1、安装

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

2、配置

打开 Redis > 配置文件 修改:

bind 0.0.0.0

requirepass 123456

bind:绑定IP
requirepass:redis密码

3、配置防火墙(两道)

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

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

telnet host port

总结

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

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

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

相关文章

# [特殊字符] Unity UI 性能优化终极指南 — LayoutGroup篇

🎯 Unity UI 性能优化终极指南 — LayoutGroup篇 🧩 什么是 LayoutGroup? LayoutGroup 是一类用于 自动排列子节点 的UI组件。 代表组件: HorizontalLayoutGroupVerticalLayoutGroupGridLayoutGroup 可以搭配: Conte…

2024-2025-2-《移动机器人设计与实践》-复习资料-8……

2024-2025-2-《移动机器人设计与实践》-复习资料-1-7-CSDN博客 08 移动机器人基础编程 单选题(6题) 在ROS中,用于移动机器人速度控制的消息类型通常是? A. std_msgs/StringB. geometry_msgs/TwistC. sensor_msgs/ImageD. nav_ms…

如何监测光伏系统中的电能质量问题?分布式光伏电能质量解决方案

根据光伏相关技术规范要求,通过10(6)kV~35kV电压等级并网的变流器类型分布式电源应在公共连接点装设满足GB/T 19862要求的A级电能质量监测装置。用于监测分布式光伏发出的电能的质量,指标包括谐波、电压偏差、电压不平衡度、电压波动和闪变等。 CET中电…

SPL 轻量级多源混算实践 4 - 查询 MongoDB

除了以上常见数据源,还有 NoSQL、MQ 等数据源,其中以 MongoDB 最为常用。我们用 SPL 连接 MongoDB 做计算。 导入 MongoDB 数据。 外部库 SPL 支持的多种数据源大概分两类,一类是像 RDB 有 JDBC 直接使用,或者文件等直接读取&a…

Maestro CLI云端测试以及github cl,bitrise原生cl的测试流程

昨天我们了解了maestro测试框架以及maestro studio工具以及创建我们的第一个flow,然后通过例子在maestro cli云端进行测试请求并且成功,今天我们就在我们自己的app上简单的进行三种测试流程,maestro cli云端测试,github cl集成测试…

25年宁德时代新能源科技SHL 测评语言理解数字推理Verify题库

宁德时代新能源科技的SHL测评中,语言理解部分主要考察阅读理解、逻辑填空和语句排序等题型,要求应聘者在17分钟内完成30题。阅读理解需要快速捕捉文章主旨和理解细节信息;逻辑填空则要根据语句逻辑填入最合适的词汇;语句排序是将打…

AutoGenTestCase - 借助AI大模型生成测试用例

想象一下,你正在为一个复杂的支付系统编写测试用例,需求文档堆积如山,边缘场景层出不穷,手动编写让你焦头烂额。现在,有了AutoGenTestCase,这个AI驱动的“测试用例生成机”可以从需求文档中自动生成数百个测…

vue+cesium示例:3Dtiles三维模型高度调整(附源码下载)

接到一位知识星友的邀请,实现他需要3Dtiles三维模型的简单高度调整需求,适合学习Cesium与前端框架结合开发3D可视化项目。 demo源码运行环境以及配置 运行环境:依赖Node安装环境,demo本地Node版本:推荐v18。 运行工具:…

线程池RejectedExecutionException异常

文章目录 1、报错2、定位3、修复4、线程池使用的一点思考 1、报错 检索项目日志时,发现一个异常堆栈信息,核心报错: java.util.concurrent.RejectedExecutionException: Task java.util.concurrent.CompletableFuture$AsyncSupply480a10c7…

当 “欧洲版 Cursor” 遇上安全危机

在 AI 编程助手蓬勃发展的当下,安全问题正成为行业不容忽视的隐忧。近期,AI 编程助手公司 Replit 与号称 “欧洲版 Cursor” 的 Lovable 之间,因安全漏洞问题掀起了一场风波,引发了业界的广泛关注。​ Replit 的员工 Matt Palmer…

【如何在IntelliJ IDEA中新建Spring Boot项目(基于JDK 21 + Maven)】

AA. 我的开发环境配置与核心工具链解析 一、开发环境全览 C:\Users\Again>java -version java version "21.0.1" 2023-10-17 LTS Java(TM) SE Runtime Environment (build 21.0.112-LTS-29) Java HotSpot(TM) 64-Bit Server VM (build 21.0.112-LTS-29, mixed m…

(Python网络爬虫);抓取B站404页面小漫画

目录 一. 分析网页 二. 准备工作 三. 实现爬虫 1. 抓取工作 2. 分析工作 3. 拼接主函数&运行结果 四. 完整代码清单 1.多线程版本spider.py: 2.异步版本async_spider.py: 经常逛B站的同志们可能知道,B站的404页面做得别具匠心&…

【氮化镓】GaN HMETs器件物理失效分析进展

2021 年 5 月,南京大学的蔡晓龙等人在《Journal of Semiconductors》期刊发表了题为《Recent progress of physical failure analysis of GaN HEMTs》的文章,基于多种物理表征技术及大量研究成果,对 GaN HEMTs 的常见失效机制进行了系统分析。文中先介绍失效分析流程,包括使…

Abaqus连接器弹片正向力分析:

.学习重点: • 外部幾何匯入。 • 建立解析剛性面。 • 利用Partition與局部撒點來提高網格品質。 • 材料塑性行為(材料非線性)。 • 考慮大變形(幾何非線性)。 • 接觸(邊界非線性)。 • 平移組裝。 • 設定輸出參數。 • 討論Shear Locking & Hourglassing效應。 1) 設…

鸿蒙生态再添翼:身份证银行卡识别引领智能识别技术新篇章

随着信创国产化战略的深入推进和鸿蒙操作系统(HarmonyOS Next)的迅速崛起,市场对兼容国产软件生态的需求日益增长。在这一背景下,中安身份证识别和银行卡识别技术应运而生,为鸿蒙生态的发展注入了新的活力。 移动端身份…

NLP学习路线图(十九):GloVe

自然语言处理(NLP)的核心挑战在于让机器理解人类语言的丰富含义。词向量(Word Embeddings)技术通过将词语映射到高维实数空间,将离散的符号转化为连续的向量,为NLP任务奠定了坚实基础。在众多词向量模型中&…

如何使用DAXStudio将PowerBI与Excel连接

如何使用DAXStudio将PowerBI与Excel连接 之前分享过一篇自动化文章:PowerBI链接EXCEL实现自动化报表,使用一个EXCEL宏工作薄将PowerBI与EXCEL连接起来,今天分享另一个方法:使用DAX Studio将PowerBI与EXCEL连接。 下面是使用DAX S…

软考 系统架构设计师系列知识点之杂项集萃(79)

接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(78) 第141题 软件测试一般分为两个大类:动态测试和静态测试。前者通过运行程序发现错误,包括()等方法;后者采用人工和计算机…

UVa12298 Super Joker II

UVa12298 Super Joker II 题目链接题意输入格式输出格式 分析AC 代码 题目链接 UVa12298 Super Joker II 题意 有一副超级扑克,包含无数张牌。对于每个正合数p,恰好有4张牌:黑桃p,红桃p,梅花p和方块p(分别…

【网络安全】SRC漏洞挖掘思路/手法分享

文章目录 Tip1Tip2Tip3Tip4Tip5Tip6Tip7Tip8Tip9Tip10Tip11Tip12Tip13Tip14Tip15Tip16Tip17Tip18Tip19Tip20Tip21Tip22Tip23Tip24Tip25Tip26Tip27Tip28Tip29Tip30Tip1 “复制该主机所有 URL”:包含该主机上的所有接口等资源。 “复制此主机里的链接”:包括该主机加载的第三…