Azure Storage Accountの静的なWebサイト機能とFrontDoorを組み合わせて利用してみた

1.はじめに

皆さんはストレージアカウントを使用することで、静的なWebサイトを公開することができることを御存知でしょうか。

ストレージアカウントには「静的なWebサイト」機能があり、これを有効化することで、Webサイトとして運用することができます。

今回はAzureストレージアカウントの静的なWebサイト機能と、FrontDoorを組み合わせた構成で、Webサイトを公開してみたいと思います。

2.ストレージアカウントの静的なWebサイト機能とは

今回の目玉、ストレージアカウントの静的なWebサイト機能ですが、なんとこれ、ストレージアカウントにHTMLファイルなどを置くだけで、Webサイトを表示してくれるという便利な機能です。

1点だけ注意点があるとすれば、あくまで「静的な」となりますので、サーバ処理が必要なWebサイト、通販サイトなどは作成できず、会社のホームページなどの静的なものに限られます。

ただ、一つのWebページだけではなく、他のWebページのHTMLファイルなども入れることで、Webページの遷移も可能なので、表示させるだけのWebサイトであれば、これだけでも十分実現可能です。

それでは構成の方に入っていきましょう。

3.構成について

今回は以下構成となります。

今回作成するのは以下サービスとなります。

・ストレージアカウント

・AzureFrontDoor

なお、ストレージアカウントの静的なWebサイト機能では、カスタムドメインを直接設定した場合のHTTPS通信に制約があるため、

FrontDoorを経由させることで、カスタムドメインによるHtttps通信を実現する予定でしたが、

カスタムドメインの取得に時間がかかったため、カスタムドメイン構成は今回行わないこととしました。

そのため、実際FrontDoorはWebサイトを公開するだけであれば不要ですが、もし今後カスタムドメインに切り替える想定がある場合は、

FrontDoorを構成して作成することをおすすめいたします。

それではストレージアカウントの作成から移っていきます。

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

それではまずストレージアカウントを作成していきます。

といってもほぼ既定で作成します。

まず[基本]ですが、今回は検証のため、リソースグループを検証用のグループとしている（検証後一括で削除可能なように）のと、ストレージアカウント名は自由につけていただき、

あとは冗長性は検証の為、一番コストの安いLRSに変更しています。

他は全て既定で作成します。

完了後、作成したストレージアカウントを開き、[データ管理]＞[静的なWebサイト]を開きます。

現在は「無効」となっていますので、これを「有効」へ変更します。

すると、「インデックスドキュメント」「エラードキュメント」という設定項目が出現します。

インデックスドキュメントは、この静的なWebサイト機能のURLをたたいた際に最初に表示される既定のページ、エラードキュメントはその名の通りエラー画面のページをそれぞれ入れます。

今回はインデックスドキュメント、エラードキュメントともにHTMLファイルの名称が決まっているため、インデックスドキュメントには「start.HTML」、エラードキュメントには「error.HTML」というファイル名を入れています。

プライマリエンドポイントのURLだけコピーして保持しておき、次はBlobストレージの$webにWebサイト用のファイルを入れていきましょう。

ストレージアカウントの[データストレージ]＞[コンテナー]内に、ストレージアカウントが作成された際に作成される「$logs」ともう一つ、「$web」があることがわかります。

この「$web」はストレージアカウントの静的なWebサイト機能を有効にすることで、自動的に作成されます。

ではこの中に今回はHTMLファイルを入れます。

blobのアップロードにて、ファイルを入れます。

以下3つのファイルを入れています。

・start.html

・next.html

・error.html

start.htmlは先ほど静的なWebサイト機能でインデックスドキュメント名に指定したファイル、next.htmlはstart.htmlから遷移できる別のページです。

error.htmlはエラードキュメントのパスで表示する予定のファイルです。

それでは、まずはこのファイルが正しく表示されるか、先ほどコピーしたプライマリエンドポイントのURLをEdge上で打って確認したいと思います。

はい、そうすると、文字化けが起こっていました。

これはHTMLファイルにて日本語指定やUTC-8を設定しなかったため発生しました。

それでは気を取り直して、ファイルを編集して再度アップロード後、確認してみます。

今度はうまくいきました。

遷移先の「ブログ一覧へ」がnext.htmlへつながっているのですが、こちらもどうでしょうか。

正常に遷移しました。

上記のように、ストレージアカウントの静的なWebサイト機能だけでも、URLを打てば表示させることができます。

それでは、この後はFrontdoorの作成及びストレージアカウントへの紐づけを行います。

5.FrontDoorの作成

それではFrontDoorの作成をしていきます。

今回は検証の為、PreimiumではなくStandardで作成をしていきます。

また、オプションも簡易作成としていますが、こちらはお好きな方をご選択ください（今回はストレージアカウント一つだけの紐づけなので、簡易作成としています）。

作成を進め、基本の情報のところに入りました。

ここでFrontDoorの名前、レベル、またエンドポイントの名前などを設定します。

エンドポイントの名前は、カスタムドメインを持たずに行う場合、URLに入る名前となりますので、お好きなものをお付けください。

また、ここで「配信元の種類」があるため、「ストレージ（静的Webサイト）」を選択します。

配信元を選択すると、配信元のホスト名も自動で入るため、そのまま作成画面に移ります。

作成が完了したので、「配信元グループ」と「ルート」の確認を行います。

ただ、配信元グループについては配信元の指定を行っており、またルートについても作成時に自動で作成されます。

（配信元グループ）

（ルート）

カスタムドメインなどを設定される方は、AzureDNSゾーンへの登録、FrontDoorの「ドメイン」へのカスタムドメインの登録などが必要となりますが、

今回はカスタムドメイン登録は行わないため、これでFrontDoorの構成完了となります。

それでは、FrontDoorの概要画面の「エンドポイントのホスト名」にある「○○azurefd.net」をコピーし、https://を付けて検索してみましょう。

検索をすると、以下のようにページが正しく表示されました。

上のパスを見ていただければわかるかと思いますが、これは「azurefd.net」なので、FrontDoor経由でストレージアカウントのページを見ていることになります。

ちゃんと次のページの遷移もうまくいっています。

6.おわりに

いかがだったでしょうか。

今回はストレージアカウントの静的なWebサイト機能とFrontDoorを用いて、Webサイトの表示を行いました。当初はカスタムドメインのhttps接続をするためにFrontDoorを設定しようと思っていたのですが、無料ドメインサイトno-ipのドメインではTXTレコードをもう一つ追加できず（1つまでしか無料ではない）、断念しました。

次回があればカスタムドメインを使用して行ってみたいですね。

当サイトはパーソルクロステクノロジー㈱より提供しています

目次