自分の好きなドメインで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)
これはデプロイプロセスが重複しているので同時に起きているデプロイ結果を確認して,もう一回デプロイすること.ただし,デプロイする際は他のワークフローがないことを確認すること