如何配置Nginx处理带动态后缀的路由以返回React静态文件

你需要调整location /rooms/块的配置，实现所有/rooms/开头的路径找不到对应静态资源时，统一返回React应用的入口index.html，同时修正原配置的路径匹配问题。

原有配置问题说明 #

1. 你当前location /rooms/下的root设置为/var/www/rooms，此时访问/rooms/1时Nginx会尝试查找/var/www/rooms/rooms/1路径的文件，和实际静态文件存放位置不匹配
2. 原有try_files规则找不到路径时直接返回404，没有做单页应用的路由 fallback

修改后完整配置 #

http {
    include /etc/nginx/mime.types;
    gzip on;
    gzip_types text/plain text/css application/javascript;
    
    server {
        listen 80;

        location /rooms/ {
            # root调整为/var/www，匹配/var/www/rooms目录存放静态文件的结构
            root /var/www;
            index index.html index.htm;
            # 尝试查找对应静态文件，找不到就统一返回入口文件，交给React处理前端路由
            try_files $uri $uri/ /rooms/index.html;
        }

        location ~* \.(js|css)$ {
            root /var/www;
            expires 30d;
        }
    }
}

events { }

如果你的静态文件确实直接放在/var/www/rooms根目录下（即index.html的绝对路径为/var/www/rooms/index.html，没有嵌套的rooms子目录），也可以用alias替代root调整：

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

修改配置后重启Nginx容器即可生效，此时访问/rooms/1、/rooms/2都会返回相同的静态文件，React前端可以正常从路径中读取id参数发起后端请求。

内容的提问来源于stack exchange，提问作者Dane Murphy