ワンクリックでCloudflareにデプロイする方法

2026年7月18日更新——料金を現行プランに合わせて更新し、プラットフォーム別のデプロイ経路を刷新。

VULKのワンクリックデプロイはどう機能する?

完全な答え:VULKエディタでDeployをクリックすると、VULKが自社サーバーでプロジェクトをビルドし(vite build——TypeScriptコンパイル、バンドル、Tailwindのパージ、ミニファイ、ハッシュ付きファイル名)、静的出力をCloudflareのグローバルネットワークで公開し、your-project.vulk.spaceのライブHTTPS URLを手渡します。全プロセス——ビルド、公開、SSL——は10〜30秒で完了します。CI/CDパイプラインも、ホスティングダッシュボードも、設定も不要です。

この速度が重要なのは、それを取り巻く文脈のためです:VULKの中央値ビルダーはサインアップから生成アプリまで47秒で到達し、デプロイも同じリズムを保ちます——アイデアからライブURLまで合計2分未満(VULKプラットフォームデータ、2026年7月、N = 11,355プロジェクト)。デプロイは全プランに含まれ、プランはBuilder $25/月から。

なぜVercelやNetlifyではなくCloudflareなのか?

これはいつも聞かれます。AIコードビルダーはどこもデフォルトでVercelを選びます。当然の選択です——優れたDX、Next.jsとの緊密な統合、簡単なセットアップ。ではなぜ私はVULKのデプロイパイプラインをCloudflareに置いたのか?

理由は2つあり、どちらもVULKが生成するアプリにとって何が重要かに帰着します。

グローバルネットワーク。 公開されたアプリはCloudflareのグローバルネットワークで動くため、各訪問者に近い拠点から配信されます。東京のユーザーもサンパウロのユーザーも近くから読み込み、リージョンを選ぶ必要はありません。

アトミックデプロイ。 再デプロイ時、Cloudflareは新バージョンのアップロードが完全に終わるまで旧バージョンを配信し、その後瞬時に切り替えます。中途半端なデプロイ状態なし。ダウンタイムなし。ユーザーが頻繁にイテレーションして再デプロイするプラットフォームには不可欠です。

これはVULKがウェブ向けに生成するもの、つまり静的ファイルにビルドされるReact + Viteアプリに合っています。プロジェクトにバックエンドがある場合、その部分は後述のとおりVULKのインフラで動きます。

Deployをクリックすると何がステップごとに起こる?

ステップ1:Deployをクリック。 ボタンは上部ツールバーの、プレビューコントロールの隣にあります。デプロイダイアログが開き、ビルドの進行がリアルタイムで表示されます。

ステップ2:VULKが自社サーバーでプロジェクトをビルド。 React + Viteアプリではvite buildが実行されます:TypeScriptをJavaScriptにコンパイルし、全モジュールを最適化されたチャンクにバンドルし、Tailwind CSSを処理・パージし、すべてをミニファイし、キャッシュバスティング用のハッシュ付きファイル名を生成し、クリーンなdist/ディレクトリを出力します。これはあなたのブラウザではなく、私たちのインフラで実行されます。ビルド時間はプロジェクトサイズにより5〜20秒です。

ステップ3:Cloudflareのネットワークで公開。 ビルド出力——静的なHTML、CSS、JS、アセット——がCloudflareのグローバルネットワークで公開され、ファイルは各訪問者の近くから配信されます。

ステップ4:ライブURLを取得。 プロジェクトは専用のvulk.spaceアドレスのURL(例:workout-tracker.vulk.space)で公開されます。HTTPSは自動です。設定不要。待ち時間なし。

デプロイ前に何が必要?

Deployを押す前に確認すべき2点:

アプリがプレビューでコンパイルできること。 プレビューがエラーや白い画面を示すなら、本番ビルドも失敗します。Viteの本番ビルドは開発サーバーより厳格で、ホットモジュールリプレースメントが見逃すインポートエラーや型の問題を捕まえます。まず直しましょう。

プロジェクトに合ったプランであること。 プラン:Builder($25/月)、Pro($50/月)、Team($80/月)、Max($200/月)、Business($300/月)。バックエンド + PostgreSQLのデプロイもカスタムドメインも、どちらもBuilderからです。

