web-dev-qa-db-ja.com

Azure、静的コンテンツ(例:images / css)を保存およびデプロイするための最良の方法?

.NET WebアプリケーションをAzure Webロールにデプロイしようとしています。他の人がどのようにして静的コンテンツ、具体的には画像とCSSをどのように処理したのだろうと思いますか?現在のところ、アプリケーションパッケージは約25MBですが、そのうち18MBは、純粋に画像(ナビゲーションボタン、アイコン、テンプレートコンポーネントなど、めったに更新されないもの)から派生しています。これを展開パッケージから分割してBLOBストレージに移動するのは賢明でしょうか?

私はこのアプローチについていくつか疑問があります...

  1. 当サイトの80%はHTTPS環境で実行されています。 blobストアの画像にアクセスすると、クロススクリプトの問題が発生しますか?

  2. 誰かが悪意を持って私たちの画像を改ざんしようとした場合(ほとんどは20kb未満)、お金の漏洩に対する脆弱性?

  3. ディレクトリ命名規則を使用してファイルをBLOBコンテナー(VS2010 + Azure SDKから)にアップロードする方法がわからないので、数千のパス参照を書き換える必要はありませんか?ディレクトリはblobコンテナーの抽象的な概念ですが、コードでこれを模倣するためにスラッシュでファイルを書くことができます。もちろん、WindowsではVisual Studioにアップロードする前にこれを行うことができません。

どんな考えや代替戦略も歓迎します。目標は、実際に展開パッケージを縮小して、展開時間を短縮することです。また、画像を専用ノードにオフロードして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月

これを最近レビューしたとき、私はマイクロソフトから次のガイドに出くわしました。クエリ文字列を使用してアセットとキャッシュバストのデプロイメントを自動化する方法について詳しく説明します。

WebアプリケーションでAzure CDNからコンテンツを提供する

28
QFDev

いくつかのコメント:

これを展開パッケージから分割してBLOBストレージに移動するのは賢明でしょうか?

もちろんです。これを行うことには多くの利点があります。

  1. あなたが述べたように、これはあなたのパッケージサイズをかなり縮小し、それゆえ展開ははるかに速くなります。
  2. 繰り返しになりますが、Webサーバーの負荷が軽減されるため、サイトの応答性が向上します。
  3. イメージ、js、cssファイルを更新する必要がある場合は、ブロブストレージ内のそれらのファイルを置き換えるだけです。パッケージに残っている場合は、パッケージを再デプロイする必要があります。
  4. また、ブロブストレージで機能するWindows Azure CDNを利用することもできます。

当サイトの80%はHTTPS環境で実行されています。 blobストアの画像にアクセスすると、クロススクリプトの問題が発生しますか?

AJAXを介してコンテンツを読み取っていない限り、クロススクリプトの問題が発生することはないと思います( Azure Webサイトから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から)にアップロードする方法がわからないので、数千のパス参照を書き換える必要はありませんか?ディレクトリはblobコンテナーの抽象的な概念ですが、コードでこれを模倣するためにスラッシュでファイルを書くことができます。もちろん、WindowsではVisual Studioにアップロードする前にこれを行うことができません。

ブロブストレージにアップロードするときにローカルコンピューターのフォルダー構造を維持できるサードパーティ製のツールがいくつかあります。 Windows Azureストレージチームからのこのブログ投稿をご覧ください: http://blogs.msdn.com/b/windowsazurestorage/archive/2010/04/17/windows-Azure-storage-explorers.aspx 。明らかに、私の個人的なお気に入りはCerebrataのCloud Storage Studioです:) [私はその製品の開発者の1人です]

14
Gaurav Mantri

パッケージのサイズが大きくなりすぎる場合は、大きな単一のパッケージファイルではなく、スタンドアロンファイルをデプロイすることでメリットが得られる可能性があります。少なくともVisual Studio 2012では、Publish Wizardに次の展開オプションがあります。

  • Web Deploy(これをお勧めします)
  • Web配置パッケージ
  • FTP
  • ファイルシステム

AFAIK、Web Deployはソースファイルとターゲットファイルを比較し、物理的に異なるファイルのみを転送します(おそらく比較します)ファイルはハッシュされますが、内部についてはわかりません)。

とにかく、私はあなたの質問を解決するためにいくつかのより多くの情報を提供しようとします:

当サイトの80%はHTTPS環境で実行されています。 blobストアの画像にアクセスすると、クロススクリプトの問題が発生しますか?

Gaurav Mantriは既にこれに答えましたが、Azure CDNへのアクセスにHTTPSがサポートされるようになったため、混合コンテンツメッセージを回避できます。 (カスタムドメイン/ SSL証明書のサポートはまだ保留中です(最新情報を含むUserVoiceリクエスト ここ )。

ちなみに、プロトコルなしの規約(://{domain}/{relative path})ブラウザは、ベースドキュメントとまったく同じプロトコルHTTPまたはHTTPSを使用します。

ディレクトリ命名規則を使用してファイルをBLOBコンテナー(VS2010 + Azure SDKから)にアップロードする方法がわからないので、数千のパス参照を書き換える必要はありませんか?ディレクトリはblobコンテナーの抽象的な概念ですが、コードでこれを模倣するためにスラッシュでファイルを書くことができます。もちろん、WindowsではVisual Studioにアップロードする前にこれを行うことができません。

静的ファイルをblobに同期する

静的ファイルを同期するためのスクリプト可能なオプションの1つは AZCopy ツールです。

代替はこれです powershell script (これについての詳細 post )、これを要約すると:

  1. 初期設定を行います:

    $context = New-AzureStorageContext ` 
        -StorageAccountName $StorageAccount ` 
        -StorageAccountKey (Get-AzureStorageKey $StorageAccount).Primary
    
  2. 。\ Contentおよび。\ Scripts上のすべてのローカルファイルを列挙します。

    $files = (ls -Path $ProjectPath\Content -File -Recurse) + (ls -Path $ProjectPath\Scripts -File -Recurse)
    
  3. ...そして各ファイルをループでアップロードします:

    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アセットの参照

解決すべきもう1つの問題は、相対ファイルではなく、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);
}

AppSettings:

<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">
4
Jorge Pestano

CDNまたはBlob Storageがオプションではない場合、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>