Lovable で作ったサイトをホスティングする方法
Lovable が生成するのは React/Vite のアプリです。好きな場所でホスティングするには、まず静的ファイルにビルドし、その出力を公開します。SiteDrop がビルドフォルダーを受け取り、公開リンクを発行します。
無料でサイトを公開 →4 ステップで公開
- Lovable でプロジェクトのコードを書き出すかダウンロードします（GitHub を接続してリポジトリをダウンロードしても構いません）。
- パソコンで npm install、続けて npm run build を実行し、静的出力フォルダー（通常は dist）を作ります。
- dist フォルダーの中身を zip にします。index.html は zip の最上位に置く必要があります。
- zip を SiteDrop にアップロードします。
使えるファイルの種類
Lovable が作るのは React/Vite のアプリなので、ホスティングするのはビルド済みの出力、つまり npm run build のあとの静的な dist フォルダーで、中身は素の HTML/CSS/JS です。これは問題なくアップロードできます。静的にホスティングできないのは、稼働中のバックエンドにつながっているもの（認証、データベース、サーバーのルート）ですが、マーケティングサイトやポートフォリオなら普通はありません。
うまくいかないときと直し方
- プロジェクトを zip にしたら真っ白なページになった。
ビルドではなくソースを zip にしています。npm install、続けて npm run build を実行し、dist フォルダーの中身を index.html が最上位に来るように zip にしてください。
- 真っ白なページになり、コンソールに /assets/* の 404 が出る。
Vite は既定でアセットに絶対パスを使います。ビルド前に vite.config で base: './' を設定して、アセットが zip のルートから解決されるようにし、ビルドし直してください。
- 公開すると Supabase や認証の機能が動かなくなる。
それらの機能には、静的ホスティングでは動かない稼働中のバックエンドと環境キーが必要です。静的なフロントエンドはここで公開し、動的な機能はサーバーが動くサービスに残してください。
SiteDrop と、Netlify をそのまま使う場合の比較
Netlify は git リポジトリから Vite のビルドを代わりに実行でき、自動デプロイしたい場合には便利です。その代わり、git の接続、ビルドの設定、環境変数の管理が必要になります。手元で一度ビルドして dist フォルダーをホスティングするだけでよければ、SiteDrop がその zip を直接受け取り、リンク（有料プランなら独自ドメインも）を仕組みなしで発行します。
Lovable のホスティング — よくある質問
なぜ先にビルドする必要があるのですか？
Lovable のアプリは素の HTML ではなく React のプロジェクトです。ビルドすることで、ブラウザーが配信できる静的ファイルになります。dist フォルダーができれば、あとは zip をアップロードするだけです。
コマンドラインにはまったく触りたくないのですが、方法はありますか？
ビルド後に完全に静的になるプロジェクトなら、Lovable（またはほかの AI アシスタント）にビルド済み・静的なバージョンを 1 つ作ってもらい、それを zip にしてアップロードしてください。サーバーが必要な動的な機能は、静的ホスティングには向きません。
Lovable のサイトを公開する準備はできましたか？
.zip をアップロードすれば、1 分以内に共有できる公開リンクが手に入ります。7 日間の無料プレビュー付き、カードは不要です。
今すぐ公開する →