CloudFlareのDNSからVercel DNSに10分で引越す手順書

# CloudFlareのDNSからVercel DNSに10分で引越す手順書

## あらすじ要約（人力）

ちょっとしたドメイン、WebとGmailのために取得していたドメインのDNSをCloudFlareというCDNにまかせていた。
特に負荷が大きいとかログが見たいというわけではなく、DNS管理が便利だったので。今どきDNSだけで何処かに課金したくないよね…という理由だけでCloudFlareを無料で使っていたのだが、ちょっとした理由でNext.js や React で便利な Vercelを使ってみたくなったので、まるごと移行してみる。特にDNSの内容を書き換えるわけではないので10分ぐらいで終わるかも。

## 事前準備

・レジストラ（ここではGoDaddy）のネームサーバーが編集できる権限を手に入れておく
・CloudFlare（もしくは同様のネームサーバー）の設定が見れること。無理ならdigして
・動くVercelのプロジェクトを作っておく
説明上 hogehoge.vercel.app  としておきます。

## Vercelダッシュボードトップの「Domains」で追加

・ここで動くVercelのプロジェクト「hogehoge」を追加
ここで動作確認してもいいが、DNSを引っ越しちゃうので次に進む。

再びダッシュボードトップの「Domains」から当該ドメインのリストを見る。右側のドットボタン「…」から「View DNS Records & Mode」

![vercel1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/c11a8d6a-55f5-9056-1673-660f9bc5e625.png)


[View DNS Records & More]
真っ白のDNSが現れるので右側の「Enable Vercel DNS」

![vercel2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/bded3d6c-3f8b-e152-c3b9-7cd885b56e16.png)

右側の「Enable Vercel DNS」
すると「Add Email Preset」というボタンが現れるので「G Suite MX」を追加。もしろん「Upload Zone File」とかでもいいかも。

![vercel3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/8bc7c883-117a-649b-ecaf-a7b253894a52.png)

G Suiteという名前ではあるが、Google WorkspaceのMX設定
Add G Suite DNS Record Preset→「Add records」する

![vercel4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/73d47881-1cb2-87ee-7251-387126c6963a.png)

そうすると、アプリのデプロイに必要な設定も含めて全部追加してくれる。
「76.76.21.21」(vercel.com)というのはVercelのIPで、CNAMEもSSLのためのLetsEncryptのCAAレコードも割り当てられている。

1個しかIPないのね…という気持ちはあるがそのままGo。
細かい設定がしたい人はこちらを参照。
https://vercel.com/docs/concepts/projects/domains/working-with-dns

![vercel5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/0e6fe66e-c8e6-be8e-81d2-417fbf5160f7.png)


## いちおう確認する

まずはメールが届かなくなると困るのでMXレコードを確認。

MX	alt4.aspmx.l.google.com.	3600	10	
MX	alt3.aspmx.l.google.com.	3600	10
MX	alt2.aspmx.l.google.com.	3600	5
MX	alt1.aspmx.l.google.com.	3600	5
MX	aspmx.l.google.com.	3600	1

## Google Site Verificationは必要なさそう

https://admin.google.com/
Apps > Google Workspace > Settings for Gmail > Setup
で確認できるけど、特になくても動くみたい。あぶねえ…。

設定おかしくなったら、こちらから再度確認してください

https://support.google.com/a/answer/140034?hl=en

Activate Gmail for Google Workspace - Google Workspace Admin Help
Tell the internet where to deliver your company's email messa
support.google.com
目的のサイトが動いていたら、作業はほぼ完了。
サブドメインの場合は、TXTの設定もする。

![vercel6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/424692fa-1142-ae4e-485a-a022c177fd13.png)


## 最後にネームサーバーを引っ越す


GoDaddyの場合はこんな感じ
https://dcc.godaddy.com/control/portfolio/

「ネームサーバー」のタブがCloudFlareの設定になっているので、この2つのDNSを「ネームサーバーを変更」ボタンを押して
arely.ns.cloudflare.com
vasilii.ns.cloudflare.com

![vercel7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/20a3a504-150b-df4a-b184-aaa23c2e8f3f.png)


旧設定（GoDaddy）
以下のように書き換えればOK。しばらくすれば、Vercelのネームサーバーを利用し始めます。

ns1.vercel-dns.com
ns2.vercel-dns.com

ネームサーバーの変更が終わったら
コマンドプロンプトを開いて
nslookup (domainname)
として
権限のない回答：
名前：(domainname)
Address: 76.76.21.21
と出ていれば動く状態。

あとはメールの開通を確認しよう。特にメールサーバーが変わったわけではないので、エラーなどで戻ってくるようなことがなければ問題ないはず。

## 最後に、CloudFlareに別れを告げる

動作確認したら「Webサイト」→右下の「サイトを削除」すれば終わり。結構あっけない。


## 結論、やってよかった！

GitHub PagesのサブドメインとかもぜんぶVercelDNS化できるので、Reactのデプロイやちょっとした固定ページなども非常に柔軟になりました。

例えば、WixとかGitHub PagesとかWordpressとか異なる環境で運用しているサイト群をいったん統合するという目的で使うのも便利だし、CDNとしてCloudFlareを使い続けることもできる。

いいことしかないので使う。しかも無料。高くても月20USDです。
https://vercel.com/pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191291/f4e9aca9-4107-4935-282b-5fd7314a15be.png)