用 Nginx 反应路由器 html5 pushstae

Posted 2023-02-21

【中文标题】用 Nginx 反应路由器 html5 pushstae

【英文标题】：react router html5 pushstae with Nginx

【发布时间】：2017-09-07 11:43:43

【问题描述】：

我有一个 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 重定向循环:(

【参考方案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 的使用。

【讨论】：

您的解决方案的问题是它无法解决html5状态推送功能。如果我去example.com/v2/user/profile 它将不起作用，因为example.com/v2 是真实路径，而user/profile 只是html5 路由器。这就是我使用try_files 的原因，所以/v2/ 之后的所有内容都属于v2/index.html

我误解了，如果 URI 包含 .，您只需要 404 响应。请参阅修改后的答案。