Help us understand the problem. What is going on with this article?

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

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

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

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

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

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

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

まずは、Storageの作成です。

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

ストレージ アカウントの作成 - Microsoft Azure 2020-02-21 12-13-31.png

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

静的なWebサイトの設定

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

yoshinostoragesample - 静的な Web サイト - Microsoft Azure 2020-02-21 12-22-24.png

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

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

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

yoshinostoragesample - 静的な Web サイト - Microsoft Azure 2020-02-21 12-25-00.png

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

WebContentNotFound 2020-02-21 12-25-53.png

ファイルを設置する

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

$web - Microsoft Azure 2020-02-21 12-28-10.png

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

BLOB のアップロード - Microsoft Azure 2020-02-21 12-29-45.png

  1. 「アップロード」をクリック
  2. 「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

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

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

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

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

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

yoshinostoragesample - Azure CDN - Microsoft Azure 2020-02-21 12-44-31.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

yoshino-sample (yoshino-sample-cdn:yoshino-sample) - Microsoft Azure 2020-02-21 12-50-00.png

エンドポイントのホストをクリックして、URLにアクセスします。カスタム ドメインの追加 - Microsoft Azure 2020-02-21 12-52-46.png

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

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

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

Azure CDNのホスト名をコピー

Azure CDNの画面から

yoshino-sample (yoshino-sample-cdn:yoshino-sample) - カスタム ドメイン - Microsoft Azure 2020-02-21 12-51-44.png

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

カスタム ドメインの追加 - Microsoft Azure 2020-02-21 12-52-46.png

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

をします。

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

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

今回はお名前.comを使用しました。

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

ドメインNavi 2020-02-21 12-57-57.png

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

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

カスタム ドメインの追加 - Microsoft Azure 2020-02-21 13-00-59.png

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

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

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

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

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

yoshino-sample (yoshino-sample-cdn:yoshino-sample) - Microsoft Azure 2020-02-21 16-45-55.png

yoshino-sample.fusic.jp - Microsoft Azure 2020-02-21 16-44-46.png

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

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

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


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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした