React の build を
公開する
Vite、Create React Appなどで生成した本番ビルドをアップロードし、リロードに強いルート、HTTPS、独自ドメインまで確認できます。
アップロードするのはソースではなくビルド出力
React のソースファイルは開発用です。DeployPages は本番ビルドで生成された静的ファイルを配信します。
Vite React
Viteの標準出力はdistです。vite.config.jsでbuild.outDirやbaseを変えている場合は、実際の出力フォルダと素材URLを確認します。
Create React App
CRAは本番ファイルをbuildに出力します。サブパスで公開する場合はhomepage設定が素材URLに影響します。
その他の React SPA
index.html、JavaScript、CSS、画像、フォントなどを含む静的フォルダを生成できれば、同じ考え方で公開できます。
React アプリが公開後に壊れる理由
React SPA は最初に index.html を読み込みます
多くの React SPA は、1つの HTML を読み込んだあとに JavaScript 側のルーターで画面を切り替えます。
ローカルの開発サーバーでは /dashboard のような URL も index.html に戻してくれますが、単純な静的配信では実ファイルがないため 404 になることがあります。
リロード時に起きること
静的ファイルサーバーは GET /settings を受け取ると、settings というファイルまたはフォルダを探します。
React のビルドには通常 index.html とハッシュ付きアセットしかないため、React Router が動く前にホスト側で 404 が返ることがあります。
DeployPages での扱い
実ファイルではないドキュメントルートでは、SPA fallback により index.html を返します。
HTML が読み込まれたあと、React が現在の URL を読み取り、該当する画面をブラウザ上で描画します。
公開時の前提
dist または build フォルダをアップロードします。ルートの fallback、HTTPS、圧縮、静的配信は公開フローに含まれます。
React 公開前の確認
ビルドが成功しても、公開リンクでしか見えない失敗があります。
アセットのbase設定
JavaScriptやCSSのURLがずれていると白い画面になります。Viteのbase、CRAのhomepageを確認します。
クライアントルート
/login、/pricing、/dashboard など、共有される可能性がある URL を直接開いてリロードします。
API の呼び出し先
静的なReactアプリは外部APIを呼べますが、バックエンド自体は実行しません。秘密鍵や非公開APIキーはフロントエンドに入れません。
環境変数
多くのReactビルドツールでは、公開用の環境値はビルド時にバンドルへ埋め込まれます。変更後は再ビルドが必要です。
React 公開の手順
本番ビルドを作る
ローカルでビルドを実行し、React、CSS、素材をブラウザで読める静的フォルダにまとめます。
出力フォルダを確認する
index.htmlと生成された素材が含まれているか確認します。Viteは通常dist、Create React Appは通常buildです。
フォルダごとアップロードする
distまたはbuild全体をアップロードします。index.htmlだけを上げると、CSSやJSが欠けます。
深い URL をテストする
ネストしたページを開いてリロードし、ホスト側の 404 ではなくアプリ画面が表示されるか確認します。
React 公開でよくある問題
公開後に白い画面になる
まずDevToolsでJSやCSSの404を確認します。base設定の誤り、素材不足、違うフォルダのアップロードがよくある原因です。
ネストしたルートを更新すると 404 になる
静的ホストが実ファイルを探しています。SPA fallback を使い、該当するファイルがないドキュメントルートでは index.html を返します。
ローカルでは読めるアセットが公開後に見つからない
絶対パス、public base、アップロードしたフォルダに生成素材が含まれているかを確認します。
環境変数を変えても反映されない
新しい公開用変数で再ビルドし、その出力をアップロードします。公開済みバンドルはサーバー側の秘密環境変数を実行時に読みません。
React 公開 FAQ
Q:公開後に React アプリが白い画面になる理由は？
多くは素材パスの誤りかバンドル不足です。Viteではbase、CRAではhomepageを確認し、生成された素材を含むフォルダ全体をアップロードします。
Q:nginx や redirect を自分で設定する必要はありますか？
通常は不要です。DeployPagesは存在しないドキュメントルートをindex.htmlに戻すため、SPA用のrewriteを自分で保守する必要はありません。
Q:プロジェクトフォルダと dist フォルダのどちらをアップロードしますか？
本番出力フォルダをアップロードします。Viteなら通常dist、Create React Appなら通常buildです。
Q:環境変数は使えますか？
公開用の値はビルド時に解決されます。DeployPagesは完成した静的出力を配信するため、サーバー側の実行時注入はこの手順には含まれません。
Q:公開後の React アプリから API を呼べますか？
はい。ブラウザから外部 API を呼べます。ただしフロントエンドに含めた値は利用者から見えるため、秘密鍵はバックエンド側に置きます。
Q:Next.js も同じ場所で公開できますか？
静的書き出しできる構成なら公開できます。output: 'export' でoutフォルダを生成し、それをアップロードします。SSRが必要なルートは別の実行環境が必要です。
Q:後から独自ドメインを接続できますか？
はい。サイト公開後に Console でドメインを追加し、DNS の案内に従います。レコードが解決されると HTTPS の準備が進みます。