实际应用：使用Nginx实现代理与服务治理

使用Nginx实现代理与服务治理

😄生命不息，写作不止

🔥 继续踏上学习之路，学之分享笔记

👊 总有一天我也能像各位大佬一样

🏆 博客首页 @怒放吧德德 To记录领地 @一个有梦有戏的人

🌝分享学习心得，欢迎指正，大家一起学习成长！

转发请携带作者信息 @怒放吧德德(掘金) @一个有梦有戏的人(CSDN)

前言

记录一次23年在公司做的 nginx 转发后端集群服务，去年做的文档，只是涉及如何使用如何配置。

逻辑思路

通过nginx实现反向代理，在通过请求标记的路径去进行负载均衡到相应的后端服务。

Nginx配置

在nginx的http# 需要配置后端的服务地址，默认轮询策略

crystal 复制代码

upstream positioning {
    server 127.0.0.1:8011;
    server 127.0.0.1:8010;
}

反向代理

crystal 复制代码

server {
    listen 8089;
    server_name 127.0.0.1;
    index index.html;
    root  html/lms;  #dist上传的路径
    # 避免访问出现 404 错误
    location / {
        try_files $uri $uri/ @router;
        index  index.html;
    }
    location @router {
    	rewrite ^.*$ /index.html last;
    } 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    	root   html;
    }
    # .......
}

服务负载均衡，这部分放在server#底下

crystal 复制代码

#这里是配置负载均衡
location ^~/api {
    rewrite ^/api/(.*) /$1 break;   #注意：这里需要重写/api为空因为这个/api是我们在前端项目写的标识，手动添加上去的
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    # 前端调用接口时有/api的url都会转发到后端(positioning为上面upstream关键字后面的名字)
    proxy_pass http://positioning;  #配置反向代理，跳到后台地址upstream positioning
    proxy_connect_timeout 600;
    proxy_read_timeout 600;
    proxy_send_timeout 600;
    proxy_buffer_size 64k;
    proxy_buffers   4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;
}

对于websocket服务需要配置，同样在server#底下

crystal 复制代码

location /ws/ {
    rewrite ^/ws/(.*) /$1 break; 
    proxy_pass http://positioning;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

前端配置

需要配置以下两个配置，否则会出现跨域错误

js 复制代码

devServer: {
  allowedHosts: ['all'],
  disableHostCheck: true,
  // ....
}

打包的时候，请求需要带个/api的标识，所以需要在public#config.js中修改配置文件

javascript 复制代码

window.g = {
  dev: {
    VUE_APP_BASE_API: '/api'
  },
  prod: {
    VUE_APP_BASE_API: '/api'
  }
}

前端框架打包的配置类，需要把API的前缀修改成'/'

javascript 复制代码

# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API  = '/'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = '/'

初始化websocket连接的时候，路径需要做相应的修改，修改为请求nginx的域名:端口

javascript 复制代码

initWebSocket() {
  // const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'messageInfo'
  const wsUri = 'ws://127.0.0.1:8089/ws/webSocket/' + 'messageInfo'
  this.websock = new WebSocket(wsUri)
  this.websock.onerror = this.webSocketOnError
  this.websock.onmessage = this.webSocketOnMessage
},

转发请携带作者信息 @怒放吧德德 @一个有梦有戏的人

持续创作很不容易，作者将以尽可能的详细把所学知识分享各位开发者，一起进步一起学习。转载请携带链接，转载到微信公众号请勿选择原创，谢谢！

👍创作不易，如有错误请指正，感谢观看！记得点赞哦！👍

谢谢支持！