More than 3 years have passed since last update.

react-routerを使ったルーティングをherokuで動かすために必要なこと

Posted at 2020-06-13

困ったこと

react-routerを使うことで、フロント側では1枚のhtmlファイルでルーティングをすることができます。
ただ、ローカル環境では問題なく動いたのですが、herokuにデプロイするとそのパスに応じたファイルを探してしまうようで動かず、少し嵌ってしまったので、記事にします。

static.jsonが怪しいということはぐぐるとすぐに出てきたのですが、それを使うにはheroku-buildpack-staticを導入する必要があるということに気づくのに時間がかかってしまいました。

heroku buildpacks:set heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git

heroku-buildpack-staticを導入した上で、package.jsonと同じ階層にstatic.jsonを追加すれば、herokuでもしっかりとルーティングされるようになります。

static.json

{
  "root": "public/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}