정적 콘텐츠를 Blob 저장소를 이용하여 사용하는 방법에 대해서 알아보겠습니다.

URI 를 통해 서비스 되는 방식이므로 ASP.NET, PHP, JSP 언어에 관계 없이

이미지, 스타일시트, 자바스크립트 파일등 웹 사이트를 이루는 여러가지 콘텐트를

BLOB 스토리지를 통해서 이용할 수 있습니다.

 

CDN 만큼은 아니지만 BLOB 를 이용해서 정적 콘텐츠를 웹 사이트에서 동적으로 변경하여

사용할 수 있는 부분을 보여 줍니다.

진행하기 전 우선 Blob 스토리지 서비스에 대한 이해가 필요합니다.

해당 내용은 Blob 관련 내용을 참고하시기 바랍니다.

 

기본적으로 웹 사이트를 호스팅 서버에 퍼블리싱 하는 경우 이미지, 동영상 파일을 로컬 서버에

같이 두는 형식으로 사용 합니다.

ASP.NET MVC 를 사용하여 정적인 콘텐트에 대한 URL Blob URL, CDN URL을 지정해서

웹 사이트에 콘텐트 경로를 동적으로 설정해서 구현할 수 있습니다.

 

[Site.Master]

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

<link href="../../Content/styles/Site.css" rel="stylesheet" type="text/css" />

    <script src="../../Content/scripts/jquery-1.4.1.js" type="text/javascript"></script>

</head>

 

<body>

    <div class="page">

 

        <div id="header">

            <div id="title">

                <h1>Windows Azure CDN</h1>

            </div>

 

            <div id="logindisplay">&nbsp;</div>

 

            <div id="menucontainer">

 

                <ul id="menu">

                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>

                    <li><%: Html.ActionLink("About", "About", "Home")%></li>

                </ul>

 

            </div>

        </div>

 

        <div id="main">

            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

 

            <div id="footer">

            </div>

        </div>

    </div>

</body>

 

</html>

 

 

 

Site.Master 에서 ActionLink Route 처리하여 경로를 지정하고 있습니다.

Route MVC 대한 내용은 ASP.NET MVC 강좌를 참고하시기 바랍니다.

 

 

뷰에 Index.aspx 페이지에서 Url.StaticContent 메서드를 통해서 콘텐츠 경로를 리턴받고 있습니다.

이미지 파일 이외에 Style.css, js 파일도 Blob, CDN 경로를 지정해서 할 수 있지만 이미지에 대해서 예제를

보여주려고 조금 소스 내용을 수정하였습니다.

 

[ Views/Home/Index.aspx ]

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IndexViewModel>" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    Home Page

</asp:Content>

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

 

    <table>

        <tr>

<% Html.RenderPartial("ImageUserControl", Url.StaticContent("Destination.jpg")); %>

        </tr>

    </table>

 

</asp:Content>

 

Url.StaticContent 메서드의 코드 부분입니다.

public static string StaticContent(this UrlHelper helper, string resource)

{

return helper.Content("/CDNSample/Content/" + resource);

}

 

public static string GetSource(this UrlHelper helper, string url)

        {

            Uri uri;

            string source = "Unknown";

            if (Uri.TryCreate(url, UriKind.RelativeOrAbsolute, out uri))

            {

                if (uri.IsAbsoluteUri)

                {

                    string authority = uri.Authority;

                    if (authority.EndsWith("blob.core.windows.net"))

                    {

                        source = "Blob Service";

                    }

                    else if (authority.EndsWith("vo.msecnd.net"))

                    {

                        source = "CDN";

                    }

                }

                else

                {

                    source = "Hosting Server";

                }

            }

 

            return source;

        }

 

StaticContent 메서드에서 로컬에 있는 /Content 폴더에 해당 이미지의 경로를 넘겨주고 있습니다.

GetSource 메서드에서는 URI 를 체크하여 로컬 서버에 호스팅 이미지인지 Blob URL을 사용하고 있는

이미지 인지, CDN 서비스를 사용하고 있는 이미지 인지를 URI를 체크하여 구분해 주고 있습니다.

 

HomeController 에서는 Index, About 페이지에 대한 처리 부분 역활을 단순히 뷰로

넘기고 있습니다.

[HandleError]

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

 

        public ActionResult About()

        {

            return View();

        }

    }

 

컨텐트 경로가 로컬 서버에 게시된 경우에 실행한 해당됩니다.

이미지가 로컬 서버에서 읽어와서 표시한 경우를 보여줍니다.

로컬호스팅이미지.png

 

이제 BLOB 저장소에 이미지를 업로드 한 후 해당 URL로 변경해 보도록 하겠습니다.

가지고 계신 Blob 저장소에 컨테이너를 생성 후 올리신 후 아래 소스 부분만 변경해 주면 됩니다.

