[Azure] WebAppsへのカスタムドメインとApp Service証明書 設定手順(2018/11月版)

Azure WebAppsでSSL対応したWebサイトを構築する場合、[WebApps用のカスタムドメイン購入](https://docs.microsoft.com/ja-jp/azure/app-service/custom-dns-web-site-buydomains-web-app) 、[カスタムドメインへのSSL証明書発行](https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-purchase-ssl-web-site) がAzureの機能として提供されているため、他で証明書購入の手続きなど行うことなく、Azure内で完結して構築することが可能です。

設定手順はこれまでに何度か変更されていたようですが、先月久々に実サイトの設定作業をしたので「2018/11月版」として手順をまとめておきます。

# 用意するもの

- 構築対象の WebApps
    - カスタムドメインとSSL設定するためには、価格レベル：B1 以上が必要です。共有プラン( F1, D1 )ではできません。
    - 以下では 例： `https://vaqiita001.azurewebsites.net/` として設定を記載しています。
    - WebApps作成は、価格レベル以外に注意するところは無いので本手順では省略します。

- カスタムドメイン
    - 書き出しでは購入できると書いたのですが、今回は既に持っているドメインにレコード追加したので、以下はその手順となっています。購入する場合は最初に [手順](https://docs.microsoft.com/ja-jp/azure/app-service/custom-dns-web-site-buydomains-web-app)に従って手続きしてください。
    - 以下では 例： `https://demo01.vaqiita001.com/` を割り当てるものとして設定を記載しています。

# 作業1：ドメインへのCNAMEレコード登録

DNSサービスにて、WebAppsに割り当てるカスタムドメインの CNAMEレコードを登録します。

| 種類   | 名前                                            | 値                                                  |
|:-------|:-----------------------------------------------|:----------------------------------------------------|
| CNAME  |  割り当てるカスタムドメイン名<br> (例：demo01.vaqiita001.com) | WebAppsのドメイン名<br> (例：vaqiita001.azurewebsites.net) |

以前はドメインの所有確認に "awverify" 付きのドメインを登録などしていましたが、それは不要になっています。

Azure DNSでの設定例：

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/87345cc0-134f-b4f5-0fd6-69a7e3fb5183.png)

# 作業2：WebAppsでカスタムホスト名の設定

作業1で登録したCNAMEが反映された後、作業を継続します。

Azureポータルで 対象WebAppsから「カスタムドメイン」を選択し、カスタムホスト名にて
- 「HTTPSのみ」を "オン" に設定後
- 「ホスト名の追加」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/3525ae16-b4cc-8da3-710a-f1a6f994d267.png)

先ほどCNAME登録したカスタムドメイン名 (例：demo01.vaqiita001.com) を入力し「検証」を押します。
検証後、ホスト名の利用可否・ドメイン所有権にチェックが入ったら「ホスト名の追加」を押します。

![e67.png](https://qiita-image-store.s3.amazonaws.com/0/172826/3db8c54d-bafe-8625-b465-ce600521e9d2.png)

追加されるとカスタムホスト名の設定に戻り、ドメインが追加されていることが確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/7b6749d3-fc6d-e9b4-5845-b45e00106471.png)

# 作業3：証明書の購入(1)

Azureポータルで「新規」 → 「app service certificate」で検索 → 「App Service証明書」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/31e6b14d-7d82-9fd7-a119-0ef2c1e6e7a1.png)

証明書の作成画面で
- ネイキッド ドメインのホスト名：カスタムドメイン名 (例：demo01.vaqiita001.com)
- 証明書SKU：S1(Standard) か W1(ワイルドカード)を選択
その他の項目は適切なものを入力し、契約条項に同意して「作成」を押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/9c7b68a8-d086-c99e-ff6e-15428d3b2803.png)

作成後、すぐに構成ウィザードが起動するため、手順に従って設定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/851cafbe-d3b6-e380-8509-d24d948e367c.png)

手順1：格納 を選択するとKey Vaultの構成画面に遷移するので、新規Key Vaultを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/b2bfb6db-3902-81c5-f57c-e38572dcc329.png)

キーコンテナの名前等を入力して「作成」します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/e342a6ae-f90b-9001-d5c1-3a319b40b113.png)

作成後ウィザードに戻ると、手順1にチェックが入っています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/9e9e8df6-165f-c1a1-cd80-18934f17c876.png)

