Nginx配置两个静态React网站失败：子路径跳转错误求助

你的配置问题出在root指令的使用逻辑上：Nginx的root会将location匹配的路径前缀追加到root指定的目录后面。比如location /videochat/搭配root /var/www/videochat时，Nginx实际会去/var/www/videochat/videochat/目录寻找资源，而你的文件实际在/var/www/videochat/下，因此找不到资源，最终 fallback 到了根路径的index.html。

以下两种方案可解决问题：

方案一：使用alias指令（推荐） #

alias会直接将location匹配的路径替换为指定目录，不会做路径拼接，适配子路径对应独立根目录的场景：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name example.com;

    location / {
        root /var/www/web_client;
        try_files $uri /index.html;
    }

    location /videochat/ {
        alias /var/www/videochat/;
        try_files $uri /videochat/index.html;
    }

    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

• alias /var/www/videochat/会把/videochat/xxx的请求映射到/var/www/videochat/xxx；
• try_files中的/videochat/index.html指定当文件不存在时，加载子路径下的React入口文件，避免 fallback 到根站点页面。

方案二：调整root与location结构 #

如果坚持使用root，可将root设为父目录，让Nginx自动拼接出正确的资源路径：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name example.com;

    location / {
        root /var/www/web_client;
        try_files $uri /index.html;
    }

    location /videochat {
        root /var/www;
        try_files $uri /videochat/index.html;
    }

    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

此时location /videochat匹配请求后，root /var/www会让Nginx去/var/www/videochat/目录寻找对应资源，符合你的目录结构。

生效步骤 #

修改配置后，先执行nginx -t检查配置合法性，确认无误后执行systemctl reload nginx（或service nginx reload）重启Nginx即可。

内容的提问来源于stack exchange，提问作者Nathan C