Vercel独自ドメインの設定手順【Cloudflare・www】

Vercel で独自ドメインを設定すると、〜.vercel.app ではなく自分のドメインでサイトを開けるようになります。この記事では、Cloudflare で DNS を管理している場合も含めて、ドメインを足すところから HTTPS で開けることを確かめるところまでを書きます。私の naoya-tsuji.com も、この形で動いています。

独自ドメインとは・料金

独自ドメインは、naoya-tsuji.com のように自分で取得したサイトの住所です。

料金は2つに分かれます。

• ドメイン代：取得先（お名前.com、Cloudflare など）に払います。値段と更新の時期は取得先で確かめてください。Vercel でも買えて、値段は登録業者の価格と同じだと公式に書かれています。
• Vercel 側：独自ドメインを足すこと自体にお金はかかりません。無料の Hobby プランでも使えて、1つのプロジェクトに 50 個までという上限があります（Vercel 公式「Adding & Configuring a Custom Domain」）。

用語を2つだけ先に押さえておきます。

• apex ドメイン：naoya-tsuji.com のような、前に何もつかない形
• サブドメイン：www.naoya-tsuji.com や ads.naoya-tsuji.com のように、前に一語つく形

Vercel のプロジェクトにドメインを足す

1. Vercel のダッシュボードで、ドメインをつなぎたいプロジェクトを開きます。

   

2. 左のメニューの Domains を開き、右上の Add Existing を押します（ドメインをまだ持っていなければ、隣の Buy から Vercel で買えます）。

   

3. Add Domains の画面で、ドメイン（例：example.com）を入れます。1行に1つずつ書けば、www.example.com も一緒に足せます。行き先は Connect to an environment の Production（本番）のままで、右下のボタンで足します。www の転送は後の節で設定します。

   

4. 足すと、そのドメインの欄（公式の言い方では「domain card」）に、DNS に入れる値が出ます。次の節ではこの値を使います。

この時点で Invalid Configuration と出ますが、DNS をまだ設定していないので正常です。

DNS の設定（A レコードと CNAME）

DNS は「このドメインの行き先はここ」と書いた表です。何を入れるかは、apex かサブドメインかで変わります。

値は必ず、自分のプロジェクトの domain card に出ているものを写してください。公式によると、A レコードは多くのプロジェクトで 76.76.21.21 ですが、新しいプロジェクトでは 216.198.79.1 のような別の値になることがあります。CNAME もプロジェクトごとに違う値（例：d1d4fc829fe7bc7c.vercel-dns-017.com）です。古い記事の値を写すと確認が通りません（Vercel 公式「Can I use my domain on Vercel with A records?」）。

apex に CNAME が使えないのは、DNS の決まりで apex には他のレコード（NS やメールの MX）が必要で、CNAME と同居できないからです。

Cloudflare で入れる

1. Cloudflare のダッシュボードでドメインを選び、DNS の Records を開きます。

   

2. Add record を押し、Type・Name・値を上の表の通りに入れます。

3. Proxy status を押して、灰色の雲の DNS only にしてから Save を押します。

   

A レコードの欄は Type・Name・IPv4 address・Proxy status・TTL です（2026年11月の画面。種類を変えると、値の欄の名前も変わります）。Proxy status は最初はオン（オレンジの雲・Proxied）になっているので、押して灰色の雲（DNS only）にしてから Save を押します。

なぜ「DNS only（灰色の雲）」にするのか

Cloudflare は、画面から足したレコードを最初から Proxied（オレンジの雲）にします。Proxied は、訪問者と Vercel の間に Cloudflare が入る形です。Vercel は Cloudflare に DNS だけ任せる場合、レコードを DNS only にするよう案内しています。理由は主に3つです（Vercel 公式「Using Cloudflare and other reverse proxies with Vercel」）。

• 間に入る仕組みが2つになり、転送・キャッシュ・安全の設定を両方で合わせる必要が出る
• Vercel の Bot Protection のルールが効かなくなり、訪問者の IP や場所も正しく届かないことがある
• 証明書を出すための確認（/.well-known/acme-challenge/）が Vercel に届かないと、HTTPS の証明書が出ない・更新できない