手順2：確認 を押すと、ドメインの検証画面が出てきます。
この画面に「ドメイン確認トークン」(30桁程度の文字列)が表示されているので、これをコピーして作業4に進みます。

![se67.png](https://qiita-image-store.s3.amazonaws.com/0/172826/88287d03-34a6-c25e-e462-e421a732d1de.png)

# 作業4：ドメインへのTXTレコード登録

DNSサービスにて、先ほどコピーしたドメイン確認トークンを TXTレコードとして登録します。

| 種類   | 名前                                            | 値                                                  |
|:-------|:-----------------------------------------------|:----------------------------------------------------|
| TXT  |  割り当てるカスタムドメインのセカンドレベルまで<br> (例：vaqiita001.com) | 先ほどコピーしたドメイン確認トークン |


Azure DNSでの設定例：

Azure DNSでは、DNSゾーンのトップにレコードを登録する場合、名前として"＠"を入力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/3cca7ba6-a36d-08a3-b2eb-58efccb0a85c.png)

Route 53での設定例：

Route 53では、ゾーンのトップはブランクで登録します。Azureのように"＠"を入れるとエラーになるので注意して下さい。また、保存するとテキストがダブルコーテーションで囲まれますが、登録時には入力する必要はありません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/6bbe23c0-e70d-5ffc-1295-70978e97b5dd.png)

# 作業5：証明書の購入(2)

TXTレコード登録(反映)後、証明書の購入ウィザードに戻り、「最新の情報に更新」を押します。

![se67b.png](https://qiita-image-store.s3.amazonaws.com/0/172826/7c44576f-f80e-972a-890b-91463116b953.png)

証明書のドメイン確認済みになったことを確認します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/00aaac84-fde9-6845-4d73-c7fe5add8c40.png)

チュートリアルに戻ると何故か手順3までチェックの入った画面に戻りますが・・・この先はWebAppsで設定を行います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/3aca92fc-dfcf-cef9-e802-8d6db5ed39e9.png)

# 作業6：WebAppsで証明書設定

Azureポータルにて WebAppsから 「SSL設定」 → 「プライベート証明書」→ 「App Service証明書のインポート」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/78765c0b-ce02-6efe-02d9-e80990e20425.png)

表示されたダイアログで、作業5で購入した証明書を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/64dc8c36-a50c-d3f8-f018-e342e73f47c7.png)

SSL設定に戻り、証明書が追加されたことを確認します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/7ebb7904-5c8a-cda2-071d-55898b77887d.png)

次に「バインド」タブに移動して、「SSLバインディングの追加」を選択します。

![2d3163666135376661656262392e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/172826/9670d84c-34fe-6709-4e1f-405b8a3b082f.png)

SSLバインディングにて以下を設定して追加します。
- ホスト名：カスタムドメイン名 (例：demo01.vaqiita001.com)
- プライベート証明書の捺印：先ほどインポートした証明書を選択
- SSLの種類：SNI SSL

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/b69c219c-4686-2c2f-310b-2b2b57fa0d63.png)

SSL設定に戻り、追加されたことを確認します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/c27783a3-ba7f-69f8-8357-c44b1c16f4c4.png)

最後に、WebAppsを一度再起動すれば作業完了となります。
しばらく待つと概要のURLも割り当てたカスタムドメイン名に変更されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/1f24242a-bd45-ae23-827c-76c8391d1e69.png)

# 動作確認

割り当てたカスタムドメイン名でWebAppsにアクセスし、証明書が設定されていることを確認します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172826/8e17b7e3-fe63-df32-f73b-56f749fe3b08.png)

以上でSSL対応したWebサイトを構築できました。

手順にすると少し長くなってしまいましたが、ドメインや証明書購入の事務手続きも不要ですし、基本的にはウィザードに従って登録していくだけなので、WebAppsの場合はAzure機能を活用して構築するのが便利だと思います。

# その他

作業6 で登録した TXTレコードは作業後には不要になるので削除しておきます。

# 参考資料

- [Azure App Service プランの概要](https://docs.microsoft.com/ja-jp/azure/app-service/azure-web-sites-web-hosting-plans-in-depth-overview)
- [Azure Web Apps のカスタム ドメイン名を購入する](https://docs.microsoft.com/ja-jp/azure/app-service/custom-dns-web-site-buydomains-web-app) 
- [カスタムドメインへのSSL証明書発行](https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-purchase-ssl-web-site)