Nginx多个前端服务配置方式详解

http {
    #嵌入其他配置文件 语法：include /path/file
	#参数既可以是绝对路径也可以是相对路径（相对于Nginx的配置目录，即nginx.conf所在的目录）
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
	#限制上传文件大小
	client_max_body_size       20m;
    server { 
		client_max_body_size  100M;
        listen 1004;
        server_name  localhost, 127.0.0.1;
		#服务1
		location / {
		  root dist;
		  index index.html;
		}
		#服务2：由于/r2 是虚拟路径，所以用alias，会为访问dist3下面的首页
		location /r2 {
		  alias  dist3;
		#服务3：由于/allow-cost-calc 是真实路径，所以用root，会访问/allow-cost-calc/dist2下面的首页   
		#（vue打包时设置了publicPath = '/allow-cost-calc'，同时打包后的文件也必须放到allow-cost-calc文件夹下 dists2/allow-cost-calc/前端包文件）
		location /allow-cost-calc {
		  root  dist2;
		
		#后端代理，后端代理不受前端路径的影响
        location /api/ {
            proxy_pass http://10.51.105.7:31500/;
            proxy_pass_request_headers on;
            proxy_set_header Host $host;
            proxy_set_header X-Client-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

http {
   #前端服务1
   server {
        root dist1;#前端包位置
        client_max_body_size 100M;
        listen 7001;
        server_name localhost, 127.0.0.1;
        location /api/ {
        	proxy_pass http://10.51.105.7:31500/;
            proxy_pass_request_headers on;
            proxy_set_header Host $host;
            proxy_set_header X-Client-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
   }
   #前端服务2
        root dist2;#前端包位置
        listen 7002;
}