発行:

デプロイ（アプリケーションを世界へ）

開発が完了したら、ローカル環境（localhost）を飛び出して、実際のURLで誰もがアクセスできる状態にしましょう。

1. ビルド (Build) プロセス

Reactのソースコード（JSX/TSX）は、そのままではブラウザで効率的に実行できません。ビルドツールを使って「ブラウザが理解できる最小限のファイル」に変換する必要があります。

ビルドコマンドの実行

Viteを使用している場合、以下のコマンドで本番用ファイルが生成されます。

npm run build

distディレクトリの役割

ビルドが完了すると、プロジェクト内に dist フォルダが現れます。この中にある index.html と一連のJavaScript/CSSファイルこそが、全世界に配布・公開される「Webサイトの実体」です。

2. デプロイ先の選定と公開

現代のWeb開発では、複雑なサーバー設定なしで公開できる「ホスティングサービス」が主流です。

人気のホスティングサービス

  • Vercel : Next.js 開発元による。Gitと連携するだけで数秒でデプロイ可能。
  • Cloudflare Pages : 圧倒的な配信スピードと、強力な無料枠が魅力。
  • Netlify : 直感的なUIで、ドラッグ＆ドロップでのデプロイも可能。

3. SPA特有の注意点 (404問題)

SPAをデプロイした際、ほぼ確実に直面するのが「直接アクセス時の404エラー」です。

なぜ404エラーが発生するのか

SPAには index.html しか存在しません。しかし、ユーザーが直接 example.com/about にアクセスすると、Webサーバーは律儀に about というファイルを探しに行き、見つからずに404エラーを返してしまいます。

対策としてのリライトルールの設定

これを防ぐには、 「どんなURLへのリクエストも、まずは index.html に誘導する」 という設定が必要です。これを Fallback（フォールバック） または Rewrite（リライト） と呼びます。

  • Vercel : vercel.json などで /.* を /index.html に向ける。
  • Netlify : _redirects ファイルを作成し /* /index.html 200 と記述する。

最後に：学びを次のステップへ

本シリーズを通じて、React Routerの基礎から応用、そして公開までを駆け抜けてきました。
ルーティングはアプリケーションの屋台骨です。ここを習得したあなたは、もはや「単なるコンポーネントの組み合わせ」ではなく、「一つの完結した製品」を作り上げる力を手に入れています。

さらなる高みを目指すなら、SSRを標準とした Remix や Next.js に挑戦してみるのも良いでしょう。

ハッピーコーディング！