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

需求

有多个前端服务需要通过nginx部署。

nginx多个前端服务配置方式

可以通过多个server配置或者多个location配置来配置多个前端服务。

多个location配置

location中root和alias的区别：location后面的路径是真实路径用root，虚拟路径用alias
真实路径就是本地访问地址里面有的路径
例如vue前端服务设置了publicpath='/allow-cost-calc'，
前端访问路径为：http://localhost:8005/allow-cost-calc/#/login，/allow-cost-calc就是真实路径，则使用 location /allow-cost-calc配置时里面使用root 来指定前端服务路径（如下服务3配置）。

若前端访问路径为：http://localhost:8005/#/login，如果此时我们使用root来配置，那么location后面的路径只能使用真实路径，只能使用 /，但是多个服务配置时/有可能已被使用（例如下面被服务1配置了），所以需要使用虚拟路径来配置，如下服务2配置：使用/s2 来作为虚拟路径，使用alias来指定服务位置，部署后的访问方式要带上虚拟路径http://localhost:8005/s2/#/login

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;
        }
    }
}

多个server配置

每个前端服务独自使用一个server服务。nginx.conf部分配置如下：

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;
}

到此这篇关于nginx多个前端服务配置的文章就介绍到这了,更多相关nginx配置多个前端内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！