最近Reactで作成したWebアプリをNetlifyでホスティングする機会があったので、メモついでに記事にしました。
この解説(メモ)では、環境変数の組み込みも行います。NetlifyとGitHubの連携方法の解説は省きます。
①Netlify側でビルドコマンドを設定する
Cl='' npm run build
// または
Cl='' yarn buildyarn buildでビルドすると
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.というエラーが出てくるのでCl=”を追加する。
参考資料： https://docs.netlify.com/configure-builds/troubleshooting-tips/#build-fails-on-warning-message
②環境変数を組み込む
NetlifyのDeploy settings -> Build & deploy -> Environment -> Environment variablesを開き、設定したい環境変数のkeyとvalueを設定する。それだけ。
以上です。
よくわからない_redirects
私がNetlifyでSPAのWebアプリをホスティングした際の話。
本番環境でアプリの動作検証をしていたら、ブラウザバックするとNetlify側で404 NotFoundが出てきた。
URLは合っているのに。
いろいろ調べているとプロジェクト直下のpublicフォルダに_redirectsファイルを作成して、以下の記述をしなければならないらしい。
/* /index.html 200ここら辺がまだ理解できていない。すべて./public/index.htmlに出力しているから、index.htmlにリダイレクトさせるってこと？