現在の React アプリの多くは、Vite で静的ファイルのフォルダにビルドされます。1 つの index.html と、すべてのページを描画する JavaScript です。Lobsite はそのフォルダをホストします。npm run build を実行してから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでアプリが公開されます。シングルページモードをオンにすると、React Router のディープリンクが機能します。
仕組み
npm run buildでアプリをビルドします。Vite プロジェクトはdist/を、古い Create React App プロジェクトはbuild/を書き出します。- プロジェクトで
npx lobsiteを実行します。ビルドフォルダを検出してデプロイします。最初のデプロイにアカウントは不要で、6 時間有効です。 - React Router のためにシングルページモードをオンにします。
lobsite.tomlのspa = true、またはサイト設定の シングルページアプリ です。取得リンクから無料アカウントにサイトを残してください。
React Router とディープリンク
createBrowserRouter や <BrowserRouter> では、アドレスは /orders/42 のようになります。React Router がブラウザでページを切り替えるため、リンクのクリックはどこでも機能します。そのアドレスを直接開いたり再読み込みしたりすると、ファイルではない /orders/42 をサーバーに要求します。シングルページモードが index.html で応答し、React Router が正しいページを描画します。
<HashRouter>（/#/orders/42のようなアドレス）は、サーバーが/しか見ないためシングルページモードなしで動作します。ブラウザルートのほうが見た目が良く、検索エンジンにも適しています。ssr: falseの React Router のフレームワークモードもシングルページアプリをビルドします。prerenderを設定すると、指定したページが独自の HTML ファイルとして書き出され、残りはシングルページモードが処理します。- TanStack Router と wouter も React Router と同じように動作します。
package.json にルーターがあり、シングルページモードがオフの場合は、デプロイ時にヒントが表示されます。
Create React App からの移行
React チームは 2025 年 2 月に Create React App を非推奨とし、新しいアプリにはフレームワークか Vite を推奨しています。CRA プロジェクトは引き続きデプロイできます。npx lobsite は build/ を検出し、CRA がビルドにコピーする public/ をスキップします。Vite に移行すると、ホスティング面でいくつか変わります。
- ビルドフォルダは
dist/になりますが、同じように検出されます。 REACT_APP_の環境変数はVITE_になり、import.meta.envで読み取ります。index.htmlはpublic/からプロジェクトの最上位フォルダに移動します。
アプリにサーバーレンダリングが必要な場合は、静的エクスポートの Next.js か、サーバーで React を実行するホストをご検討ください。
lobsite.toml に spa = true を書くか、ダッシュボードのスイッチをオンにするだけです。ディープリンクでアプリが開き、存在しないファイルは引き続き 404 になります。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
React ホストの比較
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| React Router のディープリンク | spa = true、またはダッシュボードのスイッチ |
_redirects のルール |
vercel.json のリライト |
いいえ: HashRouter、またはステータス 404 で配信する 404.html |
| デプロイ後に存在しないスクリプトファイル | 404（明確なエラー） | アプリの index.html |
アプリの index.html |
404 |
| サーバーレンダリング | いいえ | はい（フレームワークで） | はい（フレームワークで） | いいえ |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要（リポジトリも） |
| バックエンド不要のフォーム | はい（サイトをアカウントに残した後） | はい | いいえ | いいえ |
| カスタムドメイン | はい、無料 | はい | はい | はい |
Vite がビルドするブラウザで動く React アプリなら、Lobsite はコマンド 1 つでデプロイし、変更されたチャンクのみをアップロードし、デプロイごとにプレビュー URL を保持します。
よくある質問
React Router のページを更新すると「Not found」と表示されるのはなぜですか？
そのアドレスはアプリの中にしか存在せず、サーバーにはファイルがありません。lobsite.toml の spa = true、またはサイト設定の シングルページアプリ でシングルページモードをオンにしてください。
Create React App プロジェクトをここでホストできますか？
はい。npm run build と npx lobsite を実行すると、build/ フォルダが検出されてデプロイされます。ブラウザルートの React Router を使っている場合は、シングルページモードをオンにしてください。
React のフォームはバックエンドなしで送信できますか？
はい、フォームがビルドされた HTML（例えば index.html）にあり、/_lobsite/forms/contact に送信する場合です。React だけが描画するフォームはデプロイ時に検出されず、送信は拒否されます。フォームのドキュメントで、フォームを HTML に残して fetch() で送信する方法を説明しています。
React アプリをホストするのに Next.js は必要ですか？
いいえ。Vite でビルドした React アプリは通常のファイルで、どの静的ホストでも動作します。Next.js はサーバーレンダリングやプリレンダリングされたページのためのもので、独自の静的エクスポートがあります。