<h1 id="%E6%8A%80%E8%A1%93%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AB%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AB%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 技術ブログを作った時に思ったこと</h1>
最近、技術ブログを作ってみました。 
<a href="https://zenn.dev/yusu29/articles/azuredevops_staticapps_next" target="_blank">tech blog</a>
でも、何か物足りない... 
それはなにだろう...
(ﾟﾛﾟ;)
ドメイン名デフォルトのままやった...
<code>red-pebble-032ae8200.3.azurestaticapps.net</code>
ということで今回は上記のドメインをわかりやすい文字列に変えてみようと思います。
<h1 id="%E3%81%A7%E3%81%AF%E3%80%81let's-%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3%EF%BC%81">
<a class="header-anchor-link" href="#%E3%81%A7%E3%81%AF%E3%80%81let's-%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3%EF%BC%81" aria-hidden="true"></a> では、Let's ハンズオン！</h1>
<h2 id="%E7%9B%AE%E6%AC%A1">
<a class="header-anchor-link" href="#%E7%9B%AE%E6%AC%A1" aria-hidden="true"></a> 目次</h2>
<ol>
<li>事前のご準備</li>
<li>お名前.com でのドメイン購入</li>
<li>Azure DNS の構築</li>
<li>Azure Static Web Apps へドメインの適用</li>
<li>動作確認</li>
</ol>
<h1 id="%E4%BA%8B%E5%89%8D%E3%81%AE%E3%81%94%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E3%81%AE%E3%81%94%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前のご準備</h1>
WEB サイトは事前に以下の手順で構築してみてください。 
<a href="https://zenn.dev/yusu29/articles/azuredevops_staticapps_next" target="_blank">真剣に技術ブログを作ろう【Azure DevOps × Azure Static Web Apps × Next.js】</a>
<h1 id="%E3%81%8A%E5%90%8D%E5%89%8D.com-%E3%81%A7%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E8%B3%BC%E5%85%A5">
<a class="header-anchor-link" href="#%E3%81%8A%E5%90%8D%E5%89%8D.com-%E3%81%A7%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E8%B3%BC%E5%85%A5" aria-hidden="true"></a> お名前.com でのドメイン購入</h1>
まずは何がともあれ自分のドメインが必要なので、ドメインを購入しましょう。 
私は<code>hello-bnm.cloud</code>というドメインをお名前.com 購入してみました。
<a href="https://www.onamae.com/" target="_blank" rel="nofollow noopener noreferrer">お名前.com</a>
200 円ぐらいだったと思います。
もうほんとにとにかく安くで大丈夫です。 
そして、他に色々購入しますか？とか聞かれますが、ドメイン購入だけで OK です。
購入できたらお名前.com の管理画面へ移動し、利用ドメイン一覧を表示してください。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Kccw37FX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/385cf7bb4e35701ddae7773e.png%3Fsha%3D42483c76cf34c10350d4fad517c2177e377d16af" alt="お名前.com" loading="lazy" class="md-img">
ドメイン一覧に先ほど購入したドメインが表示されていれば OK です。
<h1 id="azure-dns-%E3%81%AE%E6%A7%8B%E7%AF%89">
<a class="header-anchor-link" href="#azure-dns-%E3%81%AE%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> Azure DNS の構築</h1>
では、DNS サーバは Azure へ構築します。 
Azure portal へログインして DNS と調べてください。 
そうすると、DNS ゾーンと表示されるので、そこをクリックして移動です。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--hsZQoqnM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/95fbbf9ae464fc3db196a729.png%3Fsha%3D0515333b85166d9495ddc91264ea7fc1e6a646cf" alt="AzureDNS" loading="lazy" class="md-img">
DNS ゾーンの作成から DNS サーバを作成します。
リソースグループは任意のグループを選択してください。
ここ注意なのですが、
<blockquote>
インスタンスの詳細の名前の箇所は先ほど購入したドメイン名としてください。
</blockquote>
筆者はここでしっかりハマりました。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--LedM5L0l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/9d025f837520684c49efe37c.png%3Fsha%3Df09237fd6637100024e2c3ab8304f00f5bc2acfd" alt="makeDNS" loading="lazy" class="md-img">
後は作成をして、DNS ゾーンを作成してください。
こんな感じで DNS ゾーンができれば OK です。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--U5ZwXcX0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f6a979dd786765b27bbe9196.png%3Fsha%3D8e31b106a516ddee99103a9aeebb5201a1338253" alt="makeDNS" loading="lazy" class="md-img">
<h2 id="%E3%81%8A%E5%90%8D%E5%89%8D.com-%E3%81%A7%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%9F%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%8D%E3%83%BC%E3%83%A0%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E5%A4%89%E6%9B%B4">
<a class="header-anchor-link" href="#%E3%81%8A%E5%90%8D%E5%89%8D.com-%E3%81%A7%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%9F%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%8D%E3%83%BC%E3%83%A0%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> お名前.com で購入したドメインのネームサーバの変更</h2>
ここで、お名前.com で購入したドメインのネームサーバを Azure DNS へ向くように設定します。
Azure DNS へ移動してネームサーバ 1~4 までの文字列をコピーしておいてください。
お名前.com へ移動します。
ドメイン設定のネームサーバの変更より、他のネームサーバを仕様をチェック。 
1~4 の箇所へ先ほどコピーしたネームサーバ情報を入力してください。
<img src="https://res.cloudinary.com/zenn/image/fetch/s---AcAGGVy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/18f784b16646d0ccc4358694.png%3Fsha%3D78fb3874fa0547a063ff5c1bfd9a4b4c3c13a0ff" alt="makeDNS" loading="lazy" class="md-img">
Azure からコピーしたネームサーバの情報には最後にピリオドがついているので、削除してあげてください。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--pIQKsxdk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a6aa7c435bebdce7ec8677a9.png%3Fsha%3D7f966b7f6b4a7d4bc27c573292289a15cd46046d" alt="makeDNS" loading="lazy" class="md-img">
こんな感じの画面が出てきたら設定するをクリックして完了です。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--_UtYnYMi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/88ab116ca7561f0a41aeb1cc.png%3Fsha%3D7951af47f498560cc0d983798481741072e52daf" alt="settingDNS" loading="lazy" class="md-img">
お名前.com での作業は以上となります。 
お疲れ様でした。
<h1 id="azure-static-web-apps-%E3%81%B8%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E9%81%A9%E7%94%A8">
<a class="header-anchor-link" href="#azure-static-web-apps-%E3%81%B8%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E9%81%A9%E7%94%A8" aria-hidden="true"></a> Azure Static Web Apps へドメインの適用</h1>
では、AzureDNS に戻り作業を続きを実施します。
作業としては、cname と txt レコードを追加します。 
レコードセットをクリックしてください。 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--uUjIlKWA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/13cd57badaa8a3975255618c.png%3Fsha%3Dcb0876229d565c228645b5f9e1d8cf23ff7dc6f6" alt="settingDNS" loading="lazy" class="md-img">
名前：www 
種類：CNAME 
エイリアス：WEB サイトの URL
OK をクリックすると、CNAME のレコードが追加されます。
次に Azure Static Web Apps へ移動し、メニュー項目<code>カスタムドメイン</code>をクリック 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ailkcLI_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fa43dfee4f19bcc54b1eb97c.png%3Fsha%3Da081604deebb0d76e77bc84002afbf3dbbc1ba26" alt="azure static web apps" loading="lazy" class="md-img">
<code>＋追加</code>より Azure DNS へカスタムドメインを追加するを選択 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--QsIOrE6K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/994190af31d5ccc0b0cc2963.png%3Fsha%3D930a5c97dd101a421ae9a2fc81d85de3a8478058" alt="custom domain" loading="lazy" class="md-img">
こんな感じで検証済みと表示されれば OK です！ 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--iSS7yImw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d4572fd76eab07a25dc3ea1e.png%3Fsha%3Dc96f11ca1cee0aabddc0681cf279d52ca3201087" alt="custom domain" loading="lazy" class="md-img">
<h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h1>
では、アクセスしてみましょう。
<a href="https://www.hello-bnm.cloud/" target="_blank" rel="nofollow noopener noreferrer">https://www.hello-bnm.cloud/</a>
アクセスできましたか？ 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--UXYXBOVx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/37f9f9a77f44106b30fe6bdb.png%3Fsha%3D28303d16bc0eb6f8967d3651ebc7cbcc10de3d63" alt="tech blog" loading="lazy" class="md-img">
これで独自ドメイン名をつけた自分の WEB サイトの完成です！
お疲れ様でした。
<code>fin</code>

自分のサイトに独自のドメイン名をつけよう🌏

技術ブログを作った時に思ったこと

お名前.com で購入したドメインのネームサーバの変更

Azure Static Web Apps へドメインの適用

zenn

Discussion