配合阿⾥云的负载均衡，使⽤宝塔⾯板，Nginx服务器作为
Springboot和Vue的前后。。。
问题场景：
在阿⾥云购买了数台ECS的服务器，然后每台服务器的EIP是1MB的带宽，再购买阿⾥云的均衡附在SLB，SLB的带宽为15MB。然后每台ECS安装好宝塔和Java环境、还有Nginx，开始前后端分离开发。
采⽤Spring Boot 开发项⽬开发项⽬常规的⽅式其实很简单，⽆⾮还是采⽤原来Spring Mvc那⼀套，建控制器（Controller）然后建⽅法（action）再添加模板引擎（spring boot 推荐使⽤thymeleaf）这样开发开起来其实也没有⼤问题，毕竟是采⽤了MVC的思想，在⼀定程度上开发起来还是很⽅便的。但是如果在分⼯很细的情况下，这⾥前端后端是是分离开的，那么假如前端的同学需要加个页⾯那么就要后端得到同学给他加，想想⼀个复杂的项⽬，好多页⾯，这样开发⽅式肯定不是⼀个好的⽅案。
前后端分离已经成为互联⽹项⽬开发的主流使⽤⽅式。
通过 nginx + Tomcat 的⽅式，中间加⼀个 nodejs有效的进⾏解耦，并且前后端分离会为以后的⼤型分布式架构，弹性计算架构，微服务架构，多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等）提供很⼤的便利。
前后端分离的优点：
1. 可以实现真正的前后端解耦，前端服务器使⽤ nginx。
2. 发现bug，可以快速定位是谁的问题，不会出现互相踢⽪球的现象。
3. 在⼤并发情况下，可以同时⽔平扩展前后端服务器
4. 减少后端服务器的并发/负载压⼒。
5. 即使后端服务器暂时超时或者宕机了，前端页⾯也会正常访问，只不过数据显⽰不出来⽽已。
6. 接⼝可以公⽤
7. 页⾯显⽰的东西再多也不怕，因为是异步加载。
8. nginx ⽀持热部署，不⽤重启服务器，前端⽆缝升级。
9. 增加代码的维护性&易读性（前后端耦合在⼀起的代码读起来相当费劲）
10. 提升开发效率，因为可以前后端并⾏开发，⽽不是像以前的强依赖
11. 在nginx 中部署证书，外⽹使⽤http访问，并且只开发443和80端⼝，其他端⼝⼀律关闭（防⽌⿊客户端⼝扫描），内⽹使⽤
http，性能和安全都有保障
12. 前端⼤量的组件代码得以复⽤！
缺点：
1. 搭建项⽬成本相对⾼⼀些，因为需要前后端项⽬同时运作。
2. 对于项⽬的初步设计需要有很好的⽂档说明（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中配置好端⼝。
所以还要在yml在放置好的SSL证书，yml配置如下：
#server
server:
>>>>>的https
port: 1443 #端⼝号，最好不要直接使⽤443
ssl:
key-store: classpath:pfx
key-store-password: password
keyStoreType: PKCS12
然后打包成jar包上传到服务器启动即可。
2、Vue
业务逻辑也不说了，因为前后端分离最⼤的问题就是跨域的问题。
nginx部署前端项目
跨域解决：在vue项⽬的根⽬录下/config/index.js加⼊：
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/manage': {
target: '/',
changeOrigin: true,
pathRewrite: {
'^/manage': ''
}
}
},
}
跨域问题即可解决。
使⽤:
npm run build
打包Vue项⽬，然后在项⽬根⽬录中/dist/有打包好的html和各种css、js⽂件
然后上传到服务器中（上传到哪，请再往下查看）
3、宝塔⾯板：
以上1、2、两点就是纯属开发的事情，多说⽆益，开发是⼀年⼜⼀年的经验积累起来的，短短三⾔两语怎么可能说得完，所以⾛到3、我就默认你具备前后端开发能⼒的。
安装宝塔：
按照操作来即可。
进⼊宝塔⾯板后，安装好各种运⾏环境，然后点击“⽹站”
点击“添加站点”，创建站点即可。
然后点击⽹站名“” ：
修改配置⽂件，开发Nginx的反向代理
>>>>#我⾃⼰添加的配置开始
location /manage {
proxy_pass :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问题
}
>>>>#我⾃⼰添加的配置结束
这⾥：
proxy_pass :1443/manage;
1443就是后端的端⼝
manage就是Controller的第⼀级后缀。
然后重启Nginx：
记得在阿⾥云的安全组中放开：443、80、1443的端⼝然后在宝塔的“安全”也放开端⼝

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

nginx前后端分离技术要点
« 上一篇
springboot+vue项目部署到服务器详细(前后端单独部署)
下一篇 »

发表评论