Amazon Route 53とLambda@EdgeでReact RouterをS3バケットにデプロイ

2024-05-05

React RouterがAWS S3バケットで動作しない問題：原因と解決策

React Routerを使用して作成したReactアプリをAWS S3バケットにデプロイした場合、ルーティングが機能せず、404エラーが発生することがあります。この問題は、S3がシングルページアプリケーション (SPA) のルーティングを適切に処理できないことに起因します。

原因

S3は静的ウェブサイトホスティングを提供しますが、SPAに必要なサーバー側ルーティング機能は備えていません。そのため、React Routerのようなクライアント側ルーティングライブラリは、URLの変化を適切に処理できず、404エラーが発生します。

解決策

この問題を解決するには、以下の2つの主要な方法があります。

CloudFrontとエラーページを使用する

CloudFrontディストリビューションを作成し、S3バケットをオリジンとして設定します。
CloudFrontのカスタムエラーレスポンス機能を使用して、404エラーが発生した場合にindex.htmlファイルを返します。
S3バケットの静的ウェブサイトホスティング設定でインデックスドキュメントにindex.htmlを設定します。

この方法により、CloudFrontが404エラーを検出してindex.htmlファイルを返し、React Routerが適切にルーティング処理を実行できるようになります。

SPA専用のホスティングサービスを使用する

NetlifyやVercelなどのSPA専用のホスティングサービスは、SPAに必要なサーバー側ルーティング機能を備えています。これらのサービスを利用することで、S3バケットでの問題を回避し、React Routerを問題なく動作させることができます。

上記に加え、以下の点にも注意する必要があります。

React Routerの最新バージョンを使用していることを確認してください。
アプリケーションの設定が正しく構成されていることを確認してください。
ブラウザのキャッシュをクリアして、問題が解決しないかどうかを確認してください。

以下は、React RouterとCloudFrontを使用してS3バケットにデプロイされたReactアプリを動作させるためのサンプルコードです。

CloudFrontディストリビューションの作成

CloudFrontコンソールにアクセスし、新しいディストリビューションを作成します。

オリジン: S3バケットを選択します。
デフォルトキャッシュキー: /
エラーページ: 404エラーが発生した場合にindex.htmlファイルを返すように設定します。

S3バケットの静的ウェブサイトホスティング設定

S3バケットコンソールにアクセスし、静的ウェブサイトホスティングタブを選択します。

インデックスドキュメント: index.html
エラードキュメント: なし

React Routerの設定

ReactアプリのApp.jsファイルで、Routerコンポーネントを使用します。

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;