SPA（React）をRenderでデプロイしたらF5リロード時に404エラーが発生する問題を即解決

August 9, 2025August 12, 2025

React/VueなどのSPAをRenderでデプロイした直後、F5キーでリロードしたりURLを直接入力すると404エラーが表示される問題の解決方法を解説します。3分でRender Dashboardから設定可能です。

🚨 こんな症状で困っていませんか？

Renderでデプロイしたら /about ページでF5リロードすると404エラー
React Routerで作ったページのURLを直接入力すると「Page Not Found」
ホームページは表示されるが、他のページをリロードできない

【緊急】まず確認：なぜRenderでデプロイしたSPAで404エラーが起きるのか

Renderにデプロイ直後に404エラーが起きる根本的な原因を理解しましょう。

SPAとサーバーの仕組みの違い

動作	SPA（クライアント側）	サーバー（Render側）
ページ遷移	JavaScriptでURLを変更（`/about`に見える）	実際のファイルは`index.html`のみ
F5リロード	ブラウザがサーバーに`/about`を要求	`/about`フォルダが存在しない→404エラー
直接URL入力	–	サーバーは物理ファイルを探す→見つからない

問題の本質

SPA：すべてのページが実際はindex.htmlの1つのファイル
React Router：JavaScript内でURLを管理（クライアントサイドルーティング）
サーバー：/aboutという物理フォルダ/ファイルを探そうとする
結果：ファイルが見つからず404エラー

問題の特定：本当に404エラーかを確認する方法

まず、問題が確実に404エラーかを確認しましょう。

簡単な確認手順

デプロイしたサイトのホームページ（/）を開く → ✅ 正常表示されるはず
React Routerで設定したページ（例：/about）にリンクで移動 → ✅ 正常表示されるはず
そのページでF5キーを押す → ❌ 404エラーまたは「Page Not Found」
ブラウザのアドレスバーに直接https://yoursite.onrender.com/aboutを入力 → ❌ 404エラー

ブラウザ開発者ツールでの確認

F12キーで開発者ツールを開く
Networkタブを選択
404エラーのページでF5リロード
Status列で404が表示されることを確認

【解決手順】Render Dashboardでリライトルール設定（3分で完了）

Renderの管理画面から、すべてのリクエストをindex.htmlにリダイレクトする設定を行います。

ステップ1：Render Dashboardにアクセス

Render Dashboardにログイン
対象のStatic Siteをクリック
左サイドバーの「Redirects/Rewrites」をクリック

ステップ2：リライトルールの追加

「Create Rule」ボタンをクリック
以下の設定を入力：

フィールド	入力値	説明
Source	`/*`	すべてのパスにマッチ
Destination	`/index.html`	リダイレクト先
Action	`Rewrite`	URLを変更せずに内容を返す

「Save Changes」をクリック
数分待ってデプロイが完了するのを確認

⚠️ 重要：RedirectではなくRewriteを使う理由

設定	結果	問題
Redirect	URLが`/`に変更される	ページの識別ができない
Rewrite	URL：`/about`のまま内容：`index.html`を返す	✅ 正常動作

React Router側で必要な確認事項

サーバー側の設定が完了したら、React Routerの設定も確認しましょう。

React Router v6での正しい設定例

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 404ページ用のキャッチオール */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

NotFoundコンポーネントの作成

// components/NotFound.js
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div>
      <h1>404 - ページが見つかりません</h1>
      <p>お探しのページは存在しません。</p>
      <Link to="/">ホームに戻る</Link>
    </div>
  );
}

export default NotFound;

✅ 設定確認チェックリスト

BrowserRouterを使用している（HashRouterではない）
path="*"でキャッチオールルートを設定
各Routeにelementプロパティが正しく設定されている
コンポーネントが正しくexportされている

代替案：_redirectsファイルでの設定方法

Render Dashboardからの設定が上手くいかない場合の代替手段として、_redirectsファイルを使う方法もあります。

_redirectsファイルの作成手順

プロジェクトのpublicフォルダに_redirectsファイルを作成
以下の内容を記述：

/*    /index.html   200

ファイルを保存してGitにcommit & push
Renderが自動でデプロイを実行

⚠️ 注意点

_redirectsファイルはRenderでは実験的サポートの可能性
ビルド後のフォルダ（distやbuild）に確実にコピーされることを確認
Render Dashboardでの設定を優先推奨

よくある設定ミスと即座に解決する方法

問題	原因	解決方法
設定したのに404エラーが続く	キャッシュが残っている	ブラウザのハードリロード（Ctrl+Shift+R）
ホームページも表示されない	Publish Directoryが間違い	Settings→Build設定で`dist`または`build`を確認
リライトルールが保存できない	Source形式が間違い	`/*`（先頭にスラッシュ必須）
無限リダイレクトが発生	ActionがRedirectになっている	ActionをRewriteに変更

動作確認の手順

設定変更後、数分待つ（デプロイに時間がかかる）
ブラウザのハードリロード：Ctrl + Shift + R（Windows）/ Cmd + Shift + R（Mac）
シークレットモードで確認（キャッシュの影響を除外）
React Router のページでF5リロードを実行
✅ 正常にページが表示されればOK

設定完了！SPA routing問題を根本解決

これでRenderでデプロイしたSPAの404エラー問題が解決しました。

🎉 解決できたこと

F5リロード：どのページでもリロード可能
直接URL：/aboutなどのURLを直接入力して表示
ブックマーク：特定ページのブックマークが正常動作
シェア：SNSでページURLをシェア可能
SEO：検索エンジンがページを正しく認識

重要なリンク集

次のステップ

カスタムドメインの設定：独自ドメインでの運用
環境変数の活用：API URLなどの設定
ビルド最適化：デプロイ時間の短縮
監視設定：サイトの稼働状況確認

SPAをRenderでデプロイする際の404エラーは、リライトルール1つで確実に解決できます。今後新しいプロジェクトでも同じ設定を行えば、最初から404エラーを防げます！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！