VercelのアプリケーションにCloudflareで購入した独自ドメインを設定する
概要
Vercelで作成したアプリケーションを独自ドメインで動作する方法を解説します。
ドメインはCloudflareで購入します。
個人開発でOpenAIのAPIを使った新しいサービス「AI Meow Cat」で実際にやった手順を踏まえて解説します。
※ 2023年7月現在サービスはまだ開発中なので完成したらまた記事を書きます。
対象読者
この記事は以下の条件を満たす人を対象読者としています。
- Vercelのアカウントを持っていて、Vercel上でアプリケーション開発をやったことがある人
- Cloudflareのアカウントを持っている人
この記事で説明しないこと
以下はこの記事では説明しません。
- Vercelのアカウント作成方法
- Vercelにアプリケーションをデプロイする方法
- Cloudflareのアカウント作成方法
- DNSの細かい説明
Cloudflareでドメインを購入して設定する
基本的には以下の手順の通りに進めていきます。
1. 購入したいドメインを検索する
Cloudflareのメニューが日本語化されている前提ですが「ドメイン登録」→「ドメインの登録」から購入したいドメイン名を検索します。
自分の場合は ai-meow-cat.com が欲しいので ai-meow-cat で検索します。
2. ドメインを購入する
無事に ai-meow-cat.com が購入できそうなので購入します。
特に難しい点はなく、必要情報を入力していくだけです。
ちなみにデフォルトだとドメインは1年で自動更新されるようになっていますので、引き続き利用する場合は特に何もする必要はありません。
DNSSECの有効化（Cloudflareでの設定）
DNSSEC（Domain Name System Security Extensions）の設定を有効化します。
DNSSECは、ユーザーが要求したウェブサイトが正当なものであることを保証するために、公開鍵暗号を使用してDNS応答を署名します。DNS応答は、URLからIPアドレスを検索するときにDNSサーバーからの情報を指します。
偽造されたDNS応答を検出可能になるので、DNSキャッシュポイズニング攻撃などの対策になります。
多少DNS応答が大きくなる可能性があるそうですが特に大きなデメリットはなさそうなので有効化しておきます。
「Webサイト」→「ai-meow-cat.com（ご自身が設定したドメイン名に置き換えてください）」→「DNS」→「設定」に移動してDNSSECを有効化します。
SSL/TSL設定（Cloudflareでの設定）
「Webサイト」→「ai-meow-cat.com（ご自身が設定したドメイン名に置き換えてください）」→「SSL/TLS」→「概要」に移動します。
ここで設定するのは以下の2点です。
1. お客さまの SSL/TLS 暗号化モードを「フル」に設定する
この設定がないとVercelにDNSレコードを追加しても、独自ドメインでアクセスしたときにリダイレクトループが発生してしまいました。
2. SSL/TLS 推奨機能を有効化する
「SSL/TLS推奨機能」を有効化します。
こちらもデメリットはあまりなさそうなので有効化しておきます。
詳しい内容は以下のページに記載されています。
Vercel側でドメインの設定
「Vercelの組織名」→「アプリケーション名」→「Domains」からドメインの設定をします。
ドメインを追加（Vercelでの設定）
1. ドメイン名を入力して「Add」を押下
2. 推奨設定を選択して「Add」を押下
https://ai-meow-cat.com へのアクセスは https://www.ai-meow-cat.com にリダイレクトさせるのが推奨なのでそれに従います。
3. DNSレコードに追加する値を確認する
ai-meow-cat.com はAレコード、www.ai-meow-cat.com はCNAMEレコードをを追加する必要があるので、この設定に従いCloudflare側でDNSレコードを追加します。
DNSレコードの追加
ai-meow-cat.com はAレコードで @ を入力、www はCNAMEでそれぞれレコードを追加します。
しばらくすると以下のURLでアクセスが可能になります。（https://ai-meow-cat.com へのアクセスは https://www.ai-meow-cat.com にリダイレクトされます）
リダイレクト設定
Vercelには ai-cat-frontend.vercel.app のようにデフォルトで作成されるProduction用のドメインが割り当てられます。
独自ドメインである www.ai-meow-cat.com にリダイレクトさせるように設定しておきます。
おわりに
以上ですべての設定が完了になります。
実はこの記事の内容は以前書いた以下の記事とそんなに変わらないのですが、今回はじめてCloudflareでドメインを購入したので記事にしてみました。
ドメインが安価なことやCloudflareでドメインを設定することでCloudflareのさまざまな機能を利用しやすくなるので自分は今後基本的にはドメイン購入はCloudflareで買うことにします。
最後まで読んでいただきありがとうございました。
Discussion
とってもわかりやすかったです！
ありがとうございました
コメントありがとうございます！役にたったようで良かったです🙏