AIのあとしまつ

実務・技術解説

本番ドメイン・SSL・環境変数の設定手順：Vercel × Next.js 完全ガイド

Vercel上でNext.jsアプリを本番公開するための、ドメイン設定・SSL対応・環境変数管理の手順を解説します。

Vercel ドメイン 設定SSL 設定 Next.js環境変数 本番 設定カスタムドメイン VercelHTTPS 設定本番環境 設定 手順Vercel デプロイ 本番化ドメイン DNS 設定

Vercelにデプロイすれば xxx.vercel.app というURLでアプリにアクセスできる。これを yourapp.jp のような独自ドメインでHTTPS公開するまでの手順は、慣れていないと意外と詰まる。ドメイン購入、DNS設定、Vercelでのドメイン登録、SSL証明書の発行、環境変数の整合——この一連の作業をまとめて解説する。

ドメインの購入とどこで買うか

独自ドメインはドメインレジストラ（販売会社）で購入する。よく使われる選択肢：

サービス特徴.com の年額目安
お名前.com国内最大手。初年度安い初年度無料〜数百円、更新は1,500円〜
Cloudflare Registrar原価販売。管理画面も使いやすい約1,000〜1,200円
Google Domains（Squarespace Domains）シンプル。Google連携しやすい約1,400円
Xserver Domain国内サポート充実初年度無料〜、更新は1,500円〜

おすすめはCloudflare Registrarだ。価格が原価（マークアップなし）で、DNSの管理画面が使いやすく、後述のDNS設定もここで完結できる。ただし、Cloudflareへのドメイン移管が必要な場合は初期設定に手間がかかる。

新規購入なら、Cloudflare で直接取得するのが最もシンプルだ。

DNS設定：AレコードとCNAMEの違い

ドメインを購入したら、そのドメインをVercelに向ける設定をDNSで行う。DNSとは「このドメインのアクセスはこのサーバーに転送してください」という対応表だ。

Vercelへの接続に使うDNSレコードは2種類ある。

Aレコード（apex domain 用）

yourapp.jp（wwwなし）をVercelに向けるときに使う。

タイプ: A
名前: @ (または空欄、ルートドメインを意味する)
値: 76.76.21.21  （VercelのIPアドレス）
TTL: 3600

CNAMEレコード（サブドメイン用）

www.yourapp.jp をVercelに向けるときに使う。

タイプ: CNAME
名前: www
値: cname.vercel-dns.com
TTL: 3600

どちらを使うべきか？

Vercelの推奨は「apex domainにAレコード、wwwにCNAME」の両方を設定することだ。VercelのダッシュボードにドメインをAddすると、「どのレコードを設定すべきか」が表示されるので、その指示に従う。

Vercelでのカスタムドメイン設定手順

  1. Vercelダッシュボードにログインし、対象のプロジェクトを開く
  2. 「Settings」タブをクリック
  3. 左メニューから「Domains」を選択
  4. 「Add」ボタンを押して、購入したドメイン名を入力（例：yourapp.jp）
  5. 「Add Domain」をクリック
  6. Vercelが「以下のDNSレコードを設定してください」と表示する
  7. 表示された通りにドメインレジストラのDNS設定画面でレコードを追加する
  8. 設定後、Vercelが自動的にDNSの反映を確認し、完了したら「Valid Configuration」と表示される

注意点： www.yourapp.jp と yourapp.jp の両方を追加しておくことを推奨する。片方だけだと、wwwなしでアクセスしたときに表示されないケースがある。

SSLは自動：でも確認すべきこと

VercelはLet's Encrypt（無料のSSL証明書発行機関）を使って、カスタムドメインに自動でSSL証明書を発行する。https:// でアクセスできるようになるために、追加の作業は不要だ。

ただし、以下の状況ではSSLが有効にならないことがある。

SSLが有効にならない原因と対処：

  • DNSが反映されていない：DNS設定の変更が世界中に伝播するまで、最短数分〜最長48時間かかる。「24時間待っても反映されない」場合はDNSの設定を再確認する。
  • Aレコードの値が古い：Vercelの指定するIPアドレスは変更されることがある。Vercelのダッシュボードに表示されている最新の値を使う。
  • CAA レコードの制限：ドメインにCAA（Certificate Authority Authorization）レコードが設定されていると、Let's Encryptからの証明書取得がブロックされることがある。CAAレコードを削除するか、letsencrypt.org を許可するレコードを追加する。

VercelのDomains画面で Invalid Configuration と表示されている場合は、エラーメッセージをよく読むと原因が書いてある。

