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

Question

所以，我不希望我的 static vue.js 應用程序上的 index.html 因為更新而始終被緩存。 我可以在存儲資源管理器中手動設置 max-age。 我為此站點設置了 Azure CDN，每次部署后我都會清除它，但我認為這不會總是更新當前用戶，因為 index.html 上的 max-age 未設置。 有沒有辦法從 CDN 設置最大年齡？ 或者是否有一個 azure cli 命令，我應該在 devops deploy 上使用它來設置存儲中 index.html 文件的 max-age。 我沒有看到太多關於這方面的文檔，也許 CDN 只負責處理所有事情？

Answer 1

確保為 CDN 的“服務器端緩存”和瀏覽器的“本地緩存”設置正確的值。 您需要在 blob 上設置 Max-Age 以使其始終在 CDN 中保持最新，同時在 Blob 上使用Cache-Control header 以使瀏覽器始終讀取當前版本。 這在 CDN 中也稱為“內部最大年齡”與“外部最大年齡”（緩存控制），盡管命名因提供商而異。

另請參閱我最近對此的回答： 如何停止 index.html 被 Azure CDN 緩存

對我來說，我發現在index.html的 blob 存儲中設置Cache-Control header 通常就足夠了，以便同時控制服務器端和本地緩存。 至少 Azure CDN 提供程序在服務器端也尊重這一點，因此您只需付出最少的努力。

如果要將其添加到管道，另請參閱此代碼示例： 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" 
    }
}