image - Azure，存储和部署静态内容（例如图像/css）的最佳方式？

Question

我们即将将 .NET Web 应用程序部署到 Azure Web 角色。我只是想知道其他人如何处理他们的静态内容，特别是图像和 css？目前我们的应用程序包大约 25mb，但其中 18mb 完全来自图像，例如导航按钮、图标和模板组件等很少更新的东西。将其从部署包中分区并将其移至 blob 存储是否明智？

我对这种方法有一些疑问，我想知道它们是否有效......

我们网站的 80% 运行在 HTTPS 环境中。访问 blob 存储中的图像会引入跨脚本问题吗？
如果有人试图恶意破坏我们的图像（大多数小于 20kb），是否存在资金泄露漏洞？
我正在努力了解如何使用目录命名约定将文件上传到 blob 容器（来自 VS2010 + Azure SDK），所以我不需要重写 1000 个路径引用？我很欣赏目录是 blob 容器中的一个抽象概念，但我可以用正斜杠编写文件以在代码中模仿这一点。显然，在我上传到 Visual Studio 之前，Windows 不允许我这样做。

欢迎任何想法或替代策略。真正的目标是缩小我们的部署包以加快部署时间。我也很喜欢将图像服务卸载到专用节点以提高 Web 服务器性能的想法，也许我的图像集合太小以至于几乎不值得打扰？

5 月 16 日更新 ----------------------------------------------- -------------------------

这是我最后所做的：

1.将所有图像+ css转移到blob存储容器。我维护了 images 和 css 文件夹中所有子目录的结构。

2.在我们的 web.config 文件中应用 URL 重写规则，如下所示。

  <rewrite>
    <rules>
      <rule name="imagestoazure">
      <match url="images/(.*)" />
      <action type="Redirect" url="https://xxxxx.vo.msecnd.net/images/{R:1}" />
    </rule>
  </rules>
  </rewrite>

3.从应用程序中排除图像+ css文件夹并部署。

我的部署现在要小得多，并且图像在 CDN 上运行，从而释放了带宽、提高了下载速度并释放了 Web 服务器的一些负载。

更新：2015 年 9 月

最近在查看此内容时，我遇到了 Microsoft 提供的以下指南。它更详细地介绍了如何使用查询字符串自动部署资产和缓存崩溃。

在您的 Web 应用程序中提供来自 Azure CDN 的内容

score 14 · Accepted Answer

一些评论：

将其从部署包中分区并将其移至 blob 存储是否明智？

绝对地。我可以看到这样做的许多好处：

正如您所提到的，这将大大减少您的包大小，从而使部署变得更快。
正如您所提到的，它会减轻您的网络服务器的负载，从而使您的网站更具响应性。
如果您需要更新图像、js、css 文件，您只需替换 blob 存储中的这些文件即可。如果它们留在您的包中，您将需要重新部署您的包。
您还可以利用 Windows Azure CDN，它在 blob 存储之外工作。

我们网站的 80% 运行在 HTTPS 环境中。访问 blob 存储中的图像会引入跨脚本问题吗？

只要您不通过 AJAX 阅读内容，我认为您不会遇到跨脚本问题（如何从 azure 网站访问托管为 azure blob 的 XML）。但是，如果您的页面是通过 https 提供的，并且您通过 http 引用静态资源，您的用户可能会收到混合内容（安全和不安全）消息。

如果有人试图恶意破坏我们的图像（大多数小于 20kb），是否存在资金泄露漏洞？

请查看此处的出站带宽定价：http: //www.windowsazure.com/en-us/pricing/details/#header-11。目前，Windows Azure 正在进行一项促销活动，最多可以免费传输 5 GB 的数据，而且价格为 0.12 美元/GB，非常便宜。您还需要考虑存储交易，这也很便宜。我不会太担心它。在最坏的情况下，您始终可以恢复为共享访问签名并保护资源。

我正在努力了解如何使用目录命名约定将文件上传到 blob 容器（来自 VS2010 + Azure SDK），所以我不需要重写 1000 个路径引用？我很欣赏目录是 blob 容器中的一个抽象概念，但我可以用正斜杠编写文件以在代码中模仿这一点。显然，在我上传到 Visual Studio 之前，Windows 不允许我这样做。

有许多 3rd 方工具可供您使用，它们将在 Blob 存储中上传时保留本地计算机的文件夹结构。请查看 Windows Azure 存储团队的这篇博文：http: //blogs.msdn.com/b/windowsazurestorage/archive/2010/04/17/windows-azure-storage-explorers.aspx。显然，我个人最喜欢的是 Cerebrata 的 Cloud Storage Studio :) [我是该产品的开发人员之一]

