nginx如何将某域名/二级站点/代理到二级站点？以ChirpStack实战为例

ChirpStack部署后访问发现它的js,css都是居于根节点的，如下图

如果nginx用常规的转发配置

复制代码

# 正式服务PC
	server {
		listen       8220;
		server_name   127.0.0.1,www.123sss.com;
		   
		# 主应用
		location /chirpstack/ { 
        
			# 去掉前缀
			rewrite ^/chirpstack/(.*)$ /$1 break;
			
			# 代理到后端ChirpStack站点
			proxy_pass http://127.0.0.1:8080;
			
			# 基础代理头
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme; 
			
			# 处理重定向
			proxy_redirect / /chirpstack/;
			
			# 内容替换
			sub_filter_once off; 
		}  
		  
		 
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
	}

如上图就会404 访问不了。

附一种AI提供的方法，这个没走通很复杂得一个个去配

复制代码

# C:\nginx-1.25.1\conf\nginx.conf
# 或 C:\nginx-1.25.1\conf\ems\ems.conf

# 全局配置
user  nobody;
worker_processes  auto;

error_log  logs/error.log;
# error_log  logs/error.log  notice;
# error_log  logs/error.log  info;

pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

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

    # 日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    
    # 重定向处理
    map $upstream_http_location $redirect_location {
        ~^/(.*)$ /chirpstack/$1;
        default $upstream_http_location;
    }

    server {
        # HTTP 重定向到 HTTPS
        listen       80;
        listen       [::]:80;
        server_name  aw.xxx.com;
        
        # 重定向到 HTTPS
        return 301 https://$server_name$request_uri;
    }

    # HTTPS 服务器
    server {
        listen       443 ssl;
        listen       [::]:443 ssl;
        server_name  aw.xxx.com;

        # Windows 路径格式
        ssl_certificate      C:/nginx-1.25.1/ssl/aw.xxx.com.crt;
        ssl_certificate_key  C:/nginx-1.25.1/ssl/aw.xxx.com.key;

        # SSL 配置
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        # 安全头
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";

        # ========================================
        # 1. 处理静态资源
        # ========================================
        location ~ ^/chirpstack/(static|assets|img|js|css|fonts)/ {
            # 去掉 /chirpstack 前缀
            rewrite ^/chirpstack/(.*)$ /$1 break;
            
            proxy_pass http://10.146.242.19;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # 缓存设置
            expires 1y;
            add_header Cache-Control "public, immutable";
            
            # 调试日志
            access_log logs/static_access.log;
        }

        # ========================================
        # 2. 处理 gRPC-Web API 请求
        # ========================================
        location ~ ^/chirpstack/api\.([^/]+)Service/(.*)$ {
            # 去掉 /chirpstack 前缀
            rewrite ^/chirpstack/(.*)$ /$1 break;
            
            proxy_pass http://10.146.242.19;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # 注意：这里我们不使用未定义的变量，使用固定值
            proxy_set_header X-Script-Name /chirpstack;
            
            # 传递原始 Content-Type
            proxy_set_header Content-Type $http_content_type;
            proxy_set_header Accept $http_accept;
            
            # gRPC-Web 需要
            proxy_buffering off;
            proxy_request_buffering off;
            
            # 长连接
            proxy_http_version 1.1;
            proxy_set_header Connection "";
            
            # 超时设置
            proxy_connect_timeout 300s;
            proxy_send_timeout 300s;
            proxy_read_timeout 300s;
            
            # CORS 处理
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Grpc-Web';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range,Grpc-Message,Grpc-Status';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Grpc-Web';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range,Grpc-Message,Grpc-Status';
            
            # 调试日志
            access_log logs/api_access.log;
        }

        # ========================================
        # 3. 处理 WebSocket
        # ========================================
        location ~ ^/chirpstack/ws/ {
            # 去掉 /chirpstack 前缀
            rewrite ^/chirpstack/(.*)$ /$1 break;
            
            proxy_pass http://10.146.242.19;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # ========================================
        # 4. 主应用入口
        # ========================================
        location /chirpstack/ {
            # 去掉 /chirpstack 前缀
            rewrite ^/chirpstack/(.*)$ /$1 break;
            
            proxy_pass http://10.146.242.19;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Script-Name /chirpstack;
            
            # 处理重定向
            proxy_redirect http://10.146.242.19/ https://$host/chirpstack/;
            proxy_redirect / /chirpstack/;
            
            # 超时设置
            proxy_connect_timeout 60s;
            proxy_send_timeout 60s;
            proxy_read_timeout 60s;
            
            # 缓冲区设置
            proxy_buffer_size 128k;
            proxy_buffers 4 256k;
            proxy_busy_buffers_size 256k;
            
            # 内容替换 - 修复重复的 MIME 类型
            sub_filter_once off;
            sub_filter_types text/html text/css application/javascript application/json;
            
            # =============== 路径替换规则 ===============
            
            # 1. 替换 HTML 属性
            sub_filter 'href="/' 'href="/chirpstack/';
            sub_filter 'src="/' 'src="/chirpstack/';
            sub_filter 'action="/' 'action="/chirpstack/';
            
            # 2. 替换 CSS 背景
            sub_filter 'url("/' 'url("/chirpstack/';
            sub_filter 'url(/' 'url(/chirpstack/';
            
            # 3. 特别处理 assets
            sub_filter '"/assets/' '"/chirpstack/assets/';
            
            # 4. 特别处理 static
            sub_filter '"/static/' '="/chirpstack/static/';
            
            # 5. 特别处理 API
            sub_filter '"/api.' '"/chirpstack/api.';
            sub_filter '"/api/' '"/chirpstack/api/';
            
            # 6. 特别处理 WebSocket
            sub_filter '"/ws/' '"/chirpstack/ws/';
            
            # 7. 替换 JavaScript 中的常用模式
            sub_filter 'fetch("/' 'fetch("/chirpstack/';
            sub_filter '.get("/' '.get("/chirpstack/';
            sub_filter '.post("/' '.post("/chirpstack/';
            
            # 8. 替换前端框架配置
            sub_filter 'baseURL: "/' 'baseURL: "/chirpstack/';
            sub_filter '"baseURL":"' '"baseURL":"/chirpstack';
            
            # 9. 替换常见的页面路径
            sub_filter '"/login"' '"/chirpstack/login"';
            sub_filter '"/logout"' '"/chirpstack/logout"';
            sub_filter '"/dashboard"' '"/chirpstack/dashboard"';
            
            # 处理重定向响应
            proxy_intercept_errors on;
            error_page 301 302 307 = @handle_redirects;
            
            # 调试日志
            access_log logs/chirpstack_access.log;
        }

        # ========================================
        # 5. 处理重定向
        # ========================================
        location @handle_redirects {
            set $saved_redirect_location '$upstream_http_location';
            if ($saved_redirect_location ~ ^/(.*)$) {
                return 301 /chirpstack/$1;
            }
            return 301 /chirpstack/;
        }
        
        # ========================================
        # 6. 错误页面
        # ========================================
        error_page  404              /404.html;
        location = /404.html {
            root   html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

我试了好几只方法：AI了几种也都太复杂，而且还走不同，最后采用一种取巧的方式来做，

那就是：前导页

因为二级目录用的/chirpstack/

废话不多说，上nginx配置

复制代码

#chirpstack站点
	upstream site{
        server 127.0.0.1:8080  weight=80;  
    }
 # 定义map，判断Referer是否来自/Chirpstack/（不区分大小写）
    map $http_referer $is_from_chirpstack {
        default 0;
        ~*^https?://[^/]*/chirpstack(/|$) 1;
    }

	# 正式服务PC
	server {
		listen       8220;
		server_name   127.0.0.1,www.123sss.com;
		   
		# 主应用
		location /chirpstack/ { 
        
			# 去掉前缀
			rewrite ^/chirpstack/(.*)$ /$1 break;
			
			# 代理到后端
			proxy_pass http://site;
			
			# 基础代理头
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme; 
			
			# 处理重定向
			proxy_redirect / /chirpstack/;
			
			# 内容替换
			sub_filter_once off; 
		}  
		  
		location / {
		
			 # 如果来自Chirpstack前导页，则添加一个头
            if ($is_from_chirpstack){
                  proxy_pass http://site;
            }  
             
			proxy_set_header Host $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;
        }
	}