12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-30

#はじめに
個人的にワイルドカード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サーバ証明書の取得とか、気軽に個人で試すには少し敷居が高いと思いましたので、設定手順の参考になればよいと思い、投稿しました。

12
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?