Azure Front Doorとは?Webページを高速に表示させる機能と仕組み

公開日:2023年1月17日最終更新日: 2023年1月17日

インターネットに公開したいコンテンツは、大量のアクセスに耐えうるよう設計する必要があります。可用性、アクセス時間の短縮、オートスケール、セキュリティなど、考慮しなければならない要素が多くあるなか、全てをカバーするようにクラウドサービスをそれぞれ選定するのは骨が折れる作業です。

一つのサービスで実現できれば…といった要望を叶えてくれるのがクラウドプラットフォームとして提供されているAzure Front Doorです。

本記事ではAzure Front Doorが提供する様々な機能と仕組みについて、実際に静的なWebページを公開する手法と合わせてご紹介します。

Azure Front Doorとは

Azure Front Doorとは、旧来のL7ロードバランサーサービスのAzure Front Door(クラシック)、Azure CDN Standard(クラシック)、Azure WAFの機能を1つのクラウドプラットフォームに統合したものです。

機能としてはStandardとPremiumの2種類がありますが、クラシックからの変更点はほぼ同じです。

大きな変更点としてはカスタムドメインの機能でTXTレコードベースのドメイン検証が可能になり、サブドメインテイクオーバーの対策が取れるようになったこと、プライベートリンクへのサポートが有効(Premium)になり安全な接続が可能になったこと等が挙げられます。

参考:Azure Front Door のレベルの概要

CDNについては次の章で、WAFについては「高い防御システムWAFの概要とAzureでの利用方法」を参照ください。

CDNについて

CDNはContent Delivery Networkの略で、ユーザーがコンテンツにアクセスする際に、ロケーションなどを確認しつつ適切な経路を案内し、快適なサービス提供を可能にする仕組みです。

世界中に公開するコンテンツを提供する上で必須と言える機能で、キャッシュ機能なども併用しながら遠い国からのアクセスにも素速いコンテンツ描画を可能とします。

動画配信、音楽配信、ライブ配信など、アクセシビリティが重要なコンテンツで特に利用されています。

Azureにおいては、Azure CDN Standard(クラシック)として提供がありましたが、Azure Front Doorに統合されました。

Application Gatewayとの使い分け

同じロードバランサー系のサービスとしてAzure Application Gatewayがありますが、大きな違いがあります。

  • Azure Front Doorはグローバルなサービスで複数リージョン間の負荷分散を行う
  • Azure Application Gatewayは特定リージョンのVNETに紐づいて負荷分散を行う

Azure Application Gatewayについては「オートスケール機能と負荷分散サービスAzure Application Gateway」を参照ください。

Azure Front Doorを使ってWebページを高速に表示させる手順

実際の手順をWebページを公開する形でご紹介します。Azure Front Doorの恩恵を理解してもらうために、Webページのロケーションはアフリカにし、日本のユーザーからアクセスされたときどのような動きになるかというのを体感してもらいます。

1. Azure StorageでWebページを公開する

ストレージアカウントを作成してWebページをアップロードします。

1Azure Portal上から [リソースの作成]→[ストレージ]→[ストレージアカウント]で[作成]をクリックします。

2以下項目を設定していきます。入力したら[Review]をクリックします。

  • ストレージアカウント名:世界で一意の値(ここではafricazeadaccount)
  • 地域:(Africa)South Africa North

3確認して[作成]。

4ストレージアカウントの作成ができたら、[概要]→[機能]タブ→[静的なWebサイト]をクリックします。

5以下項目を設定していきます。入力したら[保存]をクリックします。

  • 静的なWebサイト:有効
  • インデックスドキュメント名:公開するWebページのドキュメント名(index.htmlなど)
  • エラードキュメントのパス:存在しないWebページにアクセスしたときに見せるドキュメント(404.htmlなど)

6[プライマリエンドポイント]控えておきます。
[$web]をクリックします。

7[アップロード]→[BLOBのアップロード]から公開するWebページドキュメントを選択しペイン中の[アップロード]をクリックします。

8ここでアップロードする index.html の中身は以下のようにイメージファイルを公開するような形にしてください。
併わせてimg.jpgをアップロードします。

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>welcome to my page</h1>
<p>this page is to test Azure Front Door!</p>
<img src="img.jpg">
</body>
</html>

9控えておいた[プライマリエンドポイント]でブラウザからアクセスすると、アップロードしたWebページが表示されます。

