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用に修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
worker_processes 1; daemon off; error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log; events { worker_connections 1024; } http { log_format cloudfoundry '$http_x_forwarded_for - $http_referer - [$time_local] "$request" $status $body_bytes_sent'; access_log <%= ENV["APP_ROOT"] %>/nginx/logs/access.log cloudfoundry; default_type application/octet-stream; include mime.types; sendfile on; gzip on; tcp_nopush on; keepalive_timeout 30; server { listen <%= ENV["PORT"] %>; server_name localhost; location / { root <%= ENV["APP_ROOT"] %>/public; index index.html index.htm Default.htm; try_files $uri $uri/ /index.html; } } } |
これでreact-routerが動作するはずです。