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多个前端服务配置方式详解

目录

需求