Vercel から Cloudflare への移行手順について
このブログはVercelでホスティングしていたのですがCloudflareに移行しました。
はじめに
移行したときに手順を残していなかったので、手順の復習もかねてサンプルのサイトを使ってもう一度VercelからCloudflareへの移行を実施してみました
サンプルのサイトのドメインはお名前.comで0円で取得しました
サイトのコンテンツはタイトルだけを表示する以下のページです
ネームサーバーの移行
Cloudflareへの移行前はお名前.comのネームサーバーの管理画面でVercelのネームサーバーを設定しています
Vercel側の管理画面での設定は以下です
VercelのネームサーバーのDNSレコードは以下になっています
VercelではLet’s Encryptで発行された証明書が使用されています
まずは以下のドキュメントを参考にネームサーバーをCloudflareに移行していきます
Integrate your Vercel project with your Cloudflare domain.
Cloudflareをリバースプロキシとして利用する方法で移行することにしました
Cloudflareの管理画面のWebサイトで「始める」をクリックします
移行するサイトのドメインを入力して「続行」をクリックします
プランはFreeを選択して「続行」をクリックします
現在のDNSレコードが自動で追加されますが不要なレコードを削除して以下のようにしました
SSL/TSLの暗号化モードがFullになっていることを確認します
Cloudflareのネームサーバーをお名前.comに設定するために確認します
確認したネームサーバーをお名前.comのネームサーバーの設定画面に入力して変更します
しばらく時間をおくとCloudflareの管理画面に以下のように表示されます
digコマンドでCloudflareのネームサーバーになっていることを確認しました
サイトにアクセスして証明書が変わっていることを確認しました
リダイレクトルールの設定
Vercelではデフォルトの設定でサブドメインなしのドメインでサイトにアクセスしたときにwwwサブドメインにリダイレクトされます
ネームサーバーの移行でAレコードとwwwサブドメインのCNAMEレコードを追加しました
現在はどちらもVercelに向いているので、サブドメインなしでサイトにアクセスした場合はwwwサブドメインにリダイレクトされます
サイトの配信元をVercelからCloudflare Pagesに移行しても同じ動作となるようにリダイレクトルールを追加します
リダイレクトルールで「ルールの追加」をクリックします
受信リクエストはカスタムフィルタ式を選択してホスト名がサイトのドメインに等しい条件を指定します
実行内容は動的でwwwサブドメインとリクエストのパスを結合する式を設定、ステータスコードは301、クエリ文字列を保持するにチェックをして「展開」をクリックします
Vercelの管理画面ではサブドメインなしのドメインがInvalidになりますが、Cloudflareのリダイレクトルールでリダイレクトされるので問題はありません
サブドメインなしのドメインでサイトにアクセスしてwwwサブドメインにリダイレクトされれば問題ありません
コンテンツをCloudflare Pagesに移行する
ネームサーバーの移行が完了したので、サイトのコンテンツをVercelからCloudflare Pagesに移行します
今回はサイトのコンテンツはzipファイルを直接アップロードしてCloudflare Pagesにデプロイしました
カスタムドメインを設定をクリックします
wwwサブドメインありのドメインを入力して続行をクリックします
DNSレコードを更新するかの確認で問題なければドメインをアクティブにするをクリックします
アクティブになるまで2日ほどかかるとのことです
しばらくするとアクティブになりました
サイトにアクセスしてCloudflare Pagesにアップロードしたコンテンツが表示されることを確認しました
あとはしばらく様子をみてからVercelのプロジェクトの削除を行いました