前端可以了解一下:nginx负载均衡

5,696 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第25天,点击查看活动详情

前言:大家好,我是 那个曾经的少年回来了。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端口在不停的切换

image.png

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-…