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

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

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

Answer 1

正如您所注意到的，第二个位置块将不会被访问。此外，alias 与正则表达式位置结合使用时更加复杂。请参阅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 的使用。