配合阿里云的负载均衡，使用宝塔面板，Nginx服务器作为Springboot和Vue的前后端分离开发过程记录

2022-09-21 14:44:48

问题场景：

在阿里云购买了数台ECS的服务器，然后每台服务器的EIP是1MB的带宽，再购买阿里云的均衡附在SLB，SLB的带宽为15MB。然后每台ECS安装好宝塔和Java环境、还有Nginx，开始前后端分离开发。

采用Spring Boot 开发项目开发项目常规的方式其实很简单，无非还是采用原来Spring Mvc那一套，建控制器（Controller）然后建方法（action）再添加模板引擎（spring boot 推荐使用thymeleaf）这样开发开起来其实也没有大问题，毕竟是采用了MVC的思想，在一定程度上开发起来还是很方便的。但是如果在分工很细的情况下，这里前端后端是是分离开的，那么假如前端的同学需要加个页面那么就要找后端得到同学给他加，想想一个复杂的项目，好多页面，这样开发方式肯定不是一个好的方案。

前后端分离已经成为互联网项目开发的主流使用方式。

通过 nginx + Tomcat 的方式，中间加一个 nodejs有效的进行解耦，并且前后端分离会为以后的大型分布式架构，弹性计算架构，微服务架构，多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等）提供很大的便利。

前后端分离的优点：

可以实现真正的前后端解耦，前端服务器使用 nginx。

发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。

在大并发情况下，可以同时水平扩展前后端服务器

减少后端服务器的并发/负载压力。

即使后端服务器暂时超时或者宕机了，前端页面也会正常访问，只不过数据显示不出来而已。

接口可以公用

页面显示的东西再多也不怕，因为是异步加载。

nginx 支持热部署，不用重启服务器，前端无缝升级。

增加代码的维护性&易读性（前后端耦合在一起的代码读起来相当费劲）

提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖

在nginx 中部署证书，外网使用http访问，并且只开发443和80端口，其他端口一律关闭（防止黑客户端口扫描），内网使用http，性能和安全都有保障

前端大量的组件代码得以复用！

缺点：

搭建项目成本相对高一些，因为需要前后端项目同时运作。

对于项目的初步设计需要有很好的文档说明（Springboot必备swagger的API文档），大家都按照一定的约定来开发，这就考验项目技术经理的能力了。

剖析：

关于前后端分类项目的部署方式，一般有两种：

（1）前后端一起部署，前端打包成静态文件，复制到后端项目中，然后部署后端项目

（2）前后端分离部署，前端使用nginx部署，后端直接运行jar

在（1）中，这种方法其实就是跟Springboot和thymeleaf开发无异，就是后端开发好接口API后写好API文档让前端去照着文档开发，然后前端开发完后打包，把打包的文件复制到Springboot的resource目录下，这种方法小型项目用着还可以，因为这样就不会存在跨域的问题，大家都是在同一个jar包下运行的。但是一旦前端有问题要修改，那后端的代码就要重新打包上传到服务器再运行，耗时耗力，想都不敢想。

在（2）中，就是真正的前后端分离了，后端和前端开发工作和部署工作完全是分开的，实现了完全解耦的工作，唯一关联就是Swagger给的文档使得前后端需要经常联系，其他工作前后端都不需要过多接触到。此方法的优点太多太多了，但是最大的问题就是跨域，使用Nginx可以完美解决（试着使用Apache去反向代理，感觉有点鸡肋，所以还是推荐大家使用Nginx来解决跨域问题）。

1、Springboot：

没啥好介绍的，直接使用Springboot开发好后端的逻辑 , 使用Controller写好控制层的代码，然后yml中配置好端口。

后端单独使用一个域名，比如：https://server.xxx.com

所以还要在yml在放置好server.xxx.com的SSL证书，yml配置如下：

#server
server:

