정보공간_1

[2기 강북 이도광] Web role의 기초 본문

IT 놀이터/Elite Member Tech & Talk

[2기 강북 이도광] Web role의 기초

알 수 없는 사용자 2012. 9. 25. 13:10

l  Web role의 기초

Ø   클라우드 서비스 프로젝트 템플릿 사용

SDK를 설치하면 비주얼 스튜디오에 클라우드 서비스(Cloud Service)라는 새 프로젝트 템플릿 그룹이 생성됩니다. 이 그룹에는 작업을 시작할 수 있게 하는 몇 가지 템플릿이 포함되어 있습니다. 새 프로젝트를 생성할 때 이러한 템플릿을 사용하여 간편하게 작업을 수행할 수 있습니다.

▶ ASP.NET Web Role : 애저 프로젝트에 맞게 미리 구성된 ASP.NET 프로젝트를 생성합니다.

▶ ASP.NET MVC Web Role : ASP.NET Web Role과 유사하며, MVC2 프레임워크를 지원하도록 구성되어 있습니다.

▶ WCF Service Web Role : 웹 애플리케이션 대신, WCF를 사용하고자 할 때 사용할 수 있습니다. WCF와 유사하게 프로젝트가 생성되며 샘플 파일들이 포함되어 있습니다.

▶ Worker Role :  미리 구성된 클래스 라이브러리 프로젝트를 생성합니다. Background Service 서비스 구축 시 사용합니다.

▶ CGI Web Role : FastCGI 프로젝트를 호스팅 할 시에 사용됩니다.

 

Ø  로컬에서 Azure 프로젝트 실행

Azure SDK는 클라우드 웹 사이트와 서비스를 로컬에서 개발 및 테스트 할 수 있도록 지원합니다.

“Dev Fablic Service”, “Dev Stroage Service” 두 가지를 통해서 지원되며 Azure 프로젝트를 실행하면 Visual Studio에 의해 위 두 가지 서비스가 자동으로 시작됩니다.


Ø  “Hello World” 개발

1.     새 프로젝트 개발

처음으로 할 작업은 새 프로젝트를 생성하는 것입니다. 파일->새로 만들기->프로젝트를 순서대로 선택합니다. 그리고 아래와 같은 순서로 프로젝트를 생성하도록 합니다.

(프로젝트 이름은 “AzureTest”로 하였습니다.)



위 그림과 같이 프로젝트가 생성됩니다.

위 프로젝트에는 웹 사이트를 실행하기 위해 필요한 모델과 설정 정보를 포함하는데 애저 애플리케이션에 대한 메타 데이터쯤으로 생각하시면 되겠습니다.

그러면 Visual Studio의 좌측에 있는 솔루션 탐색기를 보시도록 하겠습니다.



솔루션 탐색기에 표현된 빨간박스에서 “AzureTest”가 애저 프로젝트 입니다. 이곳에 애플리케이션의 클라우드 설정 정보가 포함됩니다. 두 번째 빨간박스에 있는 “WebRole1”은 애저 프로젝트에 링크된 웹 애플리케이션입니다.


애저는 프로젝트를 생성시에 애저와 관련있는 어셈블리 참조 세 개를 생성합니다.

Microsoft.WindowsAzure 네임스페이스에 속해 있는 것입니다.

▶ Diagnostics : 로깅 요구를 다룹니다.

▶ ServiceRuntime : 애저 패브릭과의 상호 작용 방법을 제공합니다.

▶ StorageClient는 애저 스토리지 서비스와 쉽게 연동 할 수 있도록 하는 역할을 합니다.


“F5” 를 눌러서 프로젝트를 컴파일하고 애저 프로젝트를 실행하도록 합니다.

Visual Studio는 Dev Fablic과 Dev Storage 서비스를 실행시킨 후 애플리케이션을 패키징 한 후 배포합니다.


위 그림과 같이 프로젝트 실행하면 자동으로 에뮬레이터가 작동됩니다.

에뮬레이터가 실행된 후에 브라우저가 하나 팝업 되지만, 애저 프로젝트에 어떠한 코딩도 하지 않았기 때문에 빈 브라우저만 보일 것입니다.


Ø  XHTML과 CSS로 마크업 작성

이제, 애저 프로젝트에 간단한 코딩을 하여 웹 페이지에 조금 변화를 주고자 합니다.

이 페이지는 회사의 으름을 간단하게 공지하고 판매 중인 셔츠들의 목록을 보여주는 기능을 합니다. 먼저 default.aspx 파일을 열어서 아래와 같이 마크업을 삽입합니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebRol1._Default" %>

 

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

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

