Azureに素早く静的Webサイトを構築する（ついでに独自ドメインでHTTPS）

## 経緯

昨年ついにAzureで静的Webサイトの公式サポートが行われるようになりましたのでためしに構築してみました。
（Azureさん。ちょっと遅すぎませんか？もっと頑張って！）
運用コストもだいぶ安く済みますので、結構実用レベルかなと思います。

## ストレージアカウントの作成

まずはWebサイトのリソースを格納するコンテナ用のストレージアカウントを作成します。
すでに(汎用V2で)作成済みの場合は飛ばしてください。

リソースの作成からストレージ→ストレージアカウントを選択します。

<img width="586" alt="sw_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/3feac5b2-445d-b8c0-3ac9-267e5d983792.png">

### 基本タブ

まずは基本タブから。

<img width="778" alt="sw_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/63e0b8b9-f51e-8908-495c-d5ec91bc9343.png">

リソースグループは新しいものを作っておくと良いです。

#### アカウントの種類

静的Webサイト構築の場合は「StorageV2(汎用V2)」にする必要があります。

#### レプリケーション

お好みのものでも良いですが、静的Webサイト構築が目的ならリソースのバックアップは不要なので、
一番安い「ローカル冗長ストレージ（LRS）」で問題ないです。

#### アクセス層

後に説明するAzureCDNを使用しない場合は「ホット」にします。
使用する場合はどちらでも良いですが無難に「ホット」で良いと思います。

#### その他の項目

必須項目をよしなに設定してください。

### 詳細タブ

<img width="765" alt="sw_03.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/3366e3af-c251-f675-d056-41734d6bb3b0.png">

#### セキュリティ

HTTP接続も行う必要がある場合のみ無効にしますが、有効のままが良いでしょう。

### 作成

「確認および作成」で検証が完了したら作成します。

## 静的Webサイト対応

作成したストレージアカウントを開いて、「設定」→「静的なWebサイト」を選択します。
その後、「静的なWebサイト」を「有効」に変更します。

<img width="725" alt="sw_04.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/23ae82ef-5152-e8fe-7cb8-7a58ca82d694.png">

#### プライマリエンドポイント

このURLにアクセスするとサイトを表示することができます。

#### インデックスドキュメント名

いわゆるトップページです。
上記のエンドポイントの"/"以降に何も指定しなかった場合に飛ばされるページです。

#### エラードキュメントのパス

不正なパスを指定した場合などページが存在しない場合に表示するページです。

## ページ（HTML）の配置

表示したいHTMLの配置を行います。

一番簡単な方法は「静的Webサイト対応」の画面の青くなっている「$web」をクリックするとサイト用のコンテナへ移動できます。
ただし、そこではファイルのアップロードはできますがフォルダを作成することができません。
StorageExplorerなどの外部ツールを別に用意する必要があります。
（面倒でなければその方が後々の作業がしやすくなると思います）

フォルダもweb上で作れる方法もあります。
ストレージアカウントのメニューにある「StorageExplorer（プレビュー）」を使用する方法です。

<img width="962" alt="sw_05.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/4b0fbf2a-5147-9575-22db-0e6ecd608b4a.png">

「BLOB CONTAINERS」→「$web」から該当コンテナを表示してアップロードやフォルダ作成を行います。
ここで、「静的Webサイト対応」で指定した、「インデックスドキュメント」「エラードキュメント」を忘れずに追加します。

以上で静的Webサイトの構築が完了しました。

## Azure CDNの有効化

現状では独自ドメインをHTTPSで使用する場合は「Azure CDN」が必須となります。

### CDN(Content Delivery Network)とは

すごくざっくり説明すると、Webサイトを閲覧する人のご近所にあらかじめサイトのコピー（キャッシュ）を用意しておいて、高速にアクセスできるようにする仕組みのことです。

