自分の好きなドメインでwebサイトを公開してみよう[AzureにカスタムドメインでWebアプリをデプロイする]

自分の好きなドメインでWebサイトを公開したくないですか？
例えば
herokuなら
https\://yourappname-00000000000.herokuapp.com
とか
Azureのデフォルトなら
https\://name-00000000000.eastus-01.azurewebsites.net
のようになる．

どうせなら[お名前.com](https://www.onamae.com)などで取得したドメインを使用したいですよね？

>例えばtarakokko3233test.comとか(アクセスしても何もないよ)

本記事ではドメインの取得からDNSサーバーの設定，Webアプリのデプロイ，カスタムドメインの設定までをAzureで行う方法について記載する．

# ドメインの取得
[お名前.com](https://www.onamae.com)にアクセスして自分の取得したいドメインを入力する．
![スクリーンショット 2024-06-25 22.12.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/a217bba5-d55d-f133-fbac-7908040d86df.png)


その後，`.com`，`.net`など希望するものを選択する．○がついたものが利用可能なドメインである．

![スクリーンショット 2024-06-25 22.12.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/9c5f80ef-1353-b9a7-532a-4978d3a3015c.png)

使用目的を選択する．
![スクリーンショット 2024-06-25 22.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/32060dcb-5f57-c418-338c-ea24e603c00b.png)

この後に`お名前ID`でのログインと決済情報を入力してドメインを取得する．

# AzureでWebアプリを作成
[Azure](http://Azure.microsoft.com)にアクセスし，サインインする．登録がまだの方は登録する．
Azure Portalにアクセスしたら，リソースの作成を押す．

![スクリーンショット 2024-06-25 22.30.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/381b7495-0065-78a4-b1cc-58c2ab18a15c.png)

`Webアプリ`の`作成`を押す．
![スクリーンショット 2024-06-25 22.30.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/edb4fd74-8e71-9a90-e6db-9f9ccf02c39d.png)

必要事項を入力する．`リソースグループ`は初めての方はないと思うので`新規作成`から任意のリソースグループ名を入力する．

:::note info
**リソースグループとは**
Microsoft Azureクラウドプラットフォームにおいて，関連するリソース（仮想マシ，、ストレージアカウント，ネットワークサービスなど）を整理し，管理するためのコンテナ．リソースグループを使用することで，異なるリソースを一括して管理，監視，アクセス制御設定が可能となる．これにより，効率的かつ効果的にリソースを扱うことができる．
:::

**Webアプリ名**
任意の名前

**公開**
コード自体をGithubからデプロイする場合は，`コード`を選択．
Dockerコンテナなどでアプリケーションをパッケージ化したものをデプロイする際は，`コンテナ`を選択．
静的ファイル（HTML、CSS、JavaScript）を使用して構築されたWebサイトやアプリケーション，つまり，静的サイトジェネレーターやSPAフレームワーク（React、Angular、Vue.jsなど）によって構築されたアプリケーションをデプロイするのならば`静的webアプリ`を選択．

**ランタイムスタック**
`コード`を選択したら`ランタイムスタック`を選択することになる．ランタイムスタックはデプロイするWebアプリの言語を指定する．

![スクリーンショット 2024-06-25 22.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d2c7f2b3-9cb4-db87-fedb-6aa5b9bfe5a4.png)

その後，継続的デプロイを基本は`有効化`を選択して良いと思う．その下のGithub設定でデプロイするGithubリポジトリとブランチを設定する．
![スクリーンショット 2024-06-25 23.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/f83299e8-8cd2-8f09-e654-2e18d5fd0ebf.png)

:::note info
`コンテナ`を選択したら，どのコンテナをデプロイするかを選択する．基本的にはAzure Container Registryまたは，DockerHubにあるコンテナを読み込むのが良いだろう．
![スクリーンショット 2024-06-25 23.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d9dd557a-609e-aeb2-d5b7-2cf76690f6a0.png)

>詳しくは以下の記事で説明する．
[鋭意製作中]
:::



これで`確認および作成`を選択し，`作成`を押せばWebアプリが作成される．`コード`を選択した際はGithubリポジトリ上に`.github/workflows`にymlファイルが作成し，自動的にデプロイするようになる．

:::note info
デプロイログの作成や手動デプロイをするには[AzurePortal](https://portal.azure.com/#home)にアクセスし，`AppService`を選択し，作成したwebアプリ名を選択する．
![スクリーンショット 2024-06-25 23.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/8dca8afc-d968-eefa-1932-e5e5726096ff.png)

その後，`デプロイセンター`を選択する．
![スクリーンショット 2024-06-25 23.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/da2e2d48-10a4-5dcc-8826-a98c5139a026.png)

ここでデプロイログを確認できたり，`同期`を押すと手動デプロイができる．
![スクリーンショット 2024-06-25 23.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/13b18cfb-060d-dc41-13f4-b3a152b890dd.png)
:::

# カスタムドメインの設定
[AzurePortal](https://portal.azure.com/#home)にアクセスし，`AppService`を選択し，作成したwebアプリ名を選択する．
![スクリーンショット 2024-06-25 23.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/8dca8afc-d968-eefa-1932-e5e5726096ff.png)

その後，`カスタムドメイン`を選択する．
![スクリーンショット 2024-06-25 23.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/da2e2d48-10a4-5dcc-8826-a98c5139a026.png)

このページにある`IPアドレス`と`カスタムドメインの検証ID`を控えておく．
![スクリーンショット 2024-06-25 23.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/0c3e39ea-27db-8512-40f5-5524777cd103.png)

# DNSゾーンの設定
[AzurePortal](https://portal.azure.com/#home)にアクセスし，`DNSゾーン`を選択する．

![スクリーンショット 2024-06-25 23.55.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/2bac4c64-9641-a699-b569-b3923b7e5d2c.png)

`作成`を押し，
![スクリーンショット 2024-06-25 23.54.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/cf16d694-c7f5-a843-c199-c34c0eade038.png)

任意のリソースグループを選択し，取得したドメイン名を入力する
**例:**tarakokko3233test.com
![スクリーンショット 2024-06-25 23.57.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/8d820d55-a4f0-6826-c5c4-fd89dda0e890.png)

これで`作成`を押して作成する．

再度，[AzurePortal](https://portal.azure.com/#home)の，`DNSゾーン`にアクセスし，作成したDNSゾーンを選択する．
`概要`のページにある`ネームサーバー1`，`ネームサーバー2`，`ネームサーバー3`，`ネームサーバー4`を控えておく．
その後，`レコードセット`を選択する．
![スクリーンショット 2024-06-26 0.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/2f657c23-5534-4600-33b2-b98bf43dd2f0.png)

`追加`を押し，
![スクリーンショット 2024-06-26 0.03.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/e3e28f2d-8435-8fb6-fc33-f9acb95cb972.png)

このレコードの作成画面に以下の3つのレコードを入力する
**Aレコード**
 - 名前: @ 
 - 種類: A 
 - IPアドレス:`AppServiceのWebアプリのカスタムドメインで控えておいたIPアドレス`
![スクリーンショット 2024-06-26 0.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/6821dbc0-aa22-7b58-6a97-5a5ad1f62bfd.png)
これで`追加`を押す．
**CNAMEレコード**
 - 名前: www
 - 種類: CNAME
 - エイリアス:取得したドメイン名
![スクリーンショット 2024-06-26 0.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d9a045da-d905-f208-c2d5-e9e9e2c12616.png)
これで`追加`を押す．

**TXTレコード**
 - 名前: asuid
 - 種類: TXT
 - 値:`AppServiceのWebアプリのカスタムドメインで控えておいたカスタムドメインの検証ID`
![スクリーンショット 2024-06-26 0.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/48840893-ad52-b53e-650f-3767450e2aba.png)
これで`追加`を押す．

# DNSレコードの設定
[お名前.comNavi](https://navi.onamae.com/top)にアクセスする．
そこで`ネームサーバー設定`から`ドメインのDNS設定`を押す．
![スクリーンショット 2024-06-25 22.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/095f7826-dade-54ac-dc24-a780d859adf1.png)
その後取得したドメイン名を選択し，`次へ`を押す．

`ネームサーバーの変更`を選択する．
![スクリーンショット 2024-06-25 22.27.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/16f4c724-7c0e-35ce-6499-2ffb113d7573.png)

`他のネームサーバーを使用`を選択し，1プライマリネームサーバーから順に4つ，`DNSゾーン`の
`概要`のページで控えた`ネームサーバー1`，`ネームサーバー2`，`ネームサーバー3`，`ネームサーバー4`を入力する．

:::note warn
各ネームサーバーの最後に．(ピリオド)がついている場合は削除して入力すること．
:::

![スクリーンショット 2024-06-26 0.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/8322e252-7665-f4b1-a461-c63b130144c3.png)

入力したら`確認画面へ進む`を押して確認し，設定する．

次に，`DNS設定/転送設定`を押し，取得したドメイン名を選択する．
![スクリーンショット 2024-06-26 0.51.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d9416fa0-8cb8-3b5a-1e0e-e74491e1222c.png)


`DNSレコード設定を利用する`の`設定する`を選択．
![スクリーンショット 2024-06-25 22.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/f0068a0f-90d1-fb88-febe-a86ea1d827b2.png)

ここで以下の2つのレコードを追加する．
**Aレコード**
 - ホスト名: (空)
 - TYPE: A
 - VALUE: `AppServiceのWebアプリのカスタムドメインで控えておいたIPアドレス`
![スクリーンショット 2024-06-26 0.53.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/13d86a61-eb35-0b9a-000b-ccdc485d23c5.png)
設定したら`追加`を押す．

**TXTレコード**
 - ホスト名: asuid
 - TYPE: TXT
 - VALUE:`AppServiceのWebアプリのカスタムドメインで控えておいたカスタムドメインの検証ID`
![スクリーンショット 2024-06-26 0.56.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/fe830836-0099-92d2-8ed8-32f7ab6dbba0.png)
設定したら`追加`を押す．

最後に画面下の`確認画面へ進む`を押して設定する．

# カスタムドメインの適用
[AzurePortal](https://portal.azure.com/#home)にアクセスし，`AppService`を選択し，作成したwebアプリ名を選択する．
![スクリーンショット 2024-06-25 23.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/8dca8afc-d968-eefa-1932-e5e5726096ff.png)

その後，`カスタムドメイン`を選択する．
![スクリーンショット 2024-06-25 23.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/da2e2d48-10a4-5dcc-8826-a98c5139a026.png)
ドメインプロバイダーは`その他の全てのドメインサービス`を選択し，
ドメインには取得したドメイン名を入力
その後，`検証`を押して問題がなければ`追加`を押す．
![スクリーンショット 2024-06-26 1.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/10a34781-703e-455a-d7bc-3d6cab68ea0c.png)

これでカスタムドメインを使ったWebアプリのAzureへのデプロイが終了である．

:::note warn
カスタムドメインがうまく検証できない時はドメインやDNSが世界に広がるのを待つために最大48時間かかる場合があるのでしばら決まってみることをお勧めする
:::


# よくあるエラー例
:::note warn
**Deployment Failed, Package deployment using ZIP Deploy failed. Refer logs for more details.**

このエラーはタイムアウトしている可能性があるのでデプロイセンターから再デプロイすると良い．
それでもうまくいかない場合はこちらから

https://stackoverflow.com/questions/72280118/deployment-failed-with-error-package-deployment-using-zip-deploy-failed-refer

:::

:::note warn
**Deployment Failed, Error: Failed to deploy web package to App Service. Conflict (CODE: 409)**

これはデプロイプロセスが重複しているので同時に起きているデプロイ結果を確認して，もう一回デプロイすること．ただし，デプロイする際は他のワークフローがないことを確認すること
:::