Netlifyに上げたReactアプリのエラーをnetlify.tomlで解決する

Overview

React App を Netlify へ上げる際に詰まったことがいくつかあり、Netlifyの公式Docsは英語only( https://www.netlify.com/docs/ )で、qiitaなどの日本語記事があまり見られなかったので共有します。

使用した環境は以下です。

• node.js v10.7.0
• React.js v16.4.1
• yarn v1.7.0

困りごと①：環境ごとにビルドコマンドを分けたい

Netlifyはかなり便利で、ビルドしたいときにGUIからBuildコマンドを設定するだけで本番環境用ブランチが更新される度に設定されたBuildコマンドを自動で実行してデプロイしてくれます。（しかも無料で！神！）
開発する際は複数の環境を作って開発することがあると思います。（今回は本番環境とステージング環境で開発しようとしていました。）
NetlifyのGUIでのデプロイ設定は複数環境デプロイは対応していないので、 GUI設定を超えたカスタマイズをしたいときには netlify.toml　というファイルで設定をする必要があります。 netlify.tomlの英語DocsはこちらをClick

netlify.tomlはgitレポジトリのトップに作成し、僕は以下のような設定になりました。

netlify.toml

# デプロイしたいディレクトリの設定
[build]
  publish = "/dist"

# 本番環境のビルドコマンド
[context.production]
  command = "yarn && yarn prod"

# ステージング環境のビルドコマンド
[context.staging]
  command = "yarn && yarn stg"

困りごと②：リロードすると404 Not Foundが表示される

SPAの場合は特別に設定しなければいけないみたいです。
デプロイしたいディレクトリに _redirects というファイルを作成し、以下のように設定します。

_redirects

/*    /index.html   200

また、 netlify.toml　をすでに作っているなら、こちらに _redirects の内容をマージして設定できるみたいなので、僕は _redirects を作成せずに netlify.toml に設定をすべて書き込みました。
詳細はこちらに

最終的な netlify.toml の内容

僕の netlify.tomlファイルは以下になりました。

netlify.toml

# デプロイしたいディレクトリの設定
[build]
  publish = "/dist"

# 本番環境のビルドコマンド
[context.production]
  command = "yarn && yarn prod"

# ステージング環境のビルドコマンド
[context.staging]
  command = "yarn && yarn stg"

# SPA用の設定
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200