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

dorako321

7年前

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用に修正します。

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;
    }
  }
}

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が動作するはずです。