<head id="Head1" runat="server">

    <title>Chris's Hawaiian Shirt Shop</title>

    <link rel="stylesheet" href="Main.css" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="header">

        <h1>

            Chris's Hawaiian Shirt Shop</h1>

    </div>

    <div id="mainContent">

        <h3>

            Many Styles Available!</h3>

        <p>

            We have many styles available, to suit any special need or occasion. Please check out our amazing classic 50's styles. Call now to place your order or to check on what we have in stock.</p>

        <asp:Repeater ID="rptProductList" runat="server">

            <ItemTemplate>

                <div class="item">

                    <h3>

                        <%# Eval("productName") %>

                    </h3>

                    <div>

                        <b>

                            $<%# Eval("unitPrice")%>

                            each.</b>

                        <p><%# Eval("description") %></p></div>

                </div>

            </ItemTemplate>

        </asp:Repeater>

    </div>

    </form>

</body>

</html>

위 코드에서 주목해야 하는 점은 asp:repeater 컨트롤을 사용하는데, 셔츠 데이터 컬렉션에 바인드 되어서 판매되는 상품 리스트를 가공하여 보여줍니다.

 

다음으로 스텁으로부터 샘플 데이터를 받아와서 마크업의 리피터 컨트롤에 바인드 하는 일을 수행하도록 합니다.

스텁의 이름은 “ProductInfo”로 사용하도록 하겠습니다.  제너릭 리스트 컬렉션을 사용하여 다수의 제품 클래스들을 보관하고 리피터 컨트롤에 바인드 할 수 있도록 합니다.

 

프로젝트에 새로운 C# 클래스 파일을 추가하여 아래와 같이 제품 클래스를 작성합니다.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace WebRole1

{

    // 제품 프로퍼티 접근자

    public class Product

    {

        public int sku { get; set; }

        public string productName { get; set; }

        public decimal unitPrice { get; set; }

        public string description { get; set; }

    }

 

    public class ProductInfo

    {

        public IList<Product> GetAllProducts()

        {

            IList<Product> allProducts = new List<Product>();

 

            allProducts.Add(new Product() { sku = 1, productName = "Blue Water", unitPrice = 19.99M, description = "A classic 50's scenic shirt with palm trees, waves, and surfers. Sure to bring back those old memories. Available in tan and pink." });

 

            allProducts.Add(new Product() { sku = 2, productName = "Color Prints", unitPrice = 15.99M, description = "Heavy fabric, and bold colors. These shirts feature a solid color with a repeated pattern of either palm trees or hibiscus flowers. Great for father and son. Available in red or blue." });

 

            allProducts.Add(new Product() { sku = 3, productName = "Action Prints", unitPrice = 17.99M, description = "These shirts are a gauzy, light weight fabric, making them a great choice for being out in the sun. They feature action scenes, in a wide cut. Available with bikers, surfers, or hackers." });

 

            return allProducts;

        }

    }

}

 

다음으로 Page_load 코드를 추가해서 제품 데이터를 가져와 폼의 필드에 바인딩 합니다.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace WebRole1

{

    public partial class _Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            ProductInfo pi = new ProductInfo();

            IList<Product> allProducts = pi.GetAllProducts();

 

            // 데이터 소스에 연결한 후 DataBind() 메서드를 호출해서 바인딩!

            rptProductList.DataSource = allProducts;

            rptProductList.DataBind();

 

        }

    }

}

페이지가 로드되면 ProductInfo 객체가 생성되어 Product 객체 컬렌션 객체를 읽어들이게 되며 ProductInfo 객체가 웹폼의 ProductList 리피터에 바인딩 됩니다.

 

혹시나 이글을 보시는 분들 중에서  클래스 생성 및 참조 추가 등으로 문제가 생길 여지가 있어 현재의 솔루션 탐색기 상황을 캡처하였습니다.



이제 코딩이 잘 되었는지 빌드하여 실행해보도록 합니다.



Ø  애저 서비스 모델

애저 프로젝트에서 해당 솔루션의 어느 프로젝트가 애플리케이션의 부분이며 어떠한 Role을 수행하는지 인식시키는 역할을 링크를 통해 수행합니다. 솔루션 내의 클래스 라이브러리는 프로젝트 어셈블리 참조에서 참조되어야 하며 애저 프로젝트 파일에 의해 연결되지 않습니다.

링크 외에 애저 프로젝트는 추가로 두 개의 설정 파일이 포함되어 있습니다.

▶ servicedefinition.csdef : 서비스가 애플리케이션의 일부인지의 여부와 서비스에 제공되야할 Endpoint, Connection들의 존재를 확인합니다.

▶ ServiceConfiguration.cscfg : 서비스의 설정과 애저를 통해 제공될 방식을 결정합니다.





'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[2기 전주 박준형] OpenMP 프로그래밍 개요  (0) 2012.09.26
[2기 수원 이상웅] 리눅스 시스템 정보 알기 1 (/proc)  (0) 2012.09.25
[2기 수원 곽지혜] Data Visualization  (1) 2012.09.25
[2기 강북 강정인] 안드로이드 악성코드 현황  (0) 2012.09.24
[2기 강남 안병현] GoF 디자인패턴 - Mediator 패턴  (0) 2012.09.24
'IT 놀이터/Elite Member Tech & Talk' Related Articles more