ads-to-x402.com

個人開発・運営

Vercel で無料 Web ツールを公開する完全ガイド（独自ドメイン込み）

公開: 2026年5月6日

個人開発の Web ツールを公開する場所として、 Vercel は依然として強い選択肢です。無料枠が個人プロジェクトに十分で、 Git 連携で自動デプロイされ、独自ドメイン接続も難しくありません。

本記事では、初めて Vercel で公開する人向けに、 Next.js / Vite 等のフロント系プロジェクトの一般的なケースを想定し、初回セットアップから独自ドメイン接続までの手順をまとめます。

0. 前提

  • GitHub アカウントを持っている
  • 公開したいプロジェクトが GitHub のリポジトリにある
  • 独自ドメインを使う場合、ドメインを取得済み （新規取得なら Cloudflare Registrar や Google Domains の後継等が候補）

1. Vercel アカウントを作る

Vercel のサインアップは GitHub アカウント連携が最短です。 ブラウザで vercel.com にアクセスし、Sign Up → Continue with GitHub で進めます。最初の組織（Personal Account）が自動的に作られます。

無料プラン（Hobby）は商用利用に制約がありますが、 個人の趣味プロジェクト・ポートフォリオ用途なら問題ありません。 収益化目的の本格運用に切り替える場合は Pro プランへの移行を検討します。

2. プロジェクトを Import する

Dashboard → Add New → Project → GitHub のリポジトリ一覧から 対象を選択。Vercel が自動的にフレームワークを検出します。

フレームワークの検出が外れた場合は、Project Settings の Framework Preset を手動で指定します。 Next.js / Vite / SvelteKit / Astro など主要なものは プリセットが用意されています。

モノレポ構成（リポジトリ内の特定ディレクトリだけをデプロイ）の場合は、 Root Directory にサブパスを指定するか、 Build Command と Output Directory を明示します。

3. 環境変数を設定する

API キーや認証情報がある場合は、Project Settings → Environment Variables から登録します。 環境ごとに Production / Preview / Development の 3 つに分けられます。

  • Production: 本番デプロイ（main ブランチなど）
  • Preview: feature ブランチや PR ごとに自動生成される Preview デプロイ
  • Development: ローカル開発時に vercel devで参照される値

Next.js の NEXT_PUBLIC_ プレフィックスや Vite の VITE_ プレフィックスのように、 フレームワーク側でクライアントに公開する変数の命名規則は守る必要があります。

4. 初回デプロイ

Import が完了すると自動でビルドが走ります。Build Logs を見ながら、 失敗したらメッセージを読んで修正、というイテレーションです。 よくある失敗:

  • 環境変数の未設定: ビルド時に必須の値が未定義 → Project Settings で追加して Redeploy
  • Node バージョンの不一致: ローカルと Vercel で Node のメジャーバージョンが違うと型・依存周りで失敗。package.json の engines.node を指定するか、 Project Settings → General → Node.js Version で揃える
  • キャッシュ起因のミスマッチ: 依存追加直後に古いキャッシュで ビルドすると失敗 → Deployments → ⋮ → Redeploy → Use existing Build Cache を OFF

5. 独自ドメインを接続する

Production デプロイが安定したら、独自ドメインを当てます。 Project Settings → Domains に対象ドメインを入力して Add。 Vercel が DNS の設定指示を返します。

パターン A: apex（ルート）ドメイン

例: example.com。 DNS 側で次のレコードを設定します（値は Vercel の指示に従う）。

Type: A
Name: @
Value: 76.76.21.21
Proxy: OFF（Cloudflare の場合）

Cloudflare を使っている場合、Proxy（オレンジ雲）は必ず OFF（DNS only / グレー雲）にします。 ON のままだと SSL 証明書の発行が詰まり、サイトが見えなくなります。

パターン B: サブドメイン

例: app.example.com。 DNS 側で次のように設定します。

Type: CNAME
Name: app
Value: cname.vercel-dns.com
Proxy: OFF（Cloudflare の場合）

パターン C: www からの apex リダイレクト

www.example.com も Vercel に登録し、 Redirect to Primary を有効にすると、www 訪問者を apex に 308 でリダイレクトしてくれます。SEO 観点でも整理されます。

6. SSL とドメイン伝播待ち

DNS が反映され、Vercel 側が「Valid Configuration」になると、 SSL 証明書が自動発行されます（Let's Encrypt 由来）。 通常は 5〜30 分、長くて 1 時間程度です。

ドメインが「Invalid Configuration」のまま動かない場合、 Cloudflare の Proxy 設定、レコードの値、TTL が原因のことが多いです。 Vercel の Domains 画面に表示される「期待される値」と 実際の DNS レコードを目で照らし合わせます。

7. 動作確認のチェックリスト

  • 独自ドメインで https:// アクセス時にエラーが出ない
  • http:// アクセス時に https:// に リダイレクトされる（Vercel が自動で行う）
  • www とapex の挙動が想定どおり（片方が Primary、片方が Redirect）
  • 静的アセット（画像、ads.txt、robots.txt 等）が 200 で返る

8. デプロイ運用の最低限

個人開発でも次の運用を最初から組み込んでおくと、後々楽です。

  • main ブランチ = Production: 安定状態だけ main に入れる
  • feature ブランチ = Preview: ブランチごとに自動 Preview URL が出るので、PR レビュー時の動作確認に使う
  • main へは PR 経由でマージ: 直 push を避けることで、本番に壊れたコードが入る確率を下げる

9. 無料枠の制約

Hobby プランの主な制約は次のとおりです（条件は変動するため、 最新情報は Vercel 公式の Pricing ページを確認）。

  • チームメンバーの招待数上限
  • Bandwidth（月あたりの転送量）の上限
  • Serverless Function の実行時間・回数の上限
  • 商用利用の制限（明確に「ビジネス用途」とみなされる場合）

個人の趣味プロジェクトで月数万 PV 程度なら、 Hobby プランの範囲に収まることが大半です。

10. つまずきやすいところ早見

  • ビルドが通るのにページが真っ白 → クライアント JS のエラー。 Production の Console を見る
  • 独自ドメインで SSL エラー → Cloudflare の Proxy が ON のまま、 または DNS の値が古い
  • ローカルでは動くが Vercel で動かない → 環境変数の未設定 or ファイルパスの大文字小文字違い（macOS は大小無視、Vercel は厳格）
  • Preview デプロイが認証画面 → Project Settings の Deployment Protection を OFF にする

まとめ

Vercel での公開は、初回さえ通せば 2 個目以降のプロジェクトは ほぼテンプレ作業で済みます。独自ドメイン接続まで通せば、 SEO・ブランディング・収益化（AdSense 等）の選択肢も広がります。

本記事の手順を一度通したら、後は新規ツールのたびに この流れを繰り返すだけ、というのが個人開発の継続を楽にしてくれます。

  • #Vercel
  • #デプロイ
  • #独自ドメイン

関連記事