nginx - use nginx to deploy vue projects to the local as well as proxy and load balancing

This article introduces the packaged vue project to be deployed locally using nginx and the reverse proxy and load balancing of the interface;
premise: prepare a packaged vue project and install nginx;

1. First install nginx
download link: http://nginx.org/en/download.html
I installed version 1.16.1, as follows:

Then unzip it to a specified folder; double-click the nginx icon in the root directory, and then visit http://localhost/ . If the following page appears, it means the startup is successful:

You can also check whether the startup is successful in the task manager:

2. Package the vue project
Configure the publicPath path in the vue.config.js file in the root directory of the vue project; as follows:

module.exports = {
    
    
  outputDir:'video',    //打包后的文件夹名字及路径
  publicPath: '/video/', // 生产的项目名
  lintOnSave: false,
}

Then run npm run buildthe package to complete; after the package is the video file in the root directory;

3. Modify the nginx configuration file

In this step, you need to enter the conf/nginx.conf of nginx and add a new one 路径监听. This path corresponds to the local absolute path stored after the Vue project is packaged, as follows:

3.1First enter nginx.conf

3.2Add the content I drew the red line in the configuration file; alias corresponds to the local path stored in the locally packaged project folder;
note: the mapping path of location /video/ must correspond to the publicPath of vue: "/video/"

The main code is as follows:

        # 视频演示项目 http协议
        location /video/ {
            alias  D:/myProject/deployProject/video/;
            try_files $uri $uri/ /index.html last;
            index index.html index.htm;
        }

3.3If there are interface requests in your deployment, then it is necessary 设置反向代理和负载均衡, please take a good look at the following cases:

upstream serve_backend {
    
    
	ip_hash;
	server 192.168.11.68:20201;
	server 192.168.11.69:20201 weight=1 down;
	server 192.168.11.70:20201 weight=2;
	server 192.168.11.71:20201 weight=3 backup;
	server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s;
}

illustrate:

(1) down: Indicates that the current server does not participate in the load temporarily.
(2) weight: The default is 1. The greater the weight, the greater the weight of the load.
(3) backup: When all other non-backup machines are down or busy, request the backup machine. So this machine will be the least stressful.
(4) In the above example, 192.168.11.72:20201 sets the maximum number of failures to 3, that is, a maximum of 3 attempts, and the timeout period is 30 seconds; (The default value of max_fails is 1, and the default value of fail_timeout is 10s.)
( 5) Note that upstreamwhen there is only one of serverthem, max_fails 和 fail_timeoutthe parameter may not work; weight\backup cannot be used together with the ip_hash keyword.
(6) Finally, add http://serve_backend/ to the server that needs to use load balancing proxy_pass, corresponding to the upstream name.
The serve module configuration of nginx.conf is as follows:

The serve module configuration of nginx.conf is as follows:

http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    # 在这里 设置负载均衡
    # 上面有讲解 
    upstream serve_backend{
    
    
		ip_hash;
		server 192.168.11.68:20201;
		server 192.168.11.69:20201 weight=1 down;
		server 192.168.11.70:20201 weight=2;
		server 192.168.11.71:20201 weight=3 backup;
		server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s;
	}

    server {
    
    
        listen       80;
        server_name  localhost;
        location / {
    
    
            root   html;
            index  index.html index.htm;
        }

        # 视频演示项目 http协议
        location /video/ {
    
    
            alias  D:/myProject/deployProject/video/;
            try_files $uri $uri/ /index.html last;
            index index.html index.htm;
        }
        
        # 在这里设置反向代理
        # wxserver 是需要代理的标志
        location /wxserver/ {
    
    
            proxy_pass http://serve_backend/;
            # 启用keep alive
            proxy_http_version 1.1;
            proxy_set_header Connection "";

            # 获取 xforward和真实IP
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  Host $host;
        }
        
        
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }
    }

4. Restart nginx
If there is no request related to the interface, there is no need to set step 3.3; after the setting is completed, you need to end all nginx processes in the task manager, then enter the nginx root directory and double-click the nginx icon to restart nginx ;

5. Revisit the project path

Then re-visit the local project path: http://localhost/video/login
/videoit is the mapping from the nginx proxy to the local, must have
/loginIt is the entry route of your vue project, must have It
will enter your project later, and the interface used is also proxied.

As follows: the deployment is successful;