Vite は React、Vue、Svelte、Solid、通常の JavaScript プロジェクトを、静的ファイルのフォルダ dist/ にビルドします。Lobsite はそのフォルダをホストします。npm run build を実行してから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでアプリが公開されます。クライアント側ルーティングがある場合は、設定 1 つでディープリンクが機能します。
Vite テンプレートを使用してブラウザ ゲームを作成しますか? Phaser ホスティング ガイド は、この展開ワークフローと並行して、ゲーム アセット、キャンバス サイズ設定、プレイテスト ビルドをカバーします。
仕組み
npm run build（つまりvite build）でビルドします。アプリはdist/に、ハッシュ付きファイルはdist/assets/に出力されます。- プロジェクトで
npx lobsiteを実行します。デプロイされるのはdist/で、Vite がすでにビルドにコピーしたpublic/ではありません。最初のデプロイにアカウントは不要で、6 時間有効です。 - アプリにルーターがある場合はシングルページモードをオンにします。
lobsite.tomlにspa = trueを追加するか、サイト設定の シングルページアプリ を切り替えます。その後、取得リンクから無料アカウントにサイトを残してください。
ルーティングとシングルページモード
React Router、Vue Router、TanStack Router を使う Vite アプリには index.html が 1 つあります。/settings を直接開くと、サーバーに存在しないファイルを要求します。シングルページモードをオンにすると、Lobsite はこれらのパスに index.html で応答し、ルーターがページを描画します。
# lobsite.toml
spa = true
アプリが返るのはページのリクエストのみです。古い /assets/index-3f9a.js のような存在しないファイルは本物の 404 になるため、デプロイ後に前のバージョンを開いたままの訪問者には、スクリプトの代わりの HTML ではなく明確なエラーが返ります。package.json にルーターがあり、シングルページモードがオフの場合は、デプロイ時にヒントが表示されます。詳しくはドキュメントをご覧ください。
vite.config とビルド
baseはデフォルトの/のままにします。アプリはアドレスの最上位から配信されます。GitHub Pages のプロジェクトサイトでのみ設定し、移行するときに削除してください。VITE_で始まる環境変数はビルドに書き込まれます。アプリを開く人なら誰でも見られるため、シークレットを入れないでください。.envファイル自体はデプロイされません。- 複数のページ（2 つ以上の HTML ファイルを指定した
build.rollupOptions.input）はマルチページサイトです。各ページがファイルなので、シングルページモードは不要です。 npm run previewはdist/をローカルで配信するので、デプロイ前の最も速い確認方法です。
ハッシュ付きファイルのキャッシュ
Vite は index-3f9a.js のように各ファイルの内容のハッシュを名前に含めるため、同じ名前のファイルが変わることはありません。Lobsite もファイルを内容で保存するため、デプロイでは変更されたチャンクのみをアップロードします。ブラウザにこれらのファイルを 1 年間保持させるには、ヘッダールールを追加してください。
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html は常に再確認されるため、訪問者はデプロイ直後に新しいバージョンを受け取ります。
lobsite.toml に spa = true を書くか、ダッシュボードのスイッチをオンにするだけです。ディープリンクでアプリが開き、存在しないファイルは引き続き 404 になります。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
Vite ホストの比較
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| シングルページアプリのディープリンク | spa = true、またはダッシュボードのスイッチ |
_redirects のルール |
vercel.json のリライト |
いいえ: index.html を 404.html にコピー、ステータス 404 で配信 |
| 存在しないスクリプトファイル | 404 | アプリの index.html |
アプリの index.html |
404 |
| サーバーでのビルド | いいえ: dist/ をデプロイ |
はい | はい | GitHub Actions で |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要（リポジトリも） |
| カスタムドメイン | はい、無料 | はい | はい | はい |
Netlify と Vercel は Git からビルドし、サーバー関数を実行します。Lobsite は、ビルド済みの Vite アプリをローカル環境、CI、AI エージェントから公開する最も速い方法で、シングルページのルーティングは 1 行かクリック 1 回です。
よくある質問
Vite アプリのホームページ以外のページに「Not found」と表示されるのはなぜですか？
アプリはクライアント側ルーティングを使っており、サーバーにはそれらのパスのファイルがありません。シングルページモードをオンにしてください。lobsite.toml の spa = true、またはサイト設定の シングルページアプリ です。
Lobsite は Vite のビルドを実行しますか？
いいえ。ローカル環境や CI でビルドしてから dist/ をデプロイしてください。npm run preview で確認したものがそのまま公開されます。
Vite の環境変数を使えますか？
はい、VITE_ で始まるものです。実行時にビルドに書き込まれます。変更後は再度ビルドしてください。シークレットは Vite アプリではなくサーバーに置いてください。
Vite のマルチページサイトにシングルページモードは必要ですか？
いいえ。各 HTML ページは独立したファイルで、about.html は /about で開きます。シングルページモードをオフのままにすると、入力ミスのアドレスには 404.html が返ります。