programing

Azure, 정적 콘텐츠(이미지/CSS 등)를 저장 및 전개하는 최선의 방법

starjava 2023. 4. 22. 08:22
반응형

Azure, 정적 콘텐츠(이미지/CSS 등)를 저장 및 전개하는 최선의 방법

를 도입하려고 합니다.NET 웹 어플리케이션을 Azure Web 역할로 변환합니다.다른 사람들은 정적 콘텐츠, 특히 이미지와 css를 어떻게 처리했는지 궁금할 뿐입니다.현재 당사의 애플리케이션 패키지는 약 25MB이지만, 그 중 18MB는 네비게이션 버튼, 아이콘, 템플릿 컴포넌트 등 거의 업데이트되지 않는 이미지만을 기반으로 하고 있습니다.배포 패키지에서 파티션 분할하여 BLOB 스토리지로 이동하는 것이 현명할까요?

이 접근방식이 유효한지 의문입니다.

  1. 사이트의 80%는 HTTPS 환경에서 실행됩니다.BLOB 스토어에서 이미지에 액세스하면 크로스 스크립팅 문제가 발생합니까?

  2. 누군가가 악의적으로 우리의 이미지를 공격하려고 할 경우, 자금 유출에 대한 취약성(대부분이 20kb 미만)?

  3. 디렉토리 이름 지정 규칙을 사용하여 파일을 (VS2010 + Azure SDK에서) BLOB 컨테이너에 업로드하는 것이 어떻게 가능한지 알아보는데 어려움을 겪고 있습니다. 따라서 1000개의 경로 참조를 다시 쓸 필요가 없습니다.디렉토리는 blob 컨테이너의 추상적인 개념이지만, 이것을 코드로 모방하기 위해서 슬래시를 붙여 파일을 쓸 수 있습니다.Windows에서는 Visual Studio에 업로드하기 전에 이 작업을 수행할 수 없습니다.

어떤 생각이나 다른 전략이라도 환영합니다.목표는 도입 패키지를 축소하여 도입 시간을 단축하는 것입니다.또, Web 서버의 퍼포먼스를 향상시키기 위해서 전용 노드에 이미지를 오프로드 하는 것도 마음에 듭니다.아마 이미지 컬렉션이 너무 작아서 신경 쓸 필요가 없을 것 같습니다.

갱신: 5월 16일 --------------------------------------------------------------------------------------------------------------------------------------------------

마지막으로 제가 한 일은 다음과 같습니다.

1. 모든 이미지 + css를 BLOB 스토리지 컨테이너로 전송.이미지와 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에서 이미지가 실행되고 대역폭이 해방되어 다운로드 속도가 향상되고 웹 서버에서 부하가 다소 해방됩니다.

갱신일 : 2015년 9월

최근 이 내용을 검토하면서 마이크로소프트에서 다음 가이드를 발견했습니다.쿼리 스트링을 사용하여 자산 배포 및 캐시 버스트를 자동화하는 방법에 대해 자세히 설명합니다.

웹 어플리케이션에서 Azure CDN 콘텐츠 서비스

코멘트:

배포 패키지에서 파티션 분할하여 BLOB 스토리지로 이동하는 것이 현명할까요?

그렇고 말고요.이를 통해 얻을 수 있는 이점은 많습니다.

  1. 말씀하신 대로 패키지 사이즈가 대폭 줄어들기 때문에 도입이 훨씬 빨라집니다.
  2. 말씀하신 대로 웹 서버의 부하를 덜어주므로 사이트 응답성이 향상됩니다.
  3. 이미지, js, css 파일을 업데이트해야 할 경우 BLOB 스토리지에서 해당 파일을 교체할 수 있습니다.패키지에 남아 있는 경우 패키지를 다시 전개해야 합니다.
  4. 또한 BLOB 스토리지에서 작동하는 Windows Azure CDN을 활용할 수도 있습니다.

사이트의 80%는 HTTPS 환경에서 실행됩니다.BLOB 스토어에서 이미지에 액세스하면 크로스 스크립팅 문제가 발생합니까?

AJAX를 통해 내용을 읽지 않는 한 크로스 스크립팅 문제(Azure 웹사이트에서 azure blob으로 호스팅된 XML에 액세스하는 방법)는 발생하지 않을 것입니다.그러나 페이지가 https를 통해 처리되고 http를 통해 정적 리소스를 참조할 경우 사용자에게 혼합 콘텐츠(보안됨과 보안되지 않음) 메시지가 표시될 수 있습니다.

누군가가 악의적으로 우리의 이미지를 공격하려고 할 경우, 자금 유출에 대한 취약성(대부분이 20kb 미만)?