score 4 · Accepted Answer

如果您的包变得太大，也许您可以从部署独立文件中受益，而不是一个大的单个包文件。至少在 Visual Studio 2012 中，发布向导现在具有以下部署选项：

Web 部署（我鼓励你这样做）
Web 部署包
FTP
文件系统

AFAIK，Web Deploy比较源文件和目标文件，仅物理传输不同的文件（它可能比较文件哈希，但我不了解内部结构）。

无论如何，我会尝试提供更多信息来解决您的问题：

我们网站的 80% 运行在 HTTPS 环境中。访问 blob 存储中的图像会引入跨脚本问题吗？

Gaurav Mantri 已经回答了这个问题，但只是为了提供一些最新信息，现在支持 HTTPS 访问 Azure CDN，因此您可以避免混合内容消息。（仍在等待对自定义域/SSL 证书的支持（UserVoice 请求，此处提供最新信息）。

顺便说一句，使用无协议约定 ( ://{domain}/{relative path})，浏览器将使用与基本文档完全相同的协议 HTTP 或 HTTPS。

我正在努力了解如何使用目录命名约定将文件上传到 blob 容器（来自 VS2010 + Azure SDK），所以我不需要重写 1000 个路径引用？我很欣赏目录是 blob 容器中的一个抽象概念，但我可以用正斜杠编写文件以在代码中模仿这一点。显然，在我上传到 Visual Studio 之前，Windows 不允许我这样做。

将静态文件同步到 blob

AZCopy工具是同步静态文件的一种可编写脚本的选项。

另一种方法是这个powershell 脚本（有关此帖子的更多信息），它总结了：

是否进行初始设置：

$context = New-AzureStorageContext ` 
    -StorageAccountName $StorageAccount ` 
    -StorageAccountKey (Get-AzureStorageKey $StorageAccount).Primary

枚举 .\Content 和 .\Scripts 上的所有本地文件：

$files = (ls -Path $ProjectPath\Content -File -Recurse) + (ls -Path $ProjectPath\Scripts -File -Recurse)

...并循环上传每个文件：

foreach ($file in $files)  
    { 
        $blobFileName = (Resolve-Path $file.FullName -Relative).TrimStart('.') 
        $contentType = switch ([System.IO.Path]::GetExtension($file)) 
        { 
            ".png" {"image/png"} 
            ".css" {"text/css"} 
            ".js" {"text/javascript"} 
            default {"application/octet-stream"} 
        } 

        Set-AzureStorageBlobContent ` 
            -Container $StorageContainer ` 
            -Context $context ` 
            -File $file.FullName ` 
            -Blob $blobFileName ` 
            -Properties @{ContentType=$contentType} ` 
            -Force 
    }

引用 CDN 资产

另一个要解决的问题是如何引用 CDN 上的文件，而不是相关文件。有不同的解决方案，其中大多数使用帮助函数注入到相对路径的正确前缀（以下问题的一些答案可以帮助您：ASP.NET MVC 相对路径）。

我建议采用集中方式构建 CDN 资产 url，您甚至可以实现某种缓存杀手（为此，您需要在 Azure CDN 上启用查询字符串参数）：

剃刀：

<img src="@Helper.ToCdnUrl("images/asset1.png")">

辅助方法：

public static string ToCdnUrl(string relativePath)
{
    string prefix = ConfigurationManager.AppSettings["CdnUrlBasePath"];
    string sufix = ConfigurationManager.AppSettings["StaticFilesVersion"];
    return String.concat(prefix, relativePath, "?v=", sufix);
}

应用设置：

<add key="CdnUrlBasePath" value="://<yourCDNName>.vo.msecnd.net/" />
<add key="StaticFilesVersion" value="1.01" />

呈现的 HTML：

<img src="://<yourCDNName>.vo.msecnd.net/images/asset1.png?v=1.01">

score 3 · Accepted Answer

如果 CDN 或 Blob 存储不是选项，在 Azure（或标准 IIS）中使文件夹服务文件的一种简单方法是在Web.config文件夹内创建一个文件，如下所示：

<configuration>
    <system.webServer>
        <handlers>
           <clear />
            <add 
                name="StaticFile" 
                path="*" verb="*" 
                modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" 
                resourceType="Either" 
                requireAccess="Read" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
        </staticContent>
    </system.webServer>
</configuration>

image - Azure，存储和部署静态内容（例如图像/css）的最佳方式？

3 回答 3

将静态文件同步到 blob

引用 CDN 资产

Related

Reference