Question

我很难用react router设置nginx。我已经尝试了所有发现的建议解决方案，但似乎都没有涵盖我的用例。

这是nginx在我的文件系统上提供的结构

/path/to/my/app
|- v1.0/index.html
`- v2.0/index.html

我在我的应用程序上部署了多个版本，每个版本都是一个独立的react应用程序。

然后还有另一件事可以完成拼图。我的react应用程序不是在域根URL（例如example.com/v1.0）上运行，而是在example.com/my-app/v1.0上运行。

所以我这样配置nginx

server {
  location ~ /my-app/([^/]+) { # capture version
    set $version $1; 
    root /path/to/my/app/$version  # directory where index.html is stored
    try_files $uri $uri/ /index.html
  }
}

访问example.com/my-app/v1.0可以正常工作，但是如果路径中包含一个在react（example.com/my-app/v1.0/users）中的路由，nginx就会返回404，因为它希望为文件/path/to/my/app/v1.0/users提供服务，这显然是不存在。

另外，值得一提的是，我的应用仅在像example.com/my-app/v1.0/这样的访问方式下才有效，而不像example.com/my-app/v1.0/index.html那样工作。后者未配置任何路由。

Answer 1

一种选择是将alias与前缀 location配合使用，例如：

location /my-app/ {
    alias /path/to/my/app/;
    if (-e $request_filename) { 
        rewrite ^(/my-app/[^/]+) $1/index.html last; 
    }
}

location和alias指令的值都应以/结尾或都不以/结尾。避免使用this issue导致try_files和alias。关于if的使用，请参见this caution。

您可以采用另一种方法，但是用正确的值替换try_files项。例如：

location ~ /my-app/(?<version>[^/]+)(?<suffix>/.*)?$ {
    root /path/to/my/app/$version;
    try_files $suffix $suffix/ /my-app/$version/index.html;
}

使用Nginx的React Router

1 个答案: