用堡塔面板部署前后端项目到XX云服务器

前言

本篇文章主要介绍前后端项目部署线上的全过程以及部署中遇到的一些问题和解决方法。

前期准备

首先购买个云服务器，至于域名购买不购买也无关紧要，从0到1操作一遍，至少有点前后端以及数据库的基本知识储备。
项目声明:
这个项目主要组合方式：前端：React,后端：Koa2框架，数据库：MongoDB （React+Koa2+MongoDB）

工欲善其事必先利其器之工具

堡塔ssh远程终端（部署项目工具）
MongoDB客户端（数据操作）
安装个Apifox插件（用来测试接口）

堡塔面板安装以及常用操作

堡塔下载界面下载：如图所示客户端

客户端下载.png

安装宝塔并获取网页版面板入下链接
云服务器界面

云服务界面.png

注意：镜像选择CentOS
宝塔最常用指令：bt

宝塔指令截图.png

输入对应的标号进行对应的操作 注释：如果忘记网页的链接用户名等信息可以输入编号14查看，其他就不一一赘述了

添加服务如图所示

添加服务.png

堡塔网页界面

堡塔导航列表：红色框内常用部分

宝塔nav.png

网站部分：主要用来上传前后端程序；
数据库：对数据库的操作部分；
文件：主要查看程序存放的位置；
软件商店：软件下载区；
以上模块也是部署程序所需功能模块；

前端项目部署

前端代码部署.png

后端项目部署

node代码部署.png

数据的操作

数据库操作.png

部署中遇到的问题汇总

部署成功后访问不到数据库

数据库列表.png

把链接数据库的地址改写成：

/** 注释说明
* mongodb://用户名:密码@域名:端口号/数据库名
**/
const mongoUrl='mongodb://test_koa:abc1123456@49.235.105.78:27017/test_koa'

关于使用pm2 node项目启动失败以及解决方法

1712735213751.png

注释：运行用户把www改成root
宝塔面板数据库导入数据失败以及解决方案以及查看数据库是否创建成功
使用mongodb客户端创建一个数据路径例如

/** 注释说明
* mongodb://用户名:密码@域名:端口号/数据库名
**/
mongodb://test_koa:abc1123456@49.235.105.78:27017/test_koa

mongodburl.png

建立连接进入数据库后，在数据库中创建一个空的表然后在空表中导入对应的数据表注释数据库的表名后要加s 例如 hot 表名为hots

mongodb数据导入.png

导入成功后在宝塔的面板中mongodb数据库的工具可以查看导入后的表

查看导入的表.png

关于前端项目打包代理中间件失效以及解决方法
使用http-proxy-middleware 做代理打包后失效

//文件 setupProxy.js
const {createProxyMiddleware} = require("http-proxy-middleware");
    module.exports = function(app){
        app.use(
            createProxyMiddleware("/api",{
                target:'http://http://localhost:3000',
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

直接在nginx的配置文件中加入

screenshot.png

总结

以上就是前后端项目部署服务器的全不流程，以及部署中遇到的问题解决方法的汇总；