推送状态已启用上下文路径路由:在服务器上找不到静态资产 [英] Push state enabled & context path routing: Static assets are not found on the server

问题描述

我通过使用静态buildpack将React应用程序部署到了Cloud Foundry.目的是使该应用可在domain.com/ path 下访问.因此，我根据他的博客文章配置了路由:

要在子目录"中启用 pushstate:enabled 的应用程序运行，我还需要配置其他内容吗?

解决方案

当您通过 pushstate:enabled 启用推送状态时，由buildpack为您的应用程序组装的Nginx配置将大致类似于这.我还突出显示了专门为解决推送状态而添加的部分.

 服务器{听8080;server_name localhost;根目录/home/vcap/app/public;地点/{#<-这是为推送状态支持添加的内容如果(！-e $ request_filename){重写^(.*)$/break;}#->index index.html index.htm Default.htm;}} 

您可以在构建包中看到启用此此处.

我认为，简单的答案是，buildpack假设您用完了根目录而不是子目录，这就是您使用Cloud Foundry的基于路径的路由时发生的情况.

要解决此问题，您只需要手动启用相同或相似的Nginx配置.为此，我建议您执行以下操作:

1. 启用自定义位置配置.请参阅该链接表中具有该名称&的列.遵循这些指示.这为我提供了以下 Staticfile .

     root:公共location_include:includes/*.conf 

   请注意，这要求所有静态文件都必须位于名为 public 的文件夹(或您要命名文件的根文件夹的任何文件夹)下.使用 location_include 时必须执行此操作.

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

     location/path/{如果(！-e $ request_filename){重写^(.*)$/path/break;}index index.html index.htm Default.htm;} 

3. 推送您的应用.它应该部署并运行，并将自定义代码添加到您的buildpack使用的基本Nginx配置中.

希望有帮助！

I deployed a react app to cloud foundry by using the static buildpack. The goal is making the app accessible under domain.com/path. So I configured the route accordingly to his blog post: https://www.cloudfoundry.org/context-path-routing/

Also, I set pushstate: enabled in the static file and added the context path to the static asset URLS; E.g. The URL for the style sheet is domain.com/path/static/style.css. When I visit domain.com/path I get the index.html file. However the static assets which are linked in the index.html file are not found and I get the index file instead. This is the default behaviour for pushstate routing if the resourceis not found on the server.

Is there anything else I need to configure in order to run the app with pushstate: enabled in a 'subdirectory'?

解决方案

When you enable push state with pushstate: enabled, the Nginx configuration that is assembled by the buildpack for your app will look roughly like this. I've also highlighted the section that's added specifically to address push state.

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;

    }
}

You can see the code in the buildpack that enables this here.

I think the short answer is that the buildpack is assuming you're running out of the root and not a sub-directory, which is what happens when you use Cloud Foundry's path based routing.

To work around this, you just need to manually enable the same or similar Nginx configuration. To do that I'd recommend the following:

1. Enable Custom Location Configuration. See the column in the table at that link which has that name & follow those instructions. This gives me the following Staticfile.

   root: public
   location_include: includes/*.conf
   

   Note that this requires all the static files to serve up to be under a folder called public (or whatever you want to name the root folder of your files). You have to do this when using location_include.

2. Add a custom includes file nginx/conf/includes/push_state.conf and inside the file add the following.

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

3. Push your app. It should deploy and run with the custom code added to the base Nginx configuration used by your buildpack.

Hope that helps!

这篇关于推送状态已启用上下文路径路由:在服务器上找不到静态资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！