在宝塔面板中部署 Express + MongoDB + Uniapp h5 项目（超详细！！！）

阿莫、

于 2024-10-07 12:18:13 发布

阅读量427

点赞数 8

文章标签： express mongodb uni-app 笔记宝塔面板项目部署

本文链接：https://blog.csdn.net/qq_45897239/article/details/142737634

版权

文章目录

一、打包 uniapp h5 项目

(1) 打开 manifest.json 文件，修改相关配置

修改相关配置

注：此处的 运行基础路径 参数不要随意填写，此前根据网上分享的资料将其修改为 ./ 导致底部 tab 栏的图片显示异常，随后删除相关参数后重新打包才解决了该问题。

对应的源码：

"h5" : {
    "router" : {
        "base" : "",
        "mode" : "history"
    }
}

(2) 开始项目打包

如图所示，点击发行中的网站选择：

项目打包

在弹出的对话框中直接点击发行（无需填写网站域名）：

项目打包

打包成功后，控制台会显示导出的文件路径，打开目标文件夹：

项目打包

创建一个新的文件夹 dist，并将之前打包后的相关文件复制至 dist 文件夹中（此步骤为后续的 express 项目加载前端资源做准备）：

项目打包

二、修改 express 相关配置

(1) 添加打包后的前端资源文件

将先前打包好的前端资源文件放在新创建的 dist 文件夹中，并将其放入 express 项目：

修改 express 相关配置

注：这里的 favicon.ico 图标需要自己制作，可以使用相关在线工具制作 ico 图标：https://www.bitbug.net/

(2) 修改 app.js 文件

// app.js
const express = require("express");
const app = express();
...
// 加载前端打包后的项目
app.use(express.static(path.join(__dirname, 'dist')));
...
module.exports = app;

此时启动项目后，可以通过访问 http://localhost:3000/ 来查看是否能够成功加载前端资源文件。

(3) 修改项目启动命令

由于项目在 windows 系统开发，可以通过 SET NODE_ENV=development&& node ./bin/www来启动项目，而云服务器是 linux，如果再使用该命令来启动则会报错，因此，此处引入 cross-env 这个第三方工具来帮助我们解决跨平台的环境变量设置。

安装 cross-env：

npm i cross-env

修改 package.json 文件：

"scripts": {
    "start": "cross-env NODE_ENV=production node ./bin/www",
    "dev": "cross-env NODE_ENV=development nodemon ./bin/www"
},

使用 cross-env 来设置环境变量后，无需修改命令即可在不同系统中执行（注：linux 上部署项目可能会有权限问题，后续将会说明）

三、使用宝塔面板部署项目

(1) 宝塔面板安装

可以使用在线安装方式，访问宝塔面板安装地址：https://www.bt.cn/new/download.html

填写相关信息后，点击安装：

宝塔面板安装

在弹出的对话框中根据自身实际选择要安装的环境：

宝塔面板安装

安装成功后，在弹出的对话框中复制宝塔面板访问地址及相关账户信息（不小心关掉了也没关系，可以使用 Xshell 相关工具访问服务器，然后执行 bt 查看相关命令获取账户信息）

(2) 项目环境搭建

访问上一步复制的宝塔面板访问地址，输入相应的账号密码登录后，点击左侧菜单栏的 软件商店 选项，下载所需的软件。此处项目使用了 Node.js 和 MongoDB，所以安装了相关软件，应根据自身实际安装相应的软件。

项目环境搭建

注：此处一定要注意安装的 Node.js 版本，最好是开发的时候使用的是什么版本，就安装什么版本，否则项目中使用的第三方依赖包可以会由于 Node.js 的版本太高或太低而出现报错，其他软件也一样，要注意版本的兼容性问题。（举例说明：比如我在 windows 操作系统下开发的项目，使用的 Node.js 版本为 18.16.0，项目中使用了 mongoose 这个第三方库，安装的版本是 8.7.0，而云服务器安装的 Node.js 版本为 14.17.6，此时如果将项目部署在云服务上将会出现报错，最终通过降低了 mongoose 的版本为 6.13.2 才解决了该问题。）

四、添加 MongoDB 数据库

安装完 MongoDB 后，点击左侧菜单栏的 安全 选项，添加端口规则，放行 27017 端口：

放行 27017 端口

注：购买的云服务器也要放行 27017 端口，此处以阿里云为例：

放行 27017 端口

点击左侧菜单栏的 首页 选项，选择并打开 MongoDB 服务：

打开 MongoDB 服务

点击左侧菜单栏的 数据库 选项，添加数据库：

添加数据库

开启安全认证，并设置密码和添加权限，此处的 权限 全部勾选（可根据自身实际做选择）

开启安全认证

由于我们需要使用本地的数据库管理工具连接该远程数据库，所以需要修改 MongoDB 的相关配置（记得保存）：

修改 MongoDB 配置

使用数据库管理工具 MongoDB Compass 来连接该远程数据库（也可以使用其他数据库管理工具，根据自身实际选择）：

连接数据库

连接的 url：

mongodb://root:你设置的密码@你的服务器地址:27017/
// 例：
mongodb://root:123abc@192.168.1.1:27017/

补充：如果要在 express 项目中使用 mongoose 连接该远程数据库，则需要写成：

// 导入模块
const mongoose  = require("mongoose");
// 数据库连接地址
let DB_URL = 'mongodb://root:你设置的密码@你的服务器地址:27017/数据库名称?authSource=admin'

mongoose.connect(DB_URL).then(
    res => {
        console.log('-- Connection successful. --');
    },
    err => {
        console.log('-- Connection failed. --');
    }
)
module.exports = mongoose;