Azure
WebApps

Azure Web Appsに独自ドメイン&SSLサーバ証明書を設定する

More than 1 year has passed since last update.

はじめに

個人的にワイルドカードSSL証明書を取得したので、Azure Web Appにカスタムドメインの登録とSSLサーバ証明書のバインドの一連の流れを確認しました。

MS公式ドキュメント「既存のカスタム SSL 証明書の Azure Web Apps へのバインド」とほぼ同じ内容ですが、自分の作業メモという意味が強い投稿となります。

今回はdigicertを利用しました。
なぜならば、Microsoft MVP受賞者は個人・テスト利用に限って無料で利用ができるからです。

必要なもの

以下のものが必要です。

  • 独自ドメイン
  • SSLサーバ証明書

今回は私が10年近く温存してきた "nya-n.net" ドメインを使います。
DigiCertから "*.nya-n.net" のワイルドカードSSL証明書を取得します。
cer形式で送られてきたので、以下のURLを参考にpfx形式に変換しました。

OpenSSLを使って.pfxファイル証明書を作成する方法

Web Appsの設定

Web Appsのデプロイ

任意のAzureサブスクリプション、リソースグループ、リージョンにてWeb Appsをデプロイします。
App ServiceのプランはBasic以上にする必要があります。(Freeプランではカスタムドメインが利用できません)
作成ボタンをクリックして作成します。

image.png

作成完了後、状態が「Running」となり、プランが指定したもの(Basic以上)であることを確認します。
image.png

カスタムドメインの追加

App Serviceのメニューから「カスタムドメイン」をクリックして、「ホスト名の追加」をクリックします。
image.png

追加するカスタムドメイン名(今回の例ではwebtest.nya-n.net)を入力後、「検証」をクリックします。
暫く待つと、画面下部に色々とエラーが表示されると思います。
これは、入力したwebtest.nya-n.netのDNSレコードが登録されていないからです。
image.png

私はAzureでDNSゾーンを管理しているので、AzureポータルにてCNAMEレコードを追加します。
「+レコードセット」をクリックします。
他のDNSサービスを利用している方はそれぞれの方法でCNAMEレコードを追加します。
image.png

CNAMEレコードを以下の様に設定します。
image.png

無事一覧にCNAMEレコードが追加されることを確認します。
image.png

再度App Serviceのカスタムドメイン追加画面で「検証」をクリックすると、無事追加されますので、最後に「ホスト名の追加」ボタンをクリックします。
image.png

無事カスタムホストが追加されたことを確認します。
image.png

この時点でwebtest.nya-n.netにhttpとhttpsでアクセスしてみた結果は以下の通りです。
まだ、SSL証明書が設定されていないのでhttps接続では証明書エラーが出ます。
image.png

image.png

SSL証明書の設定

App Serviceメニューから「SSL証明書」をクリック後、「証明書のアップロード」をクリックします。
image.png

ローカルPCの証明書ファイル(pfx形式)とその証明書のパスワードを入力後、「アップロード」をクリックします。
image.png

一覧にSSL証明書が追加されたことを確認後、「バインディングの追加」をクリックします。
image.png

ホスト名、証明書に適切なものを選択後、「バインディングの追加」をクリックします。
image.png

無事一覧に追加されることを確認します。
image.png

httpsによる接続確認

ブラウザでhttps接続を再度行い、証明書エラーが出ずに正常に接続できることを確認します。
image.png

おわりに

独自ドメインとか、SSLサーバ証明書の取得とか、気軽に個人で試すには少し敷居が高いと思いましたので、設定手順の参考になればよいと思い、投稿しました。