私の naoya-tsuji.com は Cloudflare の DNS を使い、Vercel 向けのレコードはすべて DNS only です。

www と www なし、どちらかに飛ばす

www.example.com と example.com の両方で開けるようにしつつ、片方に転送（リダイレクト）してまとめます。まとめないと、片方だけ証明書が切れる、検索で2つのページとして扱われる、といったことが起きます。

1. Domains の画面で、転送したい側（例：www.example.com）の Edit を押します。

2. Redirect to Another Domain を選び、右の欄で転送先（例：example.com）を選びます。

3. 真ん中の欄で転送の種類を選び、Save を押します。私は 308 Permanent（ずっと転送する、の意味）にしました。

   

   

どちらを主にするかについて、Vercel は www を主にして、www なしから転送する形をすすめています。www は CNAME で向けられるので、Vercel 側で行き先を細かく変えられるからです。www なしを主にしても動きます。私は短い naoya-tsuji.com を主にしました。

証明書（HTTPS）が出るまで

Vercel は、プロジェクトに足したドメインに証明書を自動で出します。Let's Encrypt という発行元を使い、DNS が Vercel を向いて行き渡ったあとに発行されます。自分で何かを申し込む必要はありません。更新も、切れる 14〜30 日前に自動で試みられます（Vercel 公式「Working with SSL Certificates」）。

1. DNS を入れたら、Vercel の Domains に戻ります。

2. ドメインの行に青いチェックと Valid Configuration が出れば完了です。

   

Cloudflare での A・CNAME の変更は早ければ数分で行き渡りますが、元のレコードの TTL（覚えておく時間）が長いと待ちます。ネームサーバーを変えた場合は 24〜48 時間かかることがあります。

証明書が出ないときは、次の2つを見てください。

• Cloudflare のレコードが Proxied（オレンジの雲）のままになっていないか
• CAA レコード（証明書を出せる発行元を絞る設定）を入れている場合、Let's Encrypt が許可されているか（0 issue "letsencrypt.org"）

サブドメインを別のプロジェクトにつなぐ

1つのドメインの下で、サブドメインごとに別の Vercel プロジェクトを出せます。私は naoya-tsuji.com の下に、アプリごとのプロジェクトをつないでいます。

手順は、上の「ドメインを足す」と「DNS の設定」をプロジェクトごとにくり返すだけです。

1. つなぎたいプロジェクトの Domains の画面で、サブドメイン（例：ads.example.com）を足します。

2. Cloudflare で、Name を前の一語（例：ads）にしてレコードを足し、DNS only にします。

   

サブドメインは CNAME が基本ですが、私は ads.naoya-tsuji.com を A レコード（76.76.21.21、DNS only）で足して、そのまま開けています。迷ったら domain card に出る値に合わせてください。Name の欄にドメインまで入れて ads.example.com.example.com のようにしてしまうのは、公式にもあるよくある間違いです。

なお、ドメインのつなぎ方とは別の話ですが、私の HP は GitHub に push しても本番に出ない設定にしていて、vercel deploy --prod で手で公開しています。

確かめ方

ブラウザで開くだけでなく、ターミナルでも見ておくと、www のような見落としに気づけます。

DNS の行き先を見る：

dig A example.com +short
dig CNAME www.example.com +short

domain card の値と同じなら合っています。Cloudflare の Proxied のままだと、Cloudflare の IP が返ってきます。

HTTPS と転送を見る：

curl -sI https://example.com
curl -sI https://www.example.com
curl -sI http://example.com

1行目が HTTP/2 200 なら開けています。www のほうは 308 と location: https://example.com/ が返れば転送できています。証明書が切れていると、こう出ます。

SSL certificate problem: certificate has expired

私が www を直したときも、https と http の両方で naoya-tsuji.com に着いて 200 が返ることを確かめました。

よくあるエラーと直し方

よくある質問