Reactで作ったWebアプリをNetlifyを使って公開してみました。

## はじめに
最近Webアプリを作成する際にはNext.jsを使うので公開時には悩むことなくVercelで公開するのですが、今回シンプルにReactだけでWebアプリを作成したので、せっかくならと別のホスティングサービスを利用することにしてみました。Netlifyです。

## デプロイ方法
難しい手順はそれほどないのですが、デプロイの手順をまとめてみました。
* Netlifyにユーザーアカウントを作成します。NetlifyにデプロイするためにはGitHub・GitLab等のレポジトリと接続する必要がありますが、いずれかのアカウントがあれば特に迷うことなくサインアップできると思います。まずは下の画像から[Add new site] > [Import an existing project]を選択します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react1_id6e1c"/>
* すると下の画像の通りデプロイに必要なステップが示されます。1.Connect to Git provider → 2.Pick a repository → 3.Site settings, and deploy! と3ステップでデプロイ完了ということが分かりますね（見た感じ簡単そう？）。ここではGitHubを選択しましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react2_y2gdql"/>
* （1/3ステップ）NetlifyからGitHubへページ遷移するので、接続を許可するため、Authorizeボタンを押します。これでステップ1完了です。
* （2/3ステップ）次にGitレポジトリからプロジェクトを選択します。ここでは任意のプロジェクトを選択してください。これでステップ2完了です（え、もうできたん？）。
* （3/3ステップ）そして最後に諸々設定してDeploy siteボタンをクリックしてステップ3完了=デプロイ完了！！！
... と思ったらエラー発生です。世の中そんなに甘くありません。
* Deploy logからエラーの原因を探っていきましょう。ログを見たところ（一部省略してありますが）以下のようなエラーが出ているのが分かります。
<script src="https://gitlab.com/-/snippets/2593020.js"></script>
* 今回ReactとMUIを利用してWebアプリを作ったのですが、ReactのバージョンとMUIのバージョンが同等でない時に出現するエラーです。このエラーに対しては`--legacy-peer-deps`を環境変数に設定してあげることで一応？[解決](https://answers.netlify.com/t/deploy-failed-today-build-was-terminated-build-script-returned-non-zero-exit-code-1/64450)します。環境変数は下の画像の通り、ナビゲーションの[Site settings] > [Environment variables] > [Add a variable] > Add a single variableをクリックしていくと入力できます。ここでKeyに`NPM_FLAGS`、Valuesに`--legacy-peer-deps`を入れてCreate variableボタンを押した後、再度デプロイしてあげましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react3_eeycjb" />
* ... ってまたエラーかい。ということで再度ログ確認です。よく見ると気になる一文が。
<script src="https://gitlab.com/-/snippets/2593021.js"></script>
* デフォルトでは`CI=true`となっており`Warnings`が`Errors`として扱われているため、デプロイできていない模様。というわけで先ほど同様環境変数で`CI = false`を設定してあげて再デプロイ！
* ようやくPublishedの文字が！これでデプロイ完了、では早速URLをクリックして見まsy...
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react4_f5b1eu">
* まだ出んのかい。そこでさらに調べていくと、[こちら](https://rexben.medium.com/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5)の記事に解説がありました。React Routerはクライアント側でルーティングを処理するので、サブディレクトリで枝分かれした非ルートページに遷移しようとするとNetlify側で処理できなくなるとのことです。解決方法は以下の通りです。
<script src="https://gitlab.com/-/snippets/2567013.js"></script>
* `public`フォルダ内に`_redirects`ファイル（拡張子不要）を作成して、`/* /index.html 200`とだけ入力し再度デプロイすれば問題なく（Page Not Foundが出ることなく）動作することが確認できます（参照：[Netlify Docs](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps)）。書いてありましたね。しっかりドキュメントを読んでいなかったことが発覚したわけですが、とりあえずデプロイできました。

## まとめ・参考
個人的にはNext.jsとVercelの組み合わせの方が簡単だなぁという印象ですが、Netlifyも問題なく使えそうだなぁという発見があったのでよかったです。※言うまでもなくエラーは当方の未熟さによるものなので、決して使いづらいということはありません。

### 参考
* [Netlify Support Forums](https://answers.netlify.com/t/deploy-failed-today-build-was-terminated-build-script-returned-non-zero-exit-code-1/64450)
* [How to fix page not found on Netlify with react-router-dom
](https://rexben.medium.com/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5)
* [Netflify Docs](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps)