You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React前端应用在NGINX双重代理部署下无法正常显示求助

问题排查:React前端子目录部署空白页问题

部署包含后端与前端的NGINX反向代理项目到学校服务器时,前端显示空白页,但后端路由在本地及服务器环境均能正常工作。本地运行该项目无异常,推测是URL重定向或子目录部署配置出现问题。

相关配置文件

项目反向代理nginx.conf

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream backend {
        server backend:8080;
    }

    upstream frontend {
        server frontend:80;
    }

    server {
        listen 9005;
        access_log  /var/log/nginx/access.log;
        error_log  /var/log/nginx/error.log notice;
        rewrite_log on;
        location /backend {
            add_header Requested-URI $request_uri always;
            add_header Final-URI $uri always;
            rewrite /backend/(.*) /$1  break;
            proxy_pass         http://backend;
            proxy_redirect     off;
            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-Host $server_name;
        }

        location / {
                proxy_pass         http://frontend;
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

}

React应用nginx.conf

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri /index.html;
        }
    }
}

学校服务器default.conf

server {
        ...
        root /projects;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html index.php;

        server_name _;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                alias /projects/college_projects/;
                autoindex off;
                try_files $uri $uri/ =404;
        }
        location /my_project { #LOCATION OF THE PROJECT ABOVE
                proxy_pass  http://localhost:9005;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
...
}

目前怀疑问题与子目录部署相关,恳请帮忙排查。

内容的提问来源于stack exchange,提问作者Guillergood

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 20:45:36