WebページをNetlifyを使って公開する方法

はじめに

最近Webアプリを作成する際にはNext.jsを使うので公開時には悩むことなくVercelで公開するのですが、今回シンプルにReactだけでWebアプリを作成したので、せっかくならと別のホスティングサービスを利用することにしてみました。Netlifyです。

デプロイ方法

難しい手順はそれほどないのですが、デプロイの手順をまとめてみました。

• Netlifyにユーザーアカウントを作成します。NetlifyにデプロイするためにはGitHub・GitLab等のレポジトリと接続する必要がありますが、いずれかのアカウントがあれば特に迷うことなくサインアップできると思います。まずは下の画像から[Add new site] > [Import an existing project]を選択します。
• すると下の画像の通りデプロイに必要なステップが示されます。1.Connect to Git provider → 2.Pick a repository → 3.Site settings, and deploy! と3ステップでデプロイ完了ということが分かりますね（見た感じ簡単そう？）。ここではGitHubを選択しましょう。
• （1/3ステップ）NetlifyからGitHubへページ遷移するので、接続を許可するため、Authorizeボタンを押します。これでステップ1完了です。
• （2/3ステップ）次にGitレポジトリからプロジェクトを選択します。ここでは任意のプロジェクトを選択してください。これでステップ2完了です（え、もうできたん？）。
• （3/3ステップ）そして最後に諸々設定してDeploy siteボタンをクリックしてステップ3完了=デプロイ完了！！！ ... と思ったらエラー発生です。世の中そんなに甘くありません。
• Deploy logからエラーの原因を探っていきましょう。ログを見たところ（一部省略してありますが）以下のようなエラーが出ているのが分かります。
• 今回ReactとMUIを利用してWebアプリを作ったのですが、ReactのバージョンとMUIのバージョンが同等でない時に出現するエラーです。このエラーに対しては--legacy-peer-depsを環境変数に設定してあげることで一応？解決します。環境変数は下の画像の通り、ナビゲーションの[Site settings] > [Environment variables] > [Add a variable] > Add a single variableをクリックしていくと入力できます。ここでKeyにNPM_FLAGS、Valuesに--legacy-peer-depsを入れてCreate variableボタンを押した後、再度デプロイしてあげましょう。
• ... ってまたエラーかい。ということで再度ログ確認です。よく見ると気になる一文が。
• デフォルトではCI=trueとなっておりWarningsがErrorsとして扱われているため、デプロイできていない模様。というわけで先ほど同様環境変数でCI = falseを設定してあげて再デプロイ！
• ようやくPublishedの文字が！これでデプロイ完了、では早速URLをクリックして見まsy...
• まだ出んのかい。そこでさらに調べていくと、こちらの記事に解説がありました。React Routerはクライアント側でルーティングを処理するので、サブディレクトリで枝分かれした非ルートページに遷移しようとするとNetlify側で処理できなくなるとのことです。解決方法は以下の通りです。
• publicフォルダ内に_redirectsファイル（拡張子不要）を作成して、/* /index.html 200とだけ入力し再度デプロイすれば問題なく（Page Not Foundが出ることなく）動作することが確認できます（参照：Netlify Docs）。書いてありましたね。しっかりドキュメントを読んでいなかったことが発覚したわけですが、とりあえずデプロイできました。

まとめ・参考

個人的にはNext.jsとVercelの組み合わせの方が簡単だなぁという印象ですが、Netlifyも問題なく使えそうだなぁという発見があったのでよかったです。※言うまでもなくエラーは当方の未熟さによるものなので、決して使いづらいということはありません。

参考

• Netlify Support Forums
• How to fix page not found on Netlify with react-router-dom
• Netflify Docs