Azure で静的コンテンツを効率よく配信する手順をまとめた

Azure を使って静的なコンテンツを効率よく配信するために、実行するべき手順を 3 つにまとめました。

普段は高速な回線で確認しているケースが多いと思うので問題ないように見えますが、油断していると携帯回線で悲惨なことになります。shibayan.jp を PageSpeed Insights で調べると以下のようになります。

shibayan.jp は Web Apps 上で動かしているため多少ましですが、スマートフォン向けでキャッシュが有効に使われていない点は見過ごすわけにはいきません。

行うべき作業は以下のような感じです。ぶっちゃけ当たり前という感じですが、忘れがちです。

Blob からファイルを配信する
Cache-Control でファイルの有効期限を設定する
Azure CDN でのファイル圧縮を有効にする

既に何回か書いたかもしれませんが、完全版という感じで書くことにします。

Blob からファイルを配信する

静的なファイルを Blob から配信するのは、可用性とパフォーマンスを考えた場合の基本的な方法だと思います。Azure Cloud Design Pattern で言うところの Static Content Hosting Pattern です。

Static Content Hosting Pattern | Microsoft Learn

Blob は高い可用性とパフォーマンスを持ち、そして安いのでファイルストレージとして最適です。

画像などが大量に含まれるとデプロイに余計な時間がかかるので、小規模なアプリケーション以外では Blob から配信するべきです。特に Web Apps から大量に静的なコンテンツを配信するのは避けるべきです。

Cache-Control でファイルの有効期限を設定する

Azure Blob は明示的に指定しない限り Cache-Control ヘッダーが書き出されないため、変更がない場合には基本的には ETag と Last-Modified を使った 304 レスポンスになるはずです。

304 ではコンテンツが返されないので高速ですが、無駄な通信が発生してしまいます。

Azure Blob Storage の有効期限を管理する - Azure Content Delivery Network | Microsoft Learn

ドキュメント中のサンプルでは、プロパティの値をアップロード後に弄っているので SetProperties を明示的に呼び出す必要がありますが、アップロード前に設定しておけば不要になります。

// 保存するファイル名
var filename = "sample.txt";

var blob = directory.GetBlockBlobReference(filename);

// Cache-Control ヘッダーで有効期限を 1 年に設定する
blob.Properties.CacheControl = "public, max-age=31536000";

// Content-Type を設定しておく
blob.Properties.ContentType = MimeMapping.GetMimeMapping(filename);

blob.UploadText("sample text");

アップロード後に設定されたプロパティを確認すると、Cache-Control が設定されています。

ブラウザでアクセスすると、2 回目以降はキャッシュが使われていることも確認できました。

これで Blob に配置したファイルが、ブラウザで正しくキャッシュされるようになりました。

Azure CDN でのファイル圧縮を有効にする

Blob から配信する場合は圧縮が行われないので、そのままだと CSS や JavaScript といった圧縮が効きやすいファイルで無駄が発生してしまいます。なので Azure CDN を使って解決します。

これまでも Azure CDN を Blob の先に噛ませ、配信のパフォーマンスを改善するといった方法は多く実行されてきたと思いますが、少し前のアップデートで自動的にファイルの圧縮が行えるようになりました。

Azure CDN でのファイル圧縮によるパフォーマンスの向上 | Microsoft Learn

Azure CDN のアップデートについては Azure 界の抱かれたい男 No.1 こと @kosmosebi のブログでも紹介されています。ファイル圧縮以外にも新機能があるので、活用していってください。

Azure Update (2015.08.12) | ブチザッキ

実際にファイル圧縮の設定を行うわけですが、クラシックポータルに CDN 補助ポータルというものが追加されているので、そこからサクッと設定を有効にしてしまいます。

デフォルトで圧縮が有効に働く MIME タイプのみが選択されています。MIME ベースで圧縮の有無を切り替えるので、Blob に正しい Content-Type を設定しておかないと、圧縮が無効になるので注意が必要です。

Minify を行うともう少しサイズを縮小可能ですが、最近は Application Insights などで JavaScript のエラーを収集することもあるので、シグネチャが変わってしまうとめんどくさいことになります。

キャッシュを無視して読み込ませる方法

Azure CDN はキャッシュされたコンテンツのパージが行えないため、配信するファイルの URL を変更したりクエリ文字列を追加して、新しいファイルが読み込まれるように対応する必要があります。

クエリ文字列を使う場合には CDN の設定から有効にしておかないと、クエリ文字列が無視されてキャッシュされたコンテンツが返ってくるので注意が必要です。

おまけ：通信環境をエミュレートする

Chrome の開発者ツールに備わっているネットワークスロットリング機能を使うと、様々な環境でどのくらい読み込みに時間がかかっているのか簡単に確認することができます。

通信速度を絞るだけではなく RTT についてもエミュレートしてくれるので、通信環境が良くない場合にどうなるのかを確認できて便利です。積極的に使っていきたい機能ですね。

しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