Vercelで独自ドメインを設定する

前提条件

• Vercelアカウントを持っていること
• Cloudflareアカウントを持っていること
• すでにVercelにデプロイされたWebサイトやWebアプリがあること

Cloudflareでドメインを購入する

Cloudflareでドメインを購入するには、以下の手順に従います：

1. Cloudflareにログインします
2. ダッシュボードから「ドメイン登録」→「ドメインの登録」を選択します
3. 購入したいドメイン名を検索ボックスに入力します（例: suntory-n-water.com）
4. 利用可能なドメインが表示されるので、購入したいドメインを選択します
5. 支払い情報を入力して購入手続きを完了します

購入が完了すると、下図のようにドメイン一覧にあなたのドメインが表示されます。

Cloudflareで必要なDNSレコードを設定する

1. Cloudflareダッシュボードで購入したドメインを選択します
2. 左側メニューから「DNS」タブをクリックします
3. 「Add record」ボタンをクリックし、以下の内容でレコードを追加します：
   • タイプ: CNAME
   • 名前: www（またはご希望のサブドメイン名）
   • ターゲット: cname.vercel-dns.com
   • TTL: Auto
   • Proxy status: Proxied（CDN機能を使用する場合）または DNS only

下図のように設定されていることを確認してください。

Vercelでドメインをプロジェクトに追加する

Vercelのプロジェクトに購入したドメインを紐づけます：

1. Vercel Dashboardにログインします
2. ドメインを設定したいプロジェクトを選択します
3. 上部メニューから「Settings」タブをクリックします
4. 左側のメニューから「Domains」を選択します
5. 「Add Domain」ボタンをクリックします
6. 購入したドメイン（例: suntory-n-water.com）を入力します
7. 「Add」ボタンをクリックして確定します

設定後は、下図のように初期設定のドメインから購入したドメインへのリダイレクトが設定されます。

Vercelの検証を確認する

Vercelはドメインの所有権を検証します。正しくDNS設定ができていれば、自動的に検証が完了します。 「Valid Configuration」と表示されていることを確認してください。しばらく時間が経過した後、購入したドメインにアクセスしてウェブサイトが表示されれば設定完了です。

環境変数の更新

ドメインの設定が完了したら必要に応じて、NEXT_PUBLIC_APP_URLといった環境変数を更新します。

NEXT_PUBLIC_APP_URL=https://sui-portfolio.com

環境変数を更新したら、Vercel Dashboardで「Redeploy」ボタンをクリックし、新しい設定で再デプロイしましょう。

まとめ

この記事では、Cloudflareでドメインを購入し、Vercelにデプロイされたウェブサイトに設定する方法を解説しました。