html - 使用 Nginx 响应路由器 html5 Pushstae

Question

我有一个react应用程序(它使用react-router和html5 Pushstate路由) 我想要http://example.com/v2作为服务器我的新网站的基本路由

我使用这些 nginx 配置:

这是为了捕获/v2 并使用新的 js 文件

location ^~ /v2 {
        alias /usr/local/theapp/dist;
        try_files $uri $uri/ /v2/index.html;
        access_log /var/log/nginx/theapp/acces.web.log;
        error_log /var/log/nginx/theapp/error.web.log debug;
}

location ~ ^/(v2)/.+\..+$ {
        try_files $uri =404;
       alias /usr/local/theapp/dist;
       error_log /var/log/nginx/theapp/error.web.log debug;
}

由于使用第一个位置 block ，即使是 404 也会被重定向到 v2/index.html，因此第二个位置的目的是处理带有扩展名的 uri，因此如果 http://example. com/v2/user/profile/picture.jpg 不存在，那么我仍然会得到正确的 404 资源未找到错误。

上面的代码显然不起作用，因为 ^~ 的优先级高于 ~。尝试了 2 ~ 但我得到了 try_files 重定向循环:(

Answer 1

正如您所注意到的，第二个位置 block 将不会被访问。此外，与正则表达式位置结合使用时，别名 会更加复杂。请参阅this document了解更多。

同时使用 alias 和 try_files 可能会导致问题(请参阅 this long standing bug)。

尝试:

location ^~ /v2 {
    alias /usr/local/theapp/dist;

    if (!-e $request_filename) {
        rewrite ^[^.]*$ /v2/index.html last;
    }

    access_log /var/log/nginx/theapp/acces.web.log;
    error_log /var/log/nginx/theapp/error.web.log debug;
}

参见this note关于 if 的使用。