routing - 启用推送状态和上下文路径路由 : Static assets are not found on the server

Question

我使用静态构建包将 React 应用程序部署到 Cloud Foundry。目标是使该应用可在 domain.com/path 下访问。所以我根据他的博客文章配置了路线:https://www.cloudfoundry.org/context-path-routing/

此外，我在静态文件中设置了 pushstate: enabled 并将上下文路径添加到静态 Assets URLS；例如。样式表的 URL 是 domain.com/path/static/style.css。当我访问 domain.com/path 时，我得到了 index.html 文件。但是找不到 index.html 文件中链接的静态 Assets ，我得到的是索引文件。如果在服务器上找不到资源，这是推送状态路由的默认行为。

为了在“子目录”中使用 pushstate: enabled 运行应用程序，我还需要配置什么吗？

Answer 1

当您使用 pushstate: enabled 启用推送状态时，由 buildpack 为您的应用组装的 Nginx 配置大致如下所示。我还突出显示了专门为解决推送状态而添加的部分。

server {
    listen 8080;
    server_name localhost;

    root /home/vcap/app/public;

    location / {
        # <-- this bit here is what's added for push state support
        if (!-e $request_filename) {
          rewrite ^(.*)$ / break;
        }
        #  -->

        index index.html index.htm Default.htm;

    }
}

您可以在构建包中看到启用此功能的代码 here .

我认为简短的回答是 buildpack 假设您用完了根目录而不是子目录，当您使用 Cloud Foundry 的基于路径的路由时会发生这种情况。

要解决此问题，您只需手动启用相同或相似的 Nginx 配置。为此，我推荐以下内容:

1. 启用Custom Location Configuration .请参阅该链接中表中具有该名称的列并按照这些说明进行操作。这为我提供了以下 Staticfile。

   root: public
   location_include: includes/*.conf
   

   请注意，这需要所有静态文件都位于名为 public 的文件夹下(或者您想要命名文件根文件夹的任何名称)。使用 location_include 时必须这样做。

2. 添加自定义包含文件 nginx/conf/includes/push_state.conf 并在文件中添加以下内容。

   location /path/ {
   
       if (!-e $request_filename) {
         rewrite ^(.*)$ /path/ break;
       }
   
       index index.html index.htm Default.htm;
   
   }
   

3. 推送您的应用。它应该使用添加到构建包使用的基本 Nginx 配置的自定义代码进行部署和运行。

希望对您有所帮助!