AI ビルダーのデモはどれも *.something.app のプレビュー URL で終わります。それは製品ではなく、クリックできるスクリーンショットです。出荷とは、あなたのドメイン、HTTPS、そして驚かされない請求書を意味します。以下が道のりの全体像と、主要 3 ホストの違いです。
3 つのホスト
AI で作った Web アプリなら、ほぼ間違いなくこのいずれかに行き着きます。3 つとも、カスタムドメインで自動 SSL/TLS を提供し、設定フローはほぼ同じです。
| ホスト | 最適な場面 | カスタムドメインの向け先 | 料金の形 |
|---|---|---|---|
| Cloudflare Pages | 静的 / コンテンツ / コスト重視 | your-project.pages.dev | 定額;帯域無制限 |
| Vercel | Next.js 中心のアプリ | cname.vercel-dns.com | 寛大な無料枠、従量課金 |
| Netlify | フォーム / 認証を内蔵で欲しい | your-site.netlify.app | チームあたり $19/mo、1 TB |
DNS から HTTPS までのループ
流れはどこでも同じです:
- ホストのダッシュボードでドメインを追加する(「保留中(pending)」と表示されます)。
- レジストラ(または Cloudflare の DNS)で DNS を向ける:あなたのサブドメインから上記ホストの向け先への
CNAME。 - apex の場合(
wwwなしのexample.com)、生の CNAME は使えません —— ホストや DNS プロバイダーの CNAME フラット化、または ALIAS/ANAME レコードを使います。Cloudflare は apex のフラット化を自動で行います。 - 検証を待つ。 ホストがレコードを確認し、証明書を自動でプロビジョニングします —— たいてい数分です。喜ぶ前に、HTTPS で解決されることを確認しましょう。
nginx も certbot も、伝播の子守りも不要です。人がつまずく点は 2 つ:apex 対 www(両方を設定し、一方を他方へリダイレクトする)、そしてメールとアプリが同じドメインを共有できることを忘れること。
コストの罠
ここはチュートリアルが飛ばす部分です。Vercel の無料枠は寛大ですが、従量課金です —— 一度バズれば、$0 の請求が $500+ の不意打ちに変わりかねません。Cloudflare Pages は正反対です。最初は好きになりにくいものの、トラフィックがどうであれ請求額はほとんど動きません —— 帯域無制限、月 500 ビルドまで無料、プロジェクトあたり最大 100 のカスタムドメイン、そして世界最速の CDN(300+ の拠点)。Netlify はその中間で、定額 $19/mo のチームプランとフォーム/認証を作り込み済みです。
コンテンツサイトや、ほぼ静的なアプリを出荷していて、トラフィックの急増について考えたくないなら、Cloudflare Pages が無難な既定値です。Next.js の機能を深く使っているなら、Vercel が最も抵抗の少ない道です。バックエンドなしで組み込みのフォーム処理が欲しいなら、Netlify がその価値を発揮します。
結論
デプロイはデモと製品を分けるステップであり、2026 年には 10 分の作業です —— ただし、機能一覧だけでなく、アプリに合ったホストを選び、料金モデルに気を配ればの話です。まずはアプリを用意しましょう:30 分で 1 つ作る様子をご覧ください。