Azure StorageとAzure CDNを連携して、カスタムドメインでhttpsな静的サイトを公開する


Azure Storageでホスティングした静的ファイルを

Azure CDNからカスタムドメインで閲覧可能にしていきます。


途中いくつかつまづきポイントがあったので、備忘録がわりに記録します。



## Azure Storage上でホスティングをする

CDNとの連携前に、まずはAzure Storageのみでのホスティング設定をしていきます。

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

まずは、Storageの作成です。

ストレージアカウントを作成していきます。

![ストレージ アカウントの作成 - Microsoft Azure 2020-02-21 12-13-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/32477664-b608-7f04-8189-5eaecbbb98a5.png)

基本的にデフォルトの設定で大丈夫です。
今回は公開サイトを作っていくので、パブリックな状態でこのまま作成します。

### 静的なWebサイトの設定

作成したストレージアカウントに、静的なWebサイトのホスティングを設定します。

![yoshinostoragesample - 静的な Web サイト - Microsoft Azure 2020-02-21 12-22-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/3454adc1-665e-17f8-6521-93ea5ff1987c.png)


1. 左側のメニューの「設定」の「静的なWebサイト」をクリック
2. 静的なWebサイトを「有効」に
3. インデックスドキュメント名に「index.html」を設定
4. 左上の保存ボタンをクリック

これで静的なWebサイトの設定が完了です。

以下のようにエンドポイントが表示されます。

![yoshinostoragesample - 静的な Web サイト - Microsoft Azure 2020-02-21 12-25-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/5f3cf63f-e6e3-eb04-7daf-462c1d2786b4.png)


まだファイルを何も設置していないため、ここにアクセスしても、以下のように404ページが表示されます。

![WebContentNotFound 2020-02-21 12-25-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/44cd36b0-f9ba-3b5c-18df-a11dea8d12bc.png)


### ファイルを設置する

次にAzure Storageにファイルを設置します。

![$web - Microsoft Azure 2020-02-21 12-28-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/cf6ef673-57b5-deaf-3f69-3175d084b5a9.png)

1. 左メニューの「Blob service」から「コンテナー」をクリック
2. 「$web」をクリック


![BLOB のアップロード - Microsoft Azure 2020-02-21 12-29-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/bd15777b-041c-01df-03f3-cf66276aad86.png)

3. 「アップロード」をクリック
4. 「Files」をクリック


ここでファイルのアップロードが可能です。

今回は以下の、HelloWorldのみのhtmlをアップします。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    Hello World!
</body>
</html>
```

アップロードが完了したら、先ほどのエンドポイントにアクセスしてみます。


![Hello World 2020-02-21 12-33-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/e265fb7b-0b03-626f-776b-947b0361f866.png)


Hello Worldが表示されれば、ホスティング成功です。


以上が、Azure Storageでのホスティングになります。



## Azure StorageとAzure CDNを連携させて表示する。


次にAzure CDNとの連携をしていきます。

ストレージアカウントの画面で、

![yoshinostoragesample - Azure CDN - Microsoft Azure 2020-02-21 12-44-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/fd1b8d49-a371-481f-cfb6-69605d1efb34.png)


1. 「Blob service」の「Azure CDN」をクリック
2. 新しいエンドポイントで「CDNのプロファイル」を「新規作成」に
3. 「価格レベル」「CDNエンドポイント」に任意の値を入力(今回は標準にしました)
4. `注意!!` 「配信元ホスト名」に「静的サイトのホスティングのエンドポイント」を入力


4番だけ、少しだけ複雑なため解説します。


「配信元のホスト名」にはデフォルトでは

```
[ストレージアカウント名].blob.core.windows.net
```

が入ってますが、静的サイトのホスティングの場合は、この文字列を削除し、


```
[ストレージアカウント名].z11.web.core.windows.net
```

のような、先ほどの静的サイトのホスティングで作成した、エンドポイントを入力します。

間違えやすいので、気をつけてください。


作成が完了すると、以下のようにホスト名に入力したCDNのホスト名が表示されるので、そこをクリックします。

![yoshinostoragesample - Azure CDN - Microsoft Azure 2020-02-21 12-48-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/fe56a408-e4c8-d934-a75c-6f4d59061326.png)


![yoshino-sample (yoshino-sample-cdn:yoshino-sample) - Microsoft Azure 2020-02-21 12-50-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/303b81e7-3722-154a-b2cd-9312065ff59c.png)

エンドポイントのホストをクリックして、URLにアクセスします。![カスタム ドメインの追加 - Microsoft Azure 2020-02-21 12-52-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/5cf7415f-a9d0-65a8-0d7b-d4862c53c807.png)


先ほどと同じように「Hello World」が表示されれば、成功です。




## カスタムドメインを設定する

次に作成したCDNにカスタムドメインを設定します。


### Azure CDNのホスト名をコピー

Azure CDNの画面から

![yoshino-sample (yoshino-sample-cdn:yoshino-sample) - カスタム ドメイン - Microsoft Azure 2020-02-21 12-51-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/31ef583f-07e5-ae0f-0f64-875313708462.png)


1. 「設定」の「カスタムドメイン」をクリック
2. 「+ カスタムドメイン」をクリック


![カスタム ドメインの追加 - Microsoft Azure 2020-02-21 12-52-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/3659157a-712d-fdfa-065c-a6a7fd74494e.png)

3. 「エンドポイントのホスト名」をコピー


をします。


### カスタムドメインのDNS設定でCNAMEを変更


次に、今回設定したいカスタムドメインのDNS設定を変更します。

今回は[お名前.com](https://www.onamae.com/)を使用しました。


お名前.comのDNS設定画面を開き、CNAMEを新しく追加します。
「VALUE」には上記でコピーしたエンドポイントのホスト名を入力します。


<img width="662" alt="ドメインNavi 2020-02-21 12-57-57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/1ee14b1d-f298-1c66-822e-d564ae87d1b7.png">




### Azure CDNに対してカスタムドメインを入力


カスタムドメインの追加の画面に戻り、ホスト名を入力します。


![カスタム ドメインの追加 - Microsoft Azure 2020-02-21 13-00-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/9dfe53a0-30e9-ac5a-7795-7f42ceaceaae.png)

DNSの設定が反映されるまで、上記の赤の「！」が表示されますが、

DNSの設定が反映されると、「追加」をクリックできるようになり、カスタムドメインが設定されます。




## カスタムドメインにSSL対応をしてhttps化する


最後に、今回設定したカスタムドメインをhttps化します。


カスタムドメインをクリック。

![yoshino-sample (yoshino-sample-cdn:yoshino-sample) - Microsoft Azure 2020-02-21 16-45-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/ffe5949d-bcce-b80a-feef-e1ab4d27acda.png)


![yoshino-sample.fusic.jp - Microsoft Azure 2020-02-21 16-44-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/c0d47698-f4d6-fe79-15a8-2004c3f057f2.png)

1. 「カスタムドメインHTTPS」を「オン」に
2. 「証明書の管理の種類」を「CDNマネージド」に
3. 左上の「保存」をクリック


しばらくすると、ドメインの検証・証明書のプロビジョニングがはじまり、SSL対応が完了します。


カスタムドメインにアクセスして、アクセスできることを確認できます。


---

以上で、Azure StorageとAzure CDNを連携して、カスタムドメインでhttpsな静的サイトを公開することができました。

Azureは公式ドキュメント以外の記事がなかなか少なかったり、記事が古くてUIが違うことも多かったり、開発に想定以上の時間がかかってしまうなと思いました。

もっと使い倒していけたらなと思います！


最後まで読んでいただき、ありがとうございました。