nginx实现vue的web页面项目集群负载

问题描述

项目是使用前后端分离，前端使用的是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不一样就行了