CDNの課金は通信量によって決まります。日本ですと2019/2/14現在ではだいたい14円/GBほどです。
https://azure.microsoft.com/ja-jp/pricing/details/cdn/

安いとは言えないですが、動画配信でもしない限りは大した金額にはならないでしょう。
例：
Webサイトに合計10MBのコンテンツがある。
10,000人/月訪れる。
10×10,000×0.014 = 1,400円

### CDNの設定

ストレージアカウントのメニューから「Blob service」→「Azure CDN」を選択します。
その中で、新しいエンドポイントを作成します。

<img width="633" alt="sw_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/5bc6a8ff-d865-6959-5273-77a401bf57af.png">

#### 価格レベル

基本は「Standard」とつくものを選びます。
（その他の違いがよくわからなかったので「Verizon」を指定するのが無難かなと思います）

#### CDNエンドポイント名

CDN経由でWebサイトにアクセスするためのURLを指定します。

#### 配信元のホスト名

「静的Webサイト対応」のプライマリエンドポイント（"HTTPS://"は不要）を指定します。
※初期設定されている値ではありません。（初期値はストレージそのもののURLになっています）

これで作成するとCDNの構築が完了します。

## 独自ドメインとHTTPS対応

最後に独自ドメインのHTTPS対応を行います。

### 独自ドメインのマッピング

まずはCDNエンドポイントを独自ドメインのホスト名にマッピングを行います。
独自ドメインを登録しているレジストラーのDNS設定を行います。

DNSについては、
[Azureに素早くGitLabを構築する（ついでに独自ドメインでHTTPS）](https://qiita.com/RYO-4947123/items/7800c620925923dd2ffd)
の「独自ドメインの設定」を参照してください。

DNSに「CNAME」レコードを追加します。
独自ドメインでアクセスしたいWebサイトのURLをホスト名に設定し、
CDNエンドポイント「〜.azureedge.net」をVALUEに設定します。

### CDNに独自ドメインを登録

Azureポータルに戻って、リソースから作成したCDN(エンドポイント)を開きます。
概要の上の方に「＋カスタムドメイン」という項目がありますので選択します。

<img width="836" alt="sw_07.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/b2618fcc-0f77-35a8-3d71-46eb2cfe27bb.png">

#### カスタムホスト名

先ほどDNSに設定したホスト名（.<独自ドメイン>）を設定します。

### HTTPSの有効化

概要のカスタムドメイン欄に上記で追加したホスト名があるので選択します。
その中で「カスタムドメインHTTPS」を「オン」に変更します。
すると、下記１〜４の検証作業が自動で実行されますので気長に待ちます。

<img width="383" alt="sw_08.png" src="https://qiita-image-store.s3.amazonaws.com/0/145504/f31db1de-9375-3c4e-35df-cbd0c21d86fe.png">

「２　ドメインの検証」の段階で、DNSに設定したVALUE(CDNエンドポイント名のはず)が同じCDNエンドポイント名ではない場合はWHOIS情報に設定されているメールアドレスに確認メールが送られるそうです。
この手順通りに作業した場合はメールは送られずに処理が完了します。
（詳細欄に"承認を保留"云々と出るので一瞬間違えたかと焦りましたが大丈夫でした）

※２の作業は6時間ほどかかる場合があるそうですが・・・確かにかかりました（汗）

以上で全ての作業完了です！！！

## キャッシュについて

CDNのキャッシュへの読み込みはだいたい90分前後らしいです。
ですので、HTMLをコンテナにアップしてもすぐには見れないです。
（CDNエンドポイントから見れないだけなので「静的Webサイト」のプライマリエンドポイントからならすぐに確認できます）

CDNのキャッシュの有効期限はデフォルトで「7日」となっています。
ですので、HTMLを差し替えてもすぐには反映されませんのでご承知を。

頻繁に変えるようなら有効期間を短くしても良いですが静的Webサイトを前提にしているので、
そんなに変わるものでも無いはずなので不便は無いと思います。