발신 대역폭의 가격은, http://www.windowsazure.com/en-us/pricing/details/#bandwidth-11 를 참조해 주세요.현재 Windows Azure에서는 최대 5GB의 데이터 전송이 무료이며 GB당 0.12달러로 상당히 저렴한 프로모션을 진행하고 있습니다.또한 매우 저렴한 스토리지 트랜잭션도 고려해야 합니다.나는 그것에 대해 크게 걱정하지 않을 것이다.최악의 경우 언제든지 공유 액세스시그니처로 돌아가 자원을 보호할 수 있습니다.

디렉토리 이름 지정 규칙을 사용하여 파일을 (VS2010 + Azure SDK에서) BLOB 컨테이너에 업로드하는 것이 어떻게 가능한지 알아보는데 어려움을 겪고 있습니다. 따라서 1000개의 경로 참조를 다시 쓸 필요가 없습니다.디렉토리는 blob 컨테이너의 추상적인 개념이지만, 이것을 코드로 모방하기 위해서 슬래시를 붙여 파일을 쓸 수 있습니다.Windows에서는 Visual Studio에 업로드하기 전에 이 작업을 수행할 수 없습니다.

BLOB 스토리지에 업로드 할 때 로컬 컴퓨터의 폴더 구조를 유지하는 많은 서드파티 도구를 사용할 수 있습니다.Windows Azure Storage 팀의 블로그 투고를 봐 주세요.http://blogs.msdn.com/b/windowsazurestorage/archive/2010/04/17/windows-azure-storage-explorers.aspx개인적으로 좋아하는 것은 Cerebrata의 Cloud Storage Studio입니다. :) [저는 그 제품의 개발사 중 한 명입니다.

패키지의 사이즈가 너무 커지는 경우는, 큰 단일 패키지 파일 대신에 스탠드 얼론 파일을 전개하는 것으로 메리트를 얻을 수 있습니다.적어도 Visual Studio 2012에서는 게시 마법사에 다음과 같은 배포 옵션이 있습니다.

  • Web Deploy (이것을 추천합니다)
  • Web Deploy 패키지
  • FTP
  • 파일 시스템

AFAIK, Web Deploy는 소스 파일과 타깃 파일을 비교하여 다른 파일만 물리적으로 전송합니다(파일 해시를 비교하지만 내부 파일은 모릅니다).

어쨌든, 저는 당신의 궁금증을 해결하기 위해 몇 가지 정보를 더 제공할 것입니다.

사이트의 80%는 HTTPS 환경에서 실행됩니다.BLOB 스토어에서 이미지에 액세스하면 크로스 스크립팅 문제가 발생합니까?

Gaurav Mantri는 이미 이 질문에 답했습니다만, 조금 더 최신 정보를 제공하기 위해서, Azure CDN 에의 액세스에 HTTPS 가 서포트되고 있기 때문에, Mixed Content 메시지를 회피할 수 있습니다.(커스텀 도메인/SSL 증명서(UserVoice 요구와 최신 정보가 여기에 있음)에 대한 지원은 아직 보류 중입니다).

표기법( 「 」 「 」 「 」 「 」 )을하고 있습니다.://{domain}/{relative path}브라우저는 기본 문서와 정확히 동일한 프로토콜 HTTP 또는 HTTPS를 사용합니다.

디렉토리 이름 지정 규칙을 사용하여 파일을 (VS2010 + Azure SDK에서) BLOB 컨테이너에 업로드하는 것이 어떻게 가능한지 알아보는데 어려움을 겪고 있습니다. 따라서 1000개의 경로 참조를 다시 쓸 필요가 없습니다.디렉토리는 blob 컨테이너의 추상적인 개념이지만, 이것을 코드로 모방하기 위해서 슬래시를 붙여 파일을 쓸 수 있습니다.Windows에서는 Visual Studio에 업로드하기 전에 이 작업을 수행할 수 없습니다.

정적 파일을 BLOB로 동기화하는 중

정적 파일을 동기화하기 위한 스크립트 가능한 옵션 중 하나는 AZCopy 도구입니다.

다른 방법으로는 이 powershell 스크립트( 게시물에 대한 자세한 정보)가 있습니다.이 스크립트는 다음과 같이 요약되어 있습니다.

  1. 초기 셋업은 다음 작업을 수행합니다.

    $context = New-AzureStorageContext ` 
        -StorageAccountName $StorageAccount ` 
        -StorageAccountKey (Get-AzureStorageKey $StorageAccount).Primary
    
  2. 의 모든 로컬파일을 열거합니다.\내용 및.\스크립트:

    $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 자산 참조

해결해야 할 또 다른 문제는 상대 파일이 아닌 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">

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> 

언급URL : https://stackoverflow.com/questions/15223167/azure-best-way-to-store-and-deploy-static-content-e-g-images-css

반응형