Nginx暴露一个端口访问多个Spring Boot服务,JS/CSS 404问题解决

1.场景

需求:
1.系统包含多个服务,彼此之间需要互相访问;
2.三个服务占用三个不同的端口,8081、8082、8083;
3.服务器只对外暴露一个端口。

2. 原设计及配置

在这里插入图片描述

Nginx配置nginx.conf

events {
    worker_connections  1024;
}

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

	upstream auth {
		server localhost:8081;
	}
	upstream business {
		server localhost:8082;
	}
	upstream file {
		server localhost:8083;
	}
	
    sendfile        on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		location / {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://localhost:8080;
		}
		
		location = /auth {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://auth;
		}
		location = /business {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://business;
		}
		location = /file {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://file;
		}
    }
}

3.问题

JS/CSS文件链接丢失
在这里插入图片描述

4.修改后设计及配置

在这里插入图片描述

1.Spring Boot 增加前缀的方式:配置server.servlet.context-path

server:
  port: 8081
  servlet:
    context-path: /auth

2.所有的js请求的接口要改为相对路径,例如:“/user/info” 要修改为 “user/info

3.Nginx配置nginx.conf

events {
    worker_connections  1024;
}

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

	upstream auth {
		server localhost:8081;
	}
	upstream business {
		server localhost:8082;
	}
	upstream file {
		server localhost:8083;
	}
	
    sendfile        on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		location / {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://localhost:8080;
		}
		
		location = /auth {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://auth/auth;
		}
		location ^~ /auth/ {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://auth/auth/;
		}
		location = /business {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://business/business;
		}
		location ^~ /business/ {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://business/business/;
		}
		location = /file {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://file/file;
		}
		location ^~ /file/ {
			proxy_set_header        Host $http_host;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_pass		http://file/file/;
		}
    }
}

修改后重试,页面可以正常加载,问题修复,完结撒花~
在这里插入图片描述

5.补充

nginx.conf= /auth^~ /auth^~/auth/在匹配上有什么区别?

  • = /auth仅匹配: ip:8080/auth
  • ^~ /auth前缀匹配,匹配示例:ip:8080/auth、ip:8080/author、ip:8080/auth/user…
  • ^~/auth/前缀路径匹配,匹配示例:ip:8080/auth/user、ip:8080/auth/all…

版权声明:本文为qq_33204709原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。