デプロイされたアプリはどれくらい速い?

これを気にかけるのは、VULKからデプロイされるアプリが私たちの品質を代表するからです。遅ければ、それは私たちに跳ね返ります。

VULKが生成するReactアプリはデフォルトで最適化されています。Viteのビルドはコード分割されたチャンク、ツリーシェイクされたバンドル、圧縮されたアセットを生成し、Cloudflareのグローバルネットワークがそれらを各訪問者の近くから配信します:

• 各訪問者の近くから配信: アプリは1つのリージョンの単一サーバーではなく、Cloudflareのグローバルネットワークから届けられます
• 軽量なバンドル: コード分割、ツリーシェイキング、ミニファイにより、ブラウザがダウンロードする量を小さく保ちます
• キャッシュ動作: 静的アセットにはハッシュ付きファイル名が付くため長期間キャッシュでき、リピーターはキャッシュから読み込みます

これらは何も設定不要です。ビルドパイプラインとCDN設定は自動で処理されます。

カスタムドメインの接続は?

vulk.spaceのアドレスはテストや共有には十分ですが、本格的なプロジェクトには独自ドメインが欲しいところです。カスタムドメインはBuilderから含まれています。手順:

1. VULKでプロジェクトを開き、ドメイン(myapp.comやapp.mydomain.comなど)を追加します。

2. ドメインのレジストラまたはDNSプロバイダーで、VULKが表示するDNSレコードを追加し、ドメインがアプリを指すようにします。

3. VULKがドメインを公開済みのアプリに接続し、SSL証明書を自動でプロビジョニングします。

4. DNSの変更が反映されると、アプリは独自ドメインでHTTPS配信されます。

変更後の再デプロイは?

開発はイテレーティブです。デプロイ後も変更します——新機能、バグ修正、デザイン調整。再デプロイは初回デプロイと同一です:

1. エディタで変更する(プロンプトまたは手動のコード編集)。
2. プレビューで確認する。
3. Deployをクリックする。

新バージョンが同じURLで旧バージョンを置き換えます。Cloudflareのアトミックデプロイにより切り替えは瞬時——訪問者が中途半端な状態を見ることはありません。

プロジェクトのバージョン履歴から以前のバージョンを開き、ファイルを復元できます。復元後にプレビューを確認し、もう一度デプロイして公開URLを更新してください。

何がデプロイされ、どこで動く?

デプロイされる: すべての静的ビルド出力。HTMLファイル、JavaScriptバンドル、CSSファイル、public/ディレクトリの画像、フォント、その他の静的アセット。

VULKのサーバーに残る: ソースコード。.tsxファイル、node_modules、package.json、ビルド設定はそこに残ります。デプロイされたサイトにはコンパイル済み出力のみが含まれます。

VULKのインフラでホスト: バックエンドAPI。プロジェクトがVULKのバックエンド生成(PostgreSQL + APIルート)を使う場合、バックエンドはVULKのインフラで動きます。デプロイされたフロントエンドは私たちのサーバーへAPIコールします。

各プラットフォームはどうデプロイされる?

VULKが生成する各プラットフォームには、それぞれのデプロイ経路があります:

よくある問題のトラブルシューティングは?

ビルドが失敗する。 最も多い原因は、プレビューの開発サーバーが許容したがViteの本番ビルドが拒否するTypeScriptまたはインポートのエラーです。デプロイダイアログのエラーメッセージを確認し、VULKに修正を頼みます。例:「デプロイが'Cannot find module ./components/Chart'で失敗した。インポートを直して——ファイルはChartCard.tsx。」

デプロイ後に白いページ。 通常はベースパスかルーティングの問題です。VULKに頼みます:「デプロイしたアプリが白いページを表示する。Viteのベースパスが'/'で、React Routerにルートパスのルートがあることを確認して。」

画像やフォントが壊れる。 静的アセットはpublic/ディレクトリに置き、/で始まる絶対パスで参照する必要があります。相対パスは開発では動きますが、デプロイ後に壊れます。