nginx实现vue的web页面项目集群负载
阅读原文时间:2023年07月08日阅读:1

问题描述

项目是使用前后端分离,前端使用的是vue技术。

想实现的功能是:在前端项目部署的过程中(直接删除项目目录的文件,然后上传新的项目文件),在这个短时间内不能影响用户的使用。所以想到的就是使用nginx搭建web集群。

nginx配置文件

    gzip  on;
    gzip_min_length 1k;
    gzip_comp_level 7;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    # 页面集群地址
    upstream house_keeper_html {
         server 127.0.0.1:9089 weight=1 max_fails=2 fail_timeout=30s;
        server 127.0.0.1:9088 weight=1 max_fails=2 fail_timeout=30s;
        ip_hash; # 负载均衡策略
    }

    # 页面集群转发
    server {
        listen       80;
        server_name  localhost;
        charset      utf-8;
        access_log  logs/host.access.log  main;
        location / {
            proxy_pass http://house_keeper_html;
        }
    }

    # 页面集群地址1
    server {
        listen 9088;
        location / {
            root   /usr/local/openresty/nginx/html/dist1/;
            index  index.html index.html;
            try_files $uri $uri/ /index.html;
            error_page 403 404 @notfound;
        }
        location @notfound {
             proxy_pass http://127.0.0.1:9089;
        }
        access_log  logs/host.dist1.log  main;
    }

    # 页面集群地址2
    server {
         listen 9089;
        location / {
            root   /usr/local/openresty/nginx/html/dist2/;
            index  index.html index.html;
            try_files $uri $uri/ /index.html;
            error_page 403 404 @notfound;
        }
        location @notfound {
            proxy_pass http://127.0.0.1:9088;
        }
        access_log  logs/host.dist2.log  main;
    }

思路

其实就是使用了nginx的错误页面重定向的思路,在其中一台报404的时候nginx检测到后进行转发到另一台。

总结

以上nginx配置适用场景是在一台主机上安装nginx,使用俩不同的目录放置同一个vue项目,然后在nginx中进行有关配置

但是若该主机出现问题导致无法访问,此时这种方式就像把所有鸡蛋放在同一个篮子里了

扩展

使用SLB架构,采用两个不同的服务器都安装nginx,在每个服务器上均配置同样的vue项目,nginx配置中路径名称和端口都可以一样,只要保证俩主机的ip不一样就行了