アフリカにあるストレージで公開しているため、画像の描画が遅いと感じると思います。

著作者:kjpargeter/出典:Freepik

2. Azure Front DoorでWebページをバックエンドに指定

1[リソースの作成]→[ネットワーキング]→[Front Door and CDN profiles]で[作成]をクリックします。

2[フロントドアの作成を続行する]をクリックします。

3以下項目を設定していきます。入力したら[確認および作成]をクリックします。

  • リソースグループ:適切なグループ
  • 名前:任意(ここではglobalzeadprofile)
  • エンドポイント名:任意(ここではafricazeadendpoint)
  • 配信元の種類:ストレージ(静的Webサイト)
  • 配信元のホスト名:設定したプライマリエンドポイントをプルダウンから選択
  • キャッシュ中:無効(※後ほど有効にします)

4確認できたら[作成]をクリックします。

5作成したFront Doorのプロファイル→[エンドポイントのホスト名]をコピーし、ブラウザで開くと、公開されたWebページにFront Door経由で接続できます。

3. レスポンス時間を測る

1Front Door経由でWebページに接続する際のレスポンスの時間を測ってみます。手元のPCにWindowsならWSL(Windows Subsystem Linux)、Macならターミナルを開き、以下コマンドを入力します。

```
for i in {1..10}; do curl -s -w "%{time_total} 秒 \n" -o /dev/null https://{エンドポイントのホスト名}/; done
```

1度目の結果(エンドポイントのホスト名)

>1.606513 秒
1.532015 秒
1.527527 秒
0.395487 秒
0.393194 秒
1.517949 秒
1.495270 秒
1.506497 秒
0.395158 秒
1.520488 秒

2続いてエンドポイントのホスト名部分をプライマリエンドポイントに変更してコマンドを入力します。

1度目の結果(プライマリエンドポイント)

>1.577812 秒
1.462469 秒
1.453095 秒
1.463593 秒
1.466108 秒
1.461366 秒
1.470468 秒
1.467195 秒
1.463500 秒
4.821852 秒

多少ですがFront Doorを経由していないプライマリエンドポイントの方がレスポンスが遅いことが分かります。 続いてFront Doorの設定でキャッシュを有効にしてみましょう。

3作成したFront Doorのプロファイル→[フロントドアマネージャー]→ルート内の三点リーダから[ルートの編集]をクリックします。

4[キャッシュ]を有効にし、[クエリ文字列のキャッシュ動作]でクエリ文字列を無視するを選択し[更新]をクリックします。

5もう一度レスポンスの時間を測ります。

2度目の結果(エンドポイントのホスト名)

>1.530911 秒
0.033556 秒
0.033500 秒
0.035081 秒
0.036812 秒
0.035197 秒
0.037285 秒
0.033368 秒
0.072860 秒
0.040751 秒

3度目の結果(エンドポイントのホスト名)

>0.034821 秒
0.041118 秒
0.033913 秒
0.031458 秒
0.032189 秒
0.031118 秒
0.043688 秒
0.036444 秒
0.058028 秒
0.027115 秒

6レスポンス時間が早くなったことを確認できました。先程の設定で[圧縮]を有効にすると更に効果を実感できると思います。

ブラウザからもスーパーリロードなどブラウザのキャッシュを読まずにアクセスしてみてください。

まとめ

地理的、ネットワーク的に距離のあるコンテンツでも、Azure Front Doorを使うことによって素早いアクセスが可能になることを確認できました。

世界中のユーザーに対して大容量・多接続・高品質なサービスを提供する上で、導入必須なクラウドサービスと言えますので、是非試してみてください。

クラウドの運用代行や導入、開発は22年の実績をもつジードにご相談ください

  • クラウドの運用代行

    クラウドの監視・保守・運用の代行 お客様が運営するクラウドの監視・保守・運用業務を、ジードが代行いたします。

    サービスの詳細はこちら

  • クラウドの設計・構築

    クラウドの設計・構築 お客様のご要望に沿って、適切なクラウド選定から設計・構築までを行います。

    サービスの詳細はこちら

  • クラウド上でのシステム開発

    クラウドの設計・構築 Azure上で、AI + 機械学習、分析、ブロックチェーン、IoTを開発します。

    サービスの詳細はこちら

お問い合わせ・お見積もりのご依頼はお気軽に

Scroll to top