自分の好きなドメインでWebサイトを公開したくないですか?
例えば
herokuなら
https://yourappname-00000000000.herokuapp.com
とか
Azureのデフォルトなら
https://name-00000000000.eastus-01.azurewebsites.net
のようになる.
どうせならお名前.comなどで取得したドメインを使用したいですよね?
例えばtarakokko3233test.comとか(アクセスしても何もないよ)
本記事ではドメインの取得からDNSサーバーの設定,Webアプリのデプロイ,カスタムドメインの設定までをAzureで行う方法について記載する.
ドメインの取得
お名前.comにアクセスして自分の取得したいドメインを入力する.

その後,.com,.netなど希望するものを選択する.○がついたものが利用可能なドメインである.
この後にお名前IDでのログインと決済情報を入力してドメインを取得する.
AzureでWebアプリを作成
Azureにアクセスし,サインインする.登録がまだの方は登録する.
Azure Portalにアクセスしたら,リソースの作成を押す.
必要事項を入力する.リソースグループは初めての方はないと思うので新規作成から任意のリソースグループ名を入力する.
リソースグループとは
Microsoft Azureクラウドプラットフォームにおいて,関連するリソース(仮想マシ,、ストレージアカウント,ネットワークサービスなど)を整理し,管理するためのコンテナ.リソースグループを使用することで,異なるリソースを一括して管理,監視,アクセス制御設定が可能となる.これにより,効率的かつ効果的にリソースを扱うことができる.
Webアプリ名
任意の名前
公開
コード自体をGithubからデプロイする場合は,コードを選択.
Dockerコンテナなどでアプリケーションをパッケージ化したものをデプロイする際は,コンテナを選択.
静的ファイル(HTML、CSS、JavaScript)を使用して構築されたWebサイトやアプリケーション,つまり,静的サイトジェネレーターやSPAフレームワーク(React、Angular、Vue.jsなど)によって構築されたアプリケーションをデプロイするのならば静的webアプリを選択.
ランタイムスタック
コードを選択したらランタイムスタックを選択することになる.ランタイムスタックはデプロイするWebアプリの言語を指定する.
その後,継続的デプロイを基本は有効化を選択して良いと思う.その下のGithub設定でデプロイするGithubリポジトリとブランチを設定する.

これで確認および作成を選択し,作成を押せばWebアプリが作成される.コードを選択した際はGithubリポジトリ上に.github/workflowsにymlファイルが作成し,自動的にデプロイするようになる.
デプロイログの作成や手動デプロイをするにはAzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.

カスタムドメインの設定
AzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.

このページにあるIPアドレスとカスタムドメインの検証IDを控えておく.

DNSゾーンの設定
AzurePortalにアクセスし,DNSゾーンを選択する.
任意のリソースグループを選択し,取得したドメイン名を入力する
**例:**tarakokko3233test.com

これで作成を押して作成する.
再度,AzurePortalの,DNSゾーンにアクセスし,作成したDNSゾーンを選択する.
概要のページにあるネームサーバー1,ネームサーバー2,ネームサーバー3,ネームサーバー4を控えておく.
その後,レコードセットを選択する.

このレコードの作成画面に以下の3つのレコードを入力する
Aレコード
- 名前: @
- 種類: A
- IPアドレス:
AppServiceのWebアプリのカスタムドメインで控えておいたIPアドレス

これで追加を押す.
CNAMEレコード - 名前: www
- 種類: CNAME
- エイリアス:取得したドメイン名

これで追加を押す.
TXTレコード
DNSレコードの設定
お名前.comNaviにアクセスする.
そこでネームサーバー設定からドメインのDNS設定を押す.

その後取得したドメイン名を選択し,次へを押す.
他のネームサーバーを使用を選択し,1プライマリネームサーバーから順に4つ,DNSゾーンの
概要のページで控えたネームサーバー1,ネームサーバー2,ネームサーバー3,ネームサーバー4を入力する.
各ネームサーバーの最後に.(ピリオド)がついている場合は削除して入力すること.
入力したら確認画面へ進むを押して確認し,設定する.
次に,DNS設定/転送設定を押し,取得したドメイン名を選択する.

ここで以下の2つのレコードを追加する.
Aレコード
TXTレコード
最後に画面下の確認画面へ進むを押して設定する.
カスタムドメインの適用
AzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.

その後,カスタムドメインを選択する.

ドメインプロバイダーはその他の全てのドメインサービスを選択し,
ドメインには取得したドメイン名を入力
その後,検証を押して問題がなければ追加を押す.

これでカスタムドメインを使ったWebアプリのAzureへのデプロイが終了である.
カスタムドメインがうまく検証できない時はドメインやDNSが世界に広がるのを待つために最大48時間かかる場合があるのでしばら決まってみることをお勧めする
よくあるエラー例
Deployment Failed, Package deployment using ZIP Deploy failed. Refer logs for more details.
このエラーはタイムアウトしている可能性があるのでデプロイセンターから再デプロイすると良い.
それでもうまくいかない場合はこちらから
Deployment Failed, Error: Failed to deploy web package to App Service. Conflict (CODE: 409)
これはデプロイプロセスが重複しているので同時に起きているデプロイ結果を確認して,もう一回デプロイすること.ただし,デプロイする際は他のワークフローがないことを確認すること















