Reactで実装したウェブアプリケーションをNetlifyでホスティングする

最近Reactで実装したウェブアプリケーションをNetlifyでホスティングする機会があったのでその備忘録です。
この記事ではNetlifyとGitHubの連携方法は解説しません。

目次

• 環境
• 手順
  • 1. NetlifyにReactのビルドコマンドを設定する
  • 2. 環境変数を定義する
• つまずき
  • _redirects

環境

• React(Create React App)
• SPA構成

手順

1. NetlifyにReactのビルドコマンドを設定する

CI='' npm run build

ReactアプリケーションをCI上でビルドするため、ビルドコマンドに実行環境がCI上であることを伝えます。
CI=''を指定しないと以下のエラーが出力されます。

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

2. 環境変数を定義する

NetlifyのDeploy settings > Build & deploy > Environment > Environment variablesを開き、環境変数のkeyとその値を定義します。

つまずき

_redirects

検証環境でデプロイしたアプリケーションの動作確認中、ブラウザバックするとNetlifyの404 Not Foundページが出力されてしまった。
どうやらpublicディレクトリに_redirectsファイルを作成して、リダイレクト設定を記述する必要があったらしい。

/*    /index.html   200

SPA構成で実装しておいて、SPAの特性?を把握していなかった…。