SIBYL System

just technical blog

Pivotal CFのStaticfile buildpackでReact-Routerを動作させる

   

 

PCFでStaticfile buildpackを使用した場合、React-Routerで/(ルート)以外のURLにアクセスしても404になってしまいます。これは対象のパスにディレクトリやファイルが無いためです。通常はnginx.confにtry_files設定を入れて、ファイルが存在しない場合は/index.htmlにアクセスさせるような設定を行います。

というわけで、PCFのStaticfile buildpackでReact-Routerを使用できる方法を調べました。

公式ドキュメント https://docs.cloudfoundry.org/buildpacks/staticfile/index.html を見ると、ルートディレクトリにnginx.confを配置することで機能するとのこと。

ルートディレクトリとは、PCFにアップロードするファイル郡のディレクトリのことです。もしbuild/をアップロードするのであればbuild/nginx.confを作りましょう。

次にnginx.confに記述する内容ですが、良いサンプルが以下にありました。

https://github.com/cloudfoundry/staticfile-buildpack/blob/master/fixtures/reverse_proxy/nginx.conf

リバースプロキシのサンプルですが、これを少し書き換えて、react-router用に修正します。

これでreact-routerが動作するはずです。

 - Pivotal CF , , ,