Chapter 05

デプロイ

snaga
snaga
2022.05.08に更新

ビルド

本番用ビルド

yarn build

Web サーバの設定

404 エラー時の Fallback の設定

React で表示される URL はクライアントサイドで生成されたものであり、サーバサイドに存在しているものではない。そのため、直リンクをされたり、ブラウザでリロードされたりすると、404 エラーとなる。

Node.js の開発用サーバなどは適切にハンドリングしてくれるが、本番デプロイをする対象の Web サーバはそうではない場合も多い。そのため、404 エラーが発生した場合に、React の実在するページ(index.html など)にリダイレクトする、といった設定を行っておく必要がある。

例えば、Github Pages を React のホスティングに使う場合は、404.html を作成して meta タグの refresh でトップページにリダイレクトさせることができる。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="refresh" content="1; URL=./index.html">
  <title>404 Not Found</title>
</head>
<body>
404 Not Found
</body>
</html>