<h1 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p>Vercelで作成したアプリケーションを独自ドメインで動作する方法を解説します。</p>
<p>ドメインはCloudflareで購入します。</p>
<p>個人開発でOpenAIのAPIを使った新しいサービス「AI Meow Cat」で実際にやった手順を踏まえて解説します。</p>
<p>※ 2023年7月現在サービスはまだ開発中なので完成したらまた記事を書きます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__65f3ef854f34c" src="https://embed.zenn.studio/card#zenn-embedded__65f3ef854f34c" data-content="https%3A%2F%2Fwww.ai-meow-cat.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.ai-meow-cat.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.ai-meow-cat.com</a></p>
<h1 id="%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85">
<a class="header-anchor-link" href="#%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85" aria-hidden="true"></a> 対象読者</h1>
<p>この記事は以下の条件を満たす人を対象読者としています。</p>
<ul>
<li>Vercelのアカウントを持っていて、Vercel上でアプリケーション開発をやったことがある人</li>
<li>Cloudflareのアカウントを持っている人</li>
</ul>
<h1 id="%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E8%AA%AC%E6%98%8E%E3%81%97%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E8%AA%AC%E6%98%8E%E3%81%97%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> この記事で説明しないこと</h1>
<p>以下はこの記事では説明しません。</p>
<ul>
<li>Vercelのアカウント作成方法</li>
<li>Vercelにアプリケーションをデプロイする方法</li>
<li>Cloudflareのアカウント作成方法</li>
<li>DNSの細かい説明</li>
</ul>
<h1 id="cloudflare%E3%81%A7%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#cloudflare%E3%81%A7%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> Cloudflareでドメインを購入して設定する</h1>
<p>基本的には以下の手順の通りに進めていきます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__83c8b44c8e44a" src="https://embed.zenn.studio/card#zenn-embedded__83c8b44c8e44a" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fregistrar%2Fget-started%2Fregister-domain%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/registrar/get-started/register-domain/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/registrar/get-started/register-domain/</a></p>
<h2 id="1.-%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%9F%E3%81%84%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1.-%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%9F%E3%81%84%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1. 購入したいドメインを検索する</h2>
<p>Cloudflareのメニューが日本語化されている前提ですが「ドメイン登録」→「ドメインの登録」から購入したいドメイン名を検索します。</p>
<p>自分の場合は <code>ai-meow-cat.com</code> が欲しいので <code>ai-meow-cat</code> で検索します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5b5a3acde622-20230706.png" alt="cloudflare-domain-register1" loading="lazy" class="md-img"></p>
<h2 id="2.-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%B3%BC%E5%85%A5%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2.-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%B3%BC%E5%85%A5%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2. ドメインを購入する</h2>
<p>無事に <code>ai-meow-cat.com</code> が購入できそうなので購入します。</p>
<p>特に難しい点はなく、必要情報を入力していくだけです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1c2721ea93cc-20230706.png" alt="cloudflare-domain-register2" loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0866b1d41e99-20230706.png" alt="cloudflare-domain-register3" loading="lazy" class="md-img"></p>
<p>ちなみにデフォルトだとドメインは1年で自動更新されるようになっていますので、引き続き利用する場合は特に何もする必要はありません。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e17f1881f1cf-20230706.png" alt="cloudflare-domain-register4" loading="lazy" class="md-img"></p>
<h2 id="dnssec%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96%EF%BC%88cloudflare%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89">
<a class="header-anchor-link" href="#dnssec%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96%EF%BC%88cloudflare%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89" aria-hidden="true"></a> DNSSECの有効化（Cloudflareでの設定）</h2>
<p>DNSSEC（Domain Name System Security Extensions）の設定を有効化します。</p>
<p>DNSSECは、ユーザーが要求したウェブサイトが正当なものであることを保証するために、公開鍵暗号を使用してDNS応答を署名します。DNS応答は、URLからIPアドレスを検索するときにDNSサーバーからの情報を指します。</p>
<p>偽造されたDNS応答を検出可能になるので、DNSキャッシュポイズニング攻撃などの対策になります。</p>
<p>多少DNS応答が大きくなる可能性があるそうですが特に大きなデメリットはなさそうなので有効化しておきます。</p>
<p>「Webサイト」→「<code>ai-meow-cat.com</code>（ご自身が設定したドメイン名に置き換えてください）」→「DNS」→「設定」に移動してDNSSECを有効化します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1c7f1a862b8e-20230706.png" alt="DNSSEC" loading="lazy" class="md-img"></p>
<h2 id="ssl%2Ftsl%E8%A8%AD%E5%AE%9A%EF%BC%88cloudflare%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89">
<a class="header-anchor-link" href="#ssl%2Ftsl%E8%A8%AD%E5%AE%9A%EF%BC%88cloudflare%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89" aria-hidden="true"></a> SSL/TSL設定（Cloudflareでの設定）</h2>
<p>「Webサイト」→「<code>ai-meow-cat.com</code>（ご自身が設定したドメイン名に置き換えてください）」→「SSL/TLS」→「概要」に移動します。</p>
<p>ここで設定するのは以下の2点です。</p>
<h3 id="1.-%E3%81%8A%E5%AE%A2%E3%81%95%E3%81%BE%E3%81%AE-ssl%2Ftls-%E6%9A%97%E5%8F%B7%E5%8C%96%E3%83%A2%E3%83%BC%E3%83%89%E3%82%92%E3%80%8C%E3%83%95%E3%83%AB%E3%80%8D%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1.-%E3%81%8A%E5%AE%A2%E3%81%95%E3%81%BE%E3%81%AE-ssl%2Ftls-%E6%9A%97%E5%8F%B7%E5%8C%96%E3%83%A2%E3%83%BC%E3%83%89%E3%82%92%E3%80%8C%E3%83%95%E3%83%AB%E3%80%8D%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1. お客さまの SSL/TLS 暗号化モードを「フル」に設定する</h3>
<p>この設定がないとVercelにDNSレコードを追加しても、独自ドメインでアクセスしたときにリダイレクトループが発生してしまいました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__560dfb606da72" src="https://embed.zenn.studio/card#zenn-embedded__560dfb606da72" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fssl%2Ftroubleshooting%2Ftoo-many-redirects%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/ssl/troubleshooting/too-many-redirects/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/ssl/troubleshooting/too-many-redirects/</a></p>
<h3 id="2.-ssl%2Ftls-%E6%8E%A8%E5%A5%A8%E6%A9%9F%E8%83%BD%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2.-ssl%2Ftls-%E6%8E%A8%E5%A5%A8%E6%A9%9F%E8%83%BD%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2. SSL/TLS 推奨機能を有効化する</h3>
<p>「SSL/TLS推奨機能」を有効化します。</p>
<p>こちらもデメリットはあまりなさそうなので有効化しておきます。</p>
<p>詳しい内容は以下のページに記載されています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1053dd8b2df0a" src="https://embed.zenn.studio/card#zenn-embedded__1053dd8b2df0a" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fssl%2Forigin-configuration%2Fssl-tls-recommender" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/ssl/origin-configuration/ssl-tls-recommender" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/ssl/origin-configuration/ssl-tls-recommender</a></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ebb24358ac51-20230706.png" alt="TSLSettings" loading="lazy" class="md-img"></p>
<h1 id="vercel%E5%81%B4%E3%81%A7%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#vercel%E5%81%B4%E3%81%A7%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Vercel側でドメインの設定</h1>
<p>「Vercelの組織名」→「アプリケーション名」→「Domains」からドメインの設定をします。</p>
<h2 id="%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%EF%BC%88vercel%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89">
<a class="header-anchor-link" href="#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%EF%BC%88vercel%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%89" aria-hidden="true"></a> ドメインを追加（Vercelでの設定）</h2>
<h3 id="1.-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%90%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%8Cadd%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B">
<a class="header-anchor-link" href="#1.-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%90%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%8Cadd%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B" aria-hidden="true"></a> 1. ドメイン名を入力して「Add」を押下</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9e7e3af7140c-20230706.png" alt="VercelDomains1" loading="lazy" class="md-img"></p>
<h3 id="2.-%E6%8E%A8%E5%A5%A8%E8%A8%AD%E5%AE%9A%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%80%8Cadd%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B">
<a class="header-anchor-link" href="#2.-%E6%8E%A8%E5%A5%A8%E8%A8%AD%E5%AE%9A%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%80%8Cadd%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B" aria-hidden="true"></a> 2. 推奨設定を選択して「Add」を押下</h3>
<p><code>https://ai-meow-cat.com</code> へのアクセスは <code>https://www.ai-meow-cat.com</code> にリダイレクトさせるのが推奨なのでそれに従います。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7571dc364a02-20230706.png" alt="VercelDomains2" loading="lazy" class="md-img"></p>
<h3 id="3.-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E5%80%A4%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#3.-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E5%80%A4%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B" aria-hidden="true"></a> 3. DNSレコードに追加する値を確認する</h3>
<p><code>ai-meow-cat.com</code> はAレコード、<code>www.ai-meow-cat.com</code> はCNAMEレコードをを追加する必要があるので、この設定に従いCloudflare側でDNSレコードを追加します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/740f98fdc495-20230706.png" alt="VercelDomains3" loading="lazy" class="md-img"></p>
<h2 id="dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%BF%BD%E5%8A%A0">
<a class="header-anchor-link" href="#dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> DNSレコードの追加</h2>
<p><code>ai-meow-cat.com</code> はAレコードで <code>@</code> を入力、<code>www</code> はCNAMEでそれぞれレコードを追加します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e492aefe2086-20230706.png" alt="add-Record1" loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/66538d881a5a-20230706.png" alt="add-Record2" loading="lazy" class="md-img"></p>
<p>しばらくすると以下のURLでアクセスが可能になります。（<code>https://ai-meow-cat.com</code> へのアクセスは <code>https://www.ai-meow-cat.com</code> にリダイレクトされます）</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__960565a0b6c0c" src="https://embed.zenn.studio/card#zenn-embedded__960565a0b6c0c" data-content="https%3A%2F%2Fwww.ai-meow-cat.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.ai-meow-cat.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.ai-meow-cat.com</a></p>
<h2 id="%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> リダイレクト設定</h2>
<p>Vercelには <code>ai-cat-frontend.vercel.app</code> のようにデフォルトで作成されるProduction用のドメインが割り当てられます。</p>
<p>独自ドメインである <code>www.ai-meow-cat.com</code> にリダイレクトさせるように設定しておきます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ad403d18c2ba-20230706.png" alt="Redirect" loading="lazy" class="md-img"></p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>以上ですべての設定が完了になります。</p>
<p>実はこの記事の内容は以前書いた以下の記事とそんなに変わらないのですが、今回はじめてCloudflareでドメインを購入したので記事にしてみました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fa0e86f8b0fbb" src="https://embed.zenn.studio/card#zenn-embedded__fa0e86f8b0fbb" data-content="https%3A%2F%2Fzenn.dev%2Fkeitakn%2Farticles%2Fnextjs-vercel-create-staging" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/keitakn/articles/nextjs-vercel-create-staging" style="display:none" target="_blank">https://zenn.dev/keitakn/articles/nextjs-vercel-create-staging</a></p>
<p>ドメインが安価なことやCloudflareでドメインを設定することでCloudflareのさまざまな機能を利用しやすくなるので自分は今後基本的にはドメイン購入はCloudflareで買うことにします。</p>
<p>最後まで読んでいただきありがとうございました。</p>


VercelのアプリケーションにCloudflareで購入した独自ドメインを設定する

1. 購入したいドメインを検索する

DNSSECの有効化（Cloudflareでの設定）

1. お客さまの SSL/TLS 暗号化モードを「フル」に設定する

2. SSL/TLS 推奨機能を有効化する

SSL/TSL設定（Cloudflareでの設定）

Cloudflareでドメインを購入して設定する

1. ドメイン名を入力して「Add」を押下

2. 推奨設定を選択して「Add」を押下

3. DNSレコードに追加する値を確認する

ドメインを追加（Vercelでの設定）

ぽりー

keitakn

<p>とってもわかりやすかったです！<br>
ありがとうございました</p>


<p>コメントありがとうございます！役にたったようで良かったです🙏</p>


Discussion