宝塔部署 Vue + NestJS 全栈项目

前言

之前写过一篇宝塔部署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

主要修改 bindIp 和 authorization 这两个，保存修改内容。

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.0requirepass 123456

bind：绑定IP
requirepass：redis密码

3、配置防火墙（两道）

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

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

telnet host port

总结

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