[ UrlHelperExtension.cs ]

public static string StaticContent(this UrlHelper helper, string resource)

{

return "http://algorizmstorage.blob.core.windows.net/testcontainer/" + resource;

}

 

Blob 저장소에 있는 URL로 변경된 결과 화면 입니다.

blob로변경.png

 

여기까지 로컬에 있는 이미지나 정적인 컨텐트( 스크립트 파일, CSS 파일등) 에 대해서 Blob 저장소를 이용하여

해당 파일에 대한 트래픽을 분배하는 과정에 대해서 살펴 보았습니다.

Azure CDN 설정 및 사용 부분은 다음에 이어서 하도록 하겠습니다.

 

작업된 샘플을 첨부하였습니다.

https://skydrive.live.com/redir.aspx?cid=2c14480f1ec4b07e&resid=2C14480F1EC4B07E!166

 

해당 내용은 MSDN Windows Azure Training Tool Kit – CDN Sample 을 참고하였습니다. 



Azure - 클라우드 컴퓨팅 - 시리즈 강좌 리스트
[Azure강좌] 1. 클라우드와 원도우 애저 소개
[Azure강좌] 2. SDK 설치와 Azure 무료 신청
[Azure강좌] 3. ASP.NET(Web Role) Hello World
[Azure강좌] 4. 프로젝트 패키지 Azure 배포
[Azure강좌] 5. Windows Azure Storage 서비스와 계정 설정
[Azure강좌] 6. 테이블 서비스와 StorageClient 라이브러리 #1
[Azure강좌] 7. SQL Azure 소개와 서버 구성
[Azure강좌] 8. 데이터베이스 생성과 SSMS 사용
[Azure강좌] 9. SQL Azure 마이그레이션 위자드 사용하기
[Azure강좌] 10. SQL Azure 방화벽 설정
[Azure강좌] 11. SQL Azure Manage 툴 사용해 보기
[Azure강좌] 12. 테이블 서비스와 StorageClient 라이브러리 #2
[Azure강좌] 13. SQL Azure ASP.NET GridView 바인딩
[Azure강좌] 14. Blob 서비스와 Container
[Azure강좌] 15. Blob 리스트 조회, 업로드 다운로드 예제
[Azure강좌] 16. 웹사이트 콘텐트 Blob 스토리지 이용
[Azure강좌] 17. Windows Azure CDN 설정
[Azure강좌] 18. Queue 서비스와 생성, 삭제, 메타데이터 추가
[Azure강좌] 19. Queue 의 메시지 피킹 및 가져오기, 추가, 삭제
[Azure강좌] 20. [Tip] SQL Azure 방화벽 룰 설정 예제 애플리케이션



Azure - 클라우드 컴퓨팅 - 동영상 참고 자료

[Azure 동영상 강좌] 1. 클라우드와 원도우 애저 소개 (애저 포털 둘러보기) 

[Azure 동영상 강좌] 2. SDK 설치와 Azure 무료 신청
[Azure 동영상 강좌] 3. ASP.NET(Web Role) Hello World
[Azure 동영상 강좌] 4. 프로젝트 패키지 Azure 배포
[Azure 동영상 강좌] 5. Windows Azure Storage 서비스와 계정 설정
[Azure 동영상 강좌] 6. 테이블 서비스와 StorageClient 라이브러리 #1
[Azure 동영상 강좌] 7. SQL Azure 소개와 서버 구성
[Azure 동영상 강좌] 8. 데이터베이스 생성과 SSMS 사용
[Azure 동영상 강좌] 9. SQL Azure 마이그레이션 위자드 사용하기
[Azure 동영상 강좌] 10. SQL Azure 방화벽 설정
[Azure 동영상 강좌] 11. SQL Azure Manage 툴 사용해 보기
[Azure 동영상 강좌] 12. 테이블 서비스와 StorageClient 라이브러리 #2
[Azure 동영상 강좌] 13. SQL Azure ASP.NET GridView 바인딩
[Azure 동영상 강좌] 14. Blob 서비스와 Container
[Azure 동영상 강좌] 15. Blob 리스트 조회, 업로드 다운로드 예제
[Azure 동영상 강좌] 16. 웹사이트 콘텐트 Blob 스토리지 이용
[Azure 동영상 강좌] 17. Windows Azure CDN 설정
[Azure 동영상 강좌] 18. Queue 서비스와 생성, 삭제, 메타데이터 추가
[Azure 동영상 강좌] 19. Queue 의 메시지 피킹 및 가져오기, 추가, 삭제
[Azure 동영상 강좌] 20. [Tip] SQL Azure 방화벽 룰 설정 예제 애플리케이션





profile

안녕하세요. 이호엽 입니다!

ASP.NET 프론티어 

블로그: algorizm.tistory.com