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

目录需求Nginx多个前端服务配置方式多个location配置多个server配置

需求

有多个前端服务需要通过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; }