Reactで作ったサイトをNetlifyにあげたらNot Foundになる

2020/03/10

こんにちは。たまおさ(@tamaki_osamu)です。

最近 React で Web サイトを作り Netlify にデプロイしたのですが、React-Router でルーティングしたページへ遷移しようとすると Not Found が出てしまいました。

なんで

クライアント側(Reac-Router)の設定をサーバ側(Netlify)が認識していないことが原因です。

React は SPA(single-page apps)なので基本的に単一のページしか持ちません。Reac-Router を利用するとルーティングができるようになりますがページが増えたわけではないのです。そのため、URL が変わると Netlify が「ページはありません!」と怒ってしまいます。

じゃあどうする

ブラウザ上でどんな URL が指定された場合でも単一のページ、すなわちindex.htmlを参照するようにリダイレクトさせます。

Netlify では_redirectsというファイルを用意することでリダイレクトの設定を行うことができます。このファイルに常にindex.htmlを参照するように記述することで SPA がうまく動くようになります。



記入例

Web サイトのルートに_redirectsを作成し次のように記述します。

/*    /index.html   200

これで常にindex.htmlが参照され Not Found が解消されます。

logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)