前言：大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。
直接封面图可以发现：最左侧的便是客户机，中间的就是负载均衡的机器，最右侧的便是通过负载后真正访问的服务器，我这里只画了两台服务器，实际情况根据需求可能还会不断增加。
1、前端负载均衡实现
- 先上一个前端版本，同一份打包编译后的文件，分别部署到one和two.
- 因为我只有一台服务器，所以这里通过端口进行演示： one对应端口91，two对应端口92.
- 通过upstream nginxlbdemo进行负载配置.
- 最后通过proxy_pass反向代理 upstream.
- 如果有修改nginx的配置文件，修改完毕后记得
nginx -s reload
nginx-lb.conf可以放到/etc/nginx/conf.d路径下
upstream nginxlbdemo{ server 127.0.0.1:91; server 127.0.0.1:92; } server { listen 90; location / { proxy_pass http://nginxlbdemo; } } server { listen 91; root /usr/local/aehyok/nginx-lb/one; index index.html index.htm; if ($request_method = 'OPTIONS') { return 204; } location / { try_files $uri $uri/ = 404; } } server { listen 92; root /usr/local/aehyok/nginx-lb/two; index index.html index.htm; if ($request_method = 'OPTIONS') { return 204; } location / { try_files $uri $uri/ = 404; } }
部署完毕后，通过电脑查看，我没办法做测试，只能通过停掉91或者停掉92来访问90，都是没问题的。 那这里只好通过node开启后端服务来测试一下。
2、node后端负载均衡
下面的代码算算是模拟91和92两个端口，相当于两台服务器，拷贝到linux服务器上，通过 node index.js运行起来
const http = require("http"); const port1 = 91 const server1 = http .createServer(function (req, res) { console.log(`Request: ${req.url}--port ${port1}`); res.end(`hello world! - ${port1}`); }) .listen(port1, "127.0.0.1"); server1.once("listening", () => { console.log(`Server http://127.0.0.1:${port1}`); }); const port2 = 92 const server2 = http .createServer(function (req, res) { console.log(`Request: ${req.url}--port ${port2}`); res.end(`hello world! - ${port2}`); }) .listen(port2, "127.0.0.1"); server2.once("listening", () => { console.log(`Server http://127.0.0.1:${port2}`); });
然后重新配置nginx-lb.conf，然后 nginx -s reload
upstream nginxlbdemo{ server 127.0.0.1:91; server 127.0.0.1:92; } server { listen 90; location / { proxy_pass http://nginxlbdemo; } }
然后通过 http://139.159.245.209:90 ，你可以不断的刷新，就可以看到node 后台的请求日志 91和92端口在不停的切换
3、负载均衡的分类
3.1、默认轮询
nginx默认就是轮询，其权重默认都是1，服务器请求的顺序:
- 第1个请求 91端口
- 第2个请求 92端口
- 第3个请求 91端口
- 第4个请求 92端口
- 第5个请求 91端口
- 第6个请求 92端口
- 第7个请求 91端口
- 第8个请求 92端口 ....
upstream nginxlbdemo{ server 127.0.0.1:91; server 127.0.0.1:92; }
3.2、 加权轮询
nginx根据配置的权重大小而分发给对应服务器对应权重 数量的其你，其权重默认都是1，服务器请求的顺序:
- 第1个请求 91端口
- 第2个请求 92端口
- 第3个请求 92端口
- 第4个请求 91端口
- 第5个请求 92端口
- 第6个请求 92端口
- 第7个请求 91端口
- 第8个请求 92端口
- 第9个请求 92端口
upstream nginxlbdemo{ server 127.0.0.1:91 weight=1; server 127.0.0.1:92 weight=2; }
3.3、 ip_hash
nginx 会让相同的客户端ip请求相同的服务器。
upstream nginxlbdemo{ ip_hash; server 127.0.0.1:91; server 127.0.0.1:92; }
3.4、 热备
开始时负载均衡90只会访问91端口，如果91端口服务器发生故障，才会开启第二台服务器给提供服务。
upstream nginxlbdemo{ ip_hash; server 127.0.0.1:91; server 127.0.0.1:92 backup; }
4、总结
nginx在后端非常的常见，但对于一向爱折腾的我有必要去学习一下。了解完以后。便可以发现，灰度发布其实就可以通过加权轮询来处理，当然nginx的体系还是非常庞大的继续学习吧。
我的个人博客：vue.tuokecat.com/blog
我的个人github：github.com/aehyok
我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…
