![](https://avalon-studio.work/wp-content/uploads/avs-head-02.jpg)
Azure Storage 上の静的 Web サイトに独自ドメインを設定する
前回の記事で、Azure Storage (ストレージ)上に静的 Web サイトを構築しました。
しかしこのままでは https://storagewebxxxx.xxxx.web.core.windows.net/ などのURLになってしまっているため、企業ウェブだったり公開ウェブとして運用するには、いささかみっともない場合があります。そこで今回は静的 Web サイトに独自ドメインを設定する方法をご案内します。
前提条件
- 独自ドメインを購入・保持していること
- DNS を編集できる状態にあること
ストレージに CDN の追加
ストレージアカウントのメニューから「Blog Service」-「Azure CDN」をクリックすると次のような画面が表示されます。
![](/wp-content/uploads/storageweb20-1024x802.png)
ここでエンドポイントというものを作成します。画面下部の「New Endpoint」にて、「Create New」を選択し、その下のテキストボックスにエンドポイント名を入力します。何でもよいので、ここでは「storageweb-cdn」とします。
価格レベルはどれも大差なく安いので(月間 10 TB まで 9 円とかのレベルです)、ひとまず Standard Microsoft を選択します。
CDN endpoint nameは ドメイン名の CNAME に登録するためのアドレスになります。DNS に登録するだけですので、一意であればなんでも問題ありません。ここでは wgpvzhub8ynmeprs と入力してみます。
最下行の Origin Hostname にはデフォルトで値が入っていますが、ここは変更する必要があります。先ほどウェブページにアクセスした URL を入力してください。
![](/wp-content/uploads/storageweb21.png)
そして「Create」ボタンを押してください。CDN エンドポイントの作成が始まります。
作成には数分かかりますので少々お待ちください。
CDN エンドポイントが作成されると管理画面から参照・アクセスできるようになります。
![](/wp-content/uploads/storageweb22.png)
右上に「Endpoint Hostname」という値がありますが、これが CDN 上の静的 Web サイトの URL になります。先ほど入力した wgpvzhub8ynmeprs という文字列と azureedge.net というドメインが組みあわさり、「wgpvzhub8ynmeprs.azureedge.net」というエンドポイント URL が生成されました。この URL にアクセスすると、Origin hostname と同じコンテンツにアクセスできるようになります。
エンドポイント URL にアクセスできるようになるためには、作成後 5 ~ 10 分ほどかかりますのでご注意ください。
DNS の設定
さて、この wgpvzhub8ynmeprs.azureedge.net と独自ドメインを結びつけるために、ドメイン名の DNS 側でも作業が必要になります。
たとえば www.hogehoge.jp というアドレスで上記静的 Web サイトを表示させたい場合、 Hogehoge.jp の DNS に、www の CNAME として wgpvzhub8ynmeprs.azureedge.net を設定する必要があります。
![お名前.com での DNS 設定画面の例](/wp-content/uploads/storageweb23.png)
お名前.com での DNS 設定画面の例
詳しくはドメイン名業者にお問い合わせください。
DNS の浸透には時間がかかりますので、このあとの作業は数時間ほど空けてからの再開を推奨します。
カスタムドメインの接続
さて、最後にカスタムドメインの接続です。
エンドポイントの管理画面に「Custom Domain」というメニューがあります。開いたブレードのメニューに「+Custom Domain」というメニューがあるので、それをクリックします。
![](/wp-content/uploads/storageweb30.png)
するとカスタムドメインの入力画面になりますので、ここにエンドポイントのURL (この例でいう wgpvzhub8ynmeprs.azureedge.net )と、Custom hostname に独自ドメインを入力します。
![](/wp-content/uploads/storageweb31.png)
先ほどのステップで DNS の設定が正しく行われていないと、上図のようにエラーになるのでご注意ください。
正しく設定が完了したら、ブラウザに独自ドメインを入力してアクセスしてみましょう。
前回設定した index.html が表示されたら、正しく設定されていることになります。
カスタムドメインの HTTPS 接続
Azure CDN さんは太っ腹なことで、CDN に接続したカスタムドメインに対して証明書を無料で発行し、HTTPS 接続を行うことができます。
証明書を普通に購入しようとすると数万、場合によっては十数万する場合もありますので、マイクソフトに足を向けて寝られません。
管理画面の「カスタムドメイン」で、追加した自身のドメインをクリックすると、カスタムドメイン HTTPS の ON/OFF を行う画面になります。
![](/wp-content/uploads/storageweb40.png)
ここでカスタムドメイン HTTPS を ON にすると、ドメイン名所持者確認のプロセスが走ります。
先ほど DNS を設定しているのでこの操作は問題なく終わるのですが、ドメインの検証プロセスには大変時間がかかります。
設定後1日ほど経ってから確認されることをおすすめします。
ドメインの検証か完了すると、HTTPS + 独自ドメインで、コンテンツにアクセスすることができます。
これで、表向きは立派な HTTPS サイトになりました。
まとめ
以上、Azure Storage 上に静的 Web サイトを独自ドメインで開設する方法をご案内いたしました。
気になる金額感ですが、 理論値だと
Azure Storage の記憶域料金:1GB 2.24円
Azure Storage の転送量料金:5GB まで無料
CDN の料金:10TB まで 9 円
ということになり、月額およそ 11 円前後で運用できる見込みです。
実際の明細は、後日実際に運用してみたものを公開しようと思います。