Configure static resources (pages) after nginx reverse proxy port

Configure static resources (pages) after nginx reverse proxy port

Simulation scene:

​ When linuxdeploying a project under the system springboot, because the original 8080port is occupied, at this time nginx, the reverse proxy of the port is used to proxy the access port of the project 8081, and then the startup statement is added when the project starts --server.port=8081. At this point, when we access the project service, although the input port is http://127.0.0.1:8080/, the actual port link is http://127.0.0.1:8081/, and the background service can run successfully. However, when we access the service page, a problem arises, and it is likely that the front-end page cannot be accessed. Error:net::err_connection_reset 200

reason:

​ The problem of not being able to find static resources on the front-end page is because we have nginxperformed a reverse proxy on the port usage. At this time, when accessing the original port directly, the port number has been replaced by the proxy port, so the static resources under the original port cannot be found. resource.

solution:

In nginxthe configuration file, make the following changes:

#user  nobody;
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
    # 后端代理服务器的地址
    upstream xd-project{
                server 127.0.0.1:8080;
    }
 
    server {
        # 监听的端口
        listen  8081;
    	server_name localhost;
 
        #charset koi8-r;
        #access_log  logs/host.access.log  mai
        # 代理转发'/'后的所有请求
        location / {
            proxy_pass http://xd-project;
            
            proxy_set_header X-Real-IP $remote_addr;
	        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	    proxy_set_header Host $http_host;
        	proxy_set_header X-NginX-Proxy true;
    	}
 
 		# 静态资源配置
        location ~ .* {
            proxy_pass http://xd-project;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}

Note:

In the above solution, xd-projectthe address of the back-end proxy server is extracted serverout of the configuration and called with parameters.

location /{}: This method configures /all the request interfaces under

location ~ .*{}: This method configures all static resources in the project

These two configurations are also the most important places in this article.