#########################server.xxx.com的https
  port: 1443 #端口号，最好不要直接使用443
  ssl:
      key-store: classpath:863223_server.xxx.com.pfx
      key-store-password: password
      keyStoreType: PKCS12

然后打包成jar包上传到服务器启动即可。

2、Vue

业务逻辑也不说了，因为前后端分离最大的问题就是跨域的问题。

Vue项目的域名:https://vue.xxx.com

跨域解决：在vue项目的根目录下/config/index.js加入：

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/manage': {
        target: 'https://server.xxx.com/',
        changeOrigin: true,
        pathRewrite: {
            '^/manage': ''
        }
      }
    },
}

'/manage'的意思就是Vue项目中如果发生有manage的域名后缀（比如:https://vue.xxx.com/manage/query）就会被反向代理到https://server.xxx.com/manage/query

跨域问题即可解决。

使用:

npm run build

打包Vue项目，然后在项目根目录中/dist/有打包好的html和各种css、js文件

然后上传到服务器中（上传到哪，请再往下查看）

3、宝塔面板：

以上1、2、两点就是纯属开发的事情，多说无益，开发是一年又一年的经验积累起来的，短短三言两语怎么可能说得完，所以走到3、我就默认你具备前后端开发能力的。

安装宝塔：宝塔Linux面板安装教程 - 2021年8月18日更新 - 7.7.0正式版 - Linux面板 - 宝塔面板论坛

按照操作来即可。

进入宝塔面板后，安装好各种运行环境，然后点击“网站”

点击“添加站点”，创建站点即可。

然后点击网站名“vue.xxx.com” ：

修改配置文件，开发Nginx的反向代理

#####################我自己添加的配置 开始
    location /manage {
        proxy_pass https://server.xxx.com:1443/manage;
        add_header backendIP $upstream_addr;
        add_header backendCode $upstream_status;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
    }
    
    location / {
        
        try_files $uri $uri/ /index.html; #解决页面刷新404问题
    }
    #####################我自己添加的配置 结束

相当于 Vue项目中如果发生有manage的域名后缀（比如:https://vue.xxx.com/manage/query）就会被反向代理到https://server.xxx.com/manage/query

这里：

proxy_pass https://server.xxx.com:1443/manage;

1443就是后端的端口

manage就是Controller的第一级后缀。

然后重启Nginx：

记得在阿里云的安全组中放开：443、80、1443的端口

然后在宝塔的“安全”也放开端口

上传Vue打包好的代码：

点击图中所示的“根目录” ：“/www/wwwroot/server.xxx.com”

上传打包好的Vue代码即可访问。

至此前后端分离的过程已经结束。

但是因为我购买的是阿里云的负载均衡，可以在流量层面的负载均衡，而且剩下数台服务器的带宽费用，所以下面解释负载均衡的监听配置。

阿里云负载均衡：

进入阿里云的负载均衡后

添加监听443和1443的TCP即可。

此处不用选择监听443的HTTPS，因为我在Nginx中已经强制HTTPS了，已经在服务器中增加SSL的验证，所以不用再在负载均衡上使用监听HTTPS即可完成SSL证书的验证了。

结束语：

上文纯手码字，因为做前后端的过程不可能4000字就能说的很清楚的，所以此文章只是提供一个思路：配合阿里云的负载均衡，使用宝塔面板，Nginx服务器作为Springboot和Vue的前后端分离开发。

以上仅是一个思路，可以提供刚入门前后端的同学有个大概的开发思维，如果在开发工作中遇到诸多问题还是需要多看看GitHub或者Stack Overflow。

此处解释：为什么使用宝塔面板，因为一个人兼备了前后端的工作，服务器的运维就交给专业的插件来做，不用再花费更多心思去弄维护工作，而且宝塔面板提供的可视化界面能一目了然看清当前网络状态和攻击状态，为运维提供很大的便利。至于前后端工作中使用宝塔面板与否全看个人，这里是非必要条件。

码农公寓