使用Nginx对路由器html5 pushstae作出反应

Question

我有一个react应用程序（使用react路由器和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;
}

因为对于第一个位置块，即使是404也会被重定向到v2/index.html，所以第二个位置的意图是用扩展来处理uri，所以如果http://example.com/v2/user/profile/picture.jpg不存在，那么我仍然会得到正确的404资源没有发现错误。

上述代码显然不起作用，因为^~的优先级高于~。尝试使用2~但我得到try\u文件重定向循环：(

Answer 1

正如您所注意到的，将不会访问第二个位置块。另外，当与正则表达式位置结合使用时，别名更为复杂。有关更多信息，请参阅此文档。

同时使用别名和try_文件可能会导致问题（请参阅此长期存在的错误）。

尝试：

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;
}

请参阅本说明，了解如何使用if。