Azure CDNで動的サイトをまるっと配信

今年の2月にAzure CDNでカスタムドメインがサポートされたこともあり、WebサイトをまるっとCDN経由にする場面も増えているような気もします。ということで、各地域からアクセスがあるような動的サイトをまるっとCDN経由にして高速化してみます。

今回は、画像のみBlobから配信しているよくあるサイトを想定しています。

f:id:taka1923:20171216225812p:plain

これをオリジンのWeb Appsには直接アクセスさせず全てCDN経由にして、HTMLはキャッシュなし。bundleしたCSSとJavaScriptはCDNでキャッシュを保持して配信。
Blobにある静的ファイルも直接配信せずにCDN経由で配信に変更。ということで変更後の構成。

f:id:taka1923:20171216225809p:plain

さて、設定していきます。

Webサイト用のCDN作成

配信元を「Web アプリ」、最適化の対象を「動的サイトの高速化」にしてCDNを作成。DSAではプローブパスが必要になりますので、サンプル又は適当なファイルをプロジェクトに追加してパスをしています。

f:id:taka1923:20171216225806p:plain

CDNができたらキャッシュ規則を変更します。今回のキャッシュ対象にbundleしたCSSやJavaScriptもありますので、クエリ文字列のキャッシュ動作を「一位のURLをすべてキャッシュ」に変更し、カスタムキャッシュルールにbundleの場所を適当に追加します。

f:id:taka1923:20171216225802p:plain

設定が完了しましたら適当にアクセスしてCDNになじませて完了。

Blob 用のCDN作成

次は静的なファイルです。配信元を「ストレージ」、最適化の対象を「一般的なWeb 配信」にしてCDNを作成。

f:id:taka1923:20171216225756p:plain

今回はsvgもあるので圧縮形式に「image/svg+xml」を追加します。BlobにアップしているファイルにCache-Control が設定されていなければ、ついでなので設定。 Cache-Control も含めた静的コンテンツの配信については、しばやん雑記の「Azure で静的コンテンツを効率よく配信する手順をまとめた」をご覧ください。

既にアップしているファイルをまとめて設定するときはPowerShellで。

$context = New-AzureStorageContext -StorageAccountName "アカウント" -StorageAccountKey "アカウントキー"
$blobs = Get-AzureStorageBlob -Context $context -Container "images" -Blob "*"
foreach ($blob in $blobs)
{
    $blob.ICloudBlob.Properties.CacheControl = "public, max-age=31536000"
    $blob.ICloudBlob.SetProperties()
}