NetlifyでReactを使うときの404ページの作成方法
こんにちは。NetlifyはReactで作ったSPAを簡単にホスティング出来てとても便利ですよね。
ただ404ページを表示するときは、少しだけ設定が必要です。デフォルトでは404ページはNetlify側が用意しており以下のようなページが表示されます。
これはこれでありがたいのですが、サービスをちゃんと作るなら自前のデザインの404ページを用意したいところです。そこでどうやったら404ページを独自で設定できるのか調べていると、だいたい以下のような答えがすぐ見つかります。
ルートディレクトリ直下(Reactならpublicディレクトリ直下)に404.htmlを置けばOK
そうです、その通りです。404.htmlを置くだけです。
でも今回はReactでwebサイトを作っています。なので、404.htmlを直書きして置くのではなくて、jsxで書きたいんです。既存のコンポーネントを使用して、他のコンポーネントと同じように404ページを作りたい...!
できれば他のコンポーネントと同じようにsrc配下にNotFound.jsを作って、React Routerでルーティングできるのが理想です。ではどうすればいいのか...というと、意外と簡単で以下の３ステップです。
1. NotFound.jsをsrc配下に作成
これは他のコンポーネントと同じ要領です。src配下のディレクトリにNotFound.jsを作成します。（もちろんファイル名はNotFoundでも404でもなんでもOKです）
私は他のコンポーネントと同じようにsrc/components/NotFound/NotFound.jsという感じで作りました。
2. ルーティングにNotFoundコンポーネントを追加
index.jsのルーティングの最後に１で作ったコンポーネント（NotFound）を追加します。404ページなので、pathは設定しません。他で指定しているパスに合致しない場合は、すべてNotFoundコンポーネントに流れます。
import NotFound from "./components/NotFound/NotFound";
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/foo" component={Foo} />
<Route path="/bar" component={Bar} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
3. Netlifyのbuildコマンドを変更する
ここが肝心です。１と２をしただけでNetlifyにデプロイしても、相変わらずNetlifyの404ページが表示されてしまいます。理由はビルドしたディレクトリ直下に404.htmlが存在しないので、Netlify側は「この人は404ページを作っていないな。仕方ない、Netlifyの404ページを表示しておこう。」と判断してしまうからです。
そこで、Netlifyのビルドコマンドを「yarn build」から、以下の通りに変更します。（Netlifyの設定画面にアクセスして行えばOKです）
yarn build && cp build/index.html build/404.html
ここではビルド後のbuild/index.htmlを build/404.htmlにコピーしています。こうすることでルートディレクトリ直下に404.htmlが作成されます。また404.htmlの中身はindex.htmlと同じなので、React routerのルーティングも機能します。
あとは再度Netlifyにデプロイすれば完了です！
まとめ
404.htmlをただpublic直下に作成するよりは、他のコンポーネントと同じように管理できるので便利だと思います。UIも他のコンポーネントを流用できるので、一からhtmlを書く必要もありません。
404ページで悩んだら試してみてください。以上です！