宝塔部署 Vue + NestJS 全栈项目

这里写自定义目录标题

• 前言
• 一、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; // 端口，默认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

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

3、配置防火墙（两道）

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

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

telnet host port

五、Redis

1、安装

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

2、配置

打开 Redis > 配置文件 修改：

bind 0.0.0.0

requirepass 123456

bind：绑定IP

requirepass：redis密码

3、配置防火墙（两道）

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

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

telnet host port

总结

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