项目技术栈:前端VUE 部署容器Nginx后端springboot 部署容器Tomcat
一、部署架构
前端服务
|
IP地址
|
后端服务
|
IP地址
|
前端F5
|
IP1
|
后端F5
|
IP4
|
Nginx1
|
IP2
|
Application1
|
IP5
|
Nginx2
|
IP3
|
Application2
|
IP6
|
二、配置方案
window.basic = {
production: {
VUE_APP_API_BASE_URL: 'http://IP2:9077/basedp',
VUE_APP_SEARCH_TYPE: 'like'
}
}
Nginx2部署的前端代码,config.js 配置,VUE_APP_API_BASE_URL配置为Nginx2 的地址
window.basic = {
production: {
VUE_APP_API_BASE_URL: 'http://IP3:9077/basedp',
VUE_APP_SEARCH_TYPE: 'like'
}
}
server {
listen 9077;
server name IP1;
location /basedp/ {
proxy pass http://IP4:9088/;
proxy set header Host $host;
proxy set header X-Real-IP $remote addr;
proxy set header X-Forwarded-For $proxy add x forwarded for;
}
}
Nginx2 的nginx.conf配置,当Nginx2接收到请求后将’/basedp/’路径的转发给后端F5
server {
listen 9077;
server name IP1;
location /basedp/ {
proxy pass http://IP4:9088/;
proxy set header Host $host;
proxy set header X-Real-IP $remote addr;
proxy set header X-Forwarded-For $proxy add x forwarded for;
}
}
三、处理流程
![](https://i-blog.csdnimg.cn/direct/8e8bdcd4c0e248e3b53ddb5213d7cadc.png)
请求流程:
1. 浏览器访问前端F5获取前端登录页面的静态资源
2. 前端F5转发登录请求到Nginx2
3. Nginx2返回登录页面的静态资源给浏览器,浏览器对静态资源进行渲染(Nginx2上的项目基础路径配置为Nginx2)
4. 浏览器发送登录请求给Nginx2
5. Nginx2 转发登录请求到后端F5(后端F5配置会话保持)
6. 后端F5将登录请求转发到Application1,Application1将生成的令牌存储到Application1的缓存中
7. Application1将登录的结果返回给前端浏览器
8. 浏览器发送获取首页数据的请求给Nginx2
9. Nginx2转发请求到后端F5
10. 后端F5转发获取首页数据的请求到Application1
11. Application1返回首页首页的数据给浏览器
四、异常配置流程分析
请求流程:
(1)浏览器访问前端F5获取前端登录页面的静态资源
(2)前端F5转发登录请求到Nginx1
(3)Nginx1返回前端静态资源给浏览器,浏览器对静态资源进行渲染
(4)浏览器发送登录请求给前端F5
(5)前端F5将登录请求转发到Nginx2
(6)Nginx2 转发登录请求到Application1,Application1将生成的令牌存储到Application1的缓存中
(7)Application1将登录的结果返回给前端浏览器
(8)浏览器发送获取首页数据的请求给前端F5
(9)前端F5转发获取首页数据的请求给Nginx2
(10)Nginx2转发请求到后端F5
(11)后端F5转发获取首页数据的请求到Application2
(12)因为登录令牌的缓存数据还未同步到Application2,因此会导致请求因为令牌认证失败导致请求失败。
备注:因为应用使用Ehcache做应用的缓存,而两个应用中的Ehcache缓存需要相互同步,缓存同步需要一定的时间,这时如果前端登录请求是调用的Application(1)的登录接口,这时令牌就是存储在Application(1)的内存中,登录成功进入系统时,如果请求访问被转发到Application(2)上,这时因为Application(2)中的内存中的令牌信息还没有同步过来,导致请求失败。