環境変数の設定：本番公開前の最重要作業

ローカル開発では .env.local に書いていたAPIキーや接続文字列を、本番環境（Vercel）に正しく設定しなければアプリが動かない。

Vercelでの設定方法

  1. Vercelダッシュボード → プロジェクト → 「Settings」→「Environment Variables」
  2. 変数名と値を入力
  3. 「Environment」で適用先（Production / Preview / Development）を選択
  4. 「Save」をクリック

NEXT_PUBLIC_ プレフィックスの使い分け

Next.jsには2種類の環境変数がある。

# ブラウザ（クライアント）から参照できる
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

# サーバーサイドのみ（絶対にブラウザに送ってはいけない）
SUPABASE_SERVICE_ROLE_KEY=eyJ...
STRIPE_SECRET_KEY=sk_live_...
RESEND_API_KEY=re_...

NEXT_PUBLIC_ がついた変数は、ビルドされたJavaScriptバンドルに含まれる。つまり、ユーザーがブラウザのDevToolsを開けば見える。秘密情報（シークレットキー、パスワード等）には絶対に NEXT_PUBLIC_ をつけてはいけない。

Production vs Preview の罠

VercelのEnvironment Variablesには3つの環境がある。

環境いつ使われるか
Productionmain ブランチへのpushでデプロイされたビルド
PreviewPRやfeatureブランチのビルド
Developmentvercel dev コマンドでのローカル実行

よくあるミスは「Productionにしか環境変数を設定していなかったため、PRのプレビューURLで動作確認するとエラーが出る」というケースだ。開発中にPreviewで確認したいなら、Preview用の環境変数も設定しておく。

StripeなどのAPIは本番用とテスト用でキーが異なる。Previewには sk_test_... を、Productionには sk_live_... を設定するのが正しい管理だ。

.env.local は絶対にGitHubにpushしない

.gitignore に .env.local が含まれているか確認する。もし含まれていなければ今すぐ追加する。

# .gitignore に以下があるか確認
.env.local
.env.*.local

GitHubにシークレットキーがpushされると、自動スキャンツールに検出され、キーが失効させられることがある（StripeもGitHubもこのスキャンを行っている）。万が一pushしてしまったら、即刻キーを再生成する。

よくある失敗シナリオと対処法

「DNSの設定が反映されない（24時間経っても）」

→ 設定したレコードの値が正しいか再確認する。Aレコードの値（IPアドレス）はVercelの指示通りか？ TTLが短すぎると古いキャッシュが残る場合がある。dig yourapp.jp コマンドで現在のDNSの値を確認できる。

「wwwなしのURLは動くけどwwwありが動かない（またはその逆）」

→ Vercelに www.yourapp.jp と yourapp.jp の両方を登録し、それぞれのDNSレコードを設定する。どちらにアクセスしても同じサービスに到達できるよう、リダイレクト設定もVercelで行う。

「本番デプロイしたら画面が真っ白になった」

→ Vercelのデプロイログを確認する。環境変数の設定漏れが最多原因だ。NEXT_PUBLIC_SUPABASE_URL や NEXT_PUBLIC_SUPABASE_ANON_KEY がProductionに設定されているかを真っ先に確認する。

「ローカルでは動くのに本番で動かない」

→ .env.local の内容をVercelの環境変数に正確に反映できているか確認する。変数名のタイポ（スペルミス）やコピーペースト時の余分なスペースに注意する。

本番公開直前に確認する5項目

最後に、デプロイ作業を終えて公開ボタンを押す前のチェックリストだ。

  1. カスタムドメインが Valid Configuration — VercelのDomains画面でステータスを確認
  2. https://yourapp.jp でアクセスできる — 鍵アイコンが表示されSSL有効を確認
  3. Production環境変数がすべて設定されている — .env.local の変数一覧とVercelの設定を照合
  4. 本番用のAPIキーを使っている — Stripeなら sk_live_、Supabaseなら本番プロジェクトのキー
  5. デプロイ後のログにエラーがない — VercelのFunction Logsタブでエラーが出ていないか確認

これらが揃っていれば、ドメイン・SSL・環境変数の観点では本番公開できる状態だ。

設定ミスの多くは「手順通りにやったつもりだった」というものだ。特にDNSの反映待ちは焦りやすく、待機中に設定を変えてしまって余計に時間がかかるケースもある。Vercelのダッシュボードに表示される指示を正確に実行し、反映を待つ——それだけを丁寧にやれば詰まることは少ない。

ブログ一覧へ戻る