Azure Devops 在静态网站上使用 Azure CDN 在 Azure 存储中的 index.html 上设置 max-age

Question

所以，我不希望我的静态 vue.js 应用程序上的 index.html 由于更新而始终被缓存。我可以在存储资源管理器中手动设置 max-age。我为此站点设置了一个 Azure CDN，每次部署后我都会清除它，但我认为这不会始终更新当前用户，因为未设置 index.html 上的最大年龄。有没有办法从 CDN 设置最大年龄？或者是否有一个我应该在 devops 部署上使用的 azure cli 命令来设置存储中 index.html 文件的最大年龄。我没有看到太多这方面的文档，也许 CDN 会处理所有事情？

Answer 1

确保为 CDN 的“server-side 缓存”和浏览器的“本地缓存”设置正确的值。您需要在 Blob 上设置 Max-Age 以使其在 CDN 中始终为最新版本，同时在 Blob 上使用 Cache-Control header 以使浏览器始终读取当前版本。这在 CDN 中也称为“内部最大年龄”与“外部最大年龄”(Cache-Control)，但命名因提供商而异。

另请参阅我最近对此的回答： How to stop index.html being cached by Azure CDN

对我来说，我发现在 index.html 上的 blob 存储中设置 Cache-Control header 通常就足够了，以便同时控制 server-side 和本地缓存。至少 Azure CDN 提供商也尊重 server-side 的这一点，因此您只需付出最少的努力。

如果您想将其添加到管道中，另请参阅此代码示例： https://schwabencode.com/blog/2019/05/03/Update-Azure-Storage-Blob-Properties-with-PowerShell

# Storage Settings
$storageAccount = "__storage account__";
$containerName = "__container name__";

# Blob Update Settings
$contentCacheControl = "public, max-age=2592000"; # 30 days
$extensions = @(".gif", ".jpg", ".jpeg", ".ico", ".png", ".css", ".js");

# Read all blobs
$blobs = az storage blob list --account-name $storageAccount --container-name $containerName --num-results * --output json | ConvertFrom-Json

# iterate all blobs
foreach($blob in $blobs)
{
    # use name as identifier
    $blobName = $blob.name;

    # get extension
    $extension = [System.IO.Path]::GetExtension($blobName).ToLower();
 
    # update blob if extension is affected
    if($extensions.Contains($extension))
    {
        az storage blob update --account-name $storageAccount --container-name $containerName --name $blobName --content-cache-control $contentCacheControl
        Write-Host "Updated $blobName" 
    }
}

Azure Devops 在静态网站上使用 Azure CDN 在 Azure 存储中的 index.html 上设置 max-age

Azure Devops set max-age on index.html in Azure storage with Azure CDN on static web site

azure

azure-web-app-service

azure-cdn

azure-static-website-hosting