블로그 이미지
재재 

카테고리

분류 전체보기 (11)
MSP (1)
Diary (0)
Cloud (10)

지금까지 AzurePicture 클라우드 웹 어플리케이션을 소개해드렸습니다. azure와 facebook 모두 웹에서 이루어지는 것이다 보니 디버깅이 어려운 점도 있다고 할 수 있습니다. 그래서 어플리케이션을 만들면서 겪었던 오류와 관련해 포스팅하고자 합니다.

먼저 facebook 관련해서 겪었던 오류를 말씀드리도록 하겠습니다. facebook api를 사용하면서 가장 많이 마주쳤던 에러는 바로 400번, 403번 에러와 쿠키 문제였습니다.

400번 에러의 경우 아래와 같은 화면이 뜨게 되었습니다.


이 페이지는 주로 프로그램에서 적은 redirect url과 facebook 어플리케이션에 설정에서 등록한 redirect url이 일치하지 않을 때 발생했습니다. facebook의 redirect url의 하위 페이지기만 하면 인식이 가능하므로 이것이 일치하는지 먼저 확인하시기 바랍니다. 또한 이전 포스팅에서 올린 코드로 localhost에서 테스트를 할 때는 당연히 azurepicture.cloudapp.net 사이트가 존재하지 않기 때문에 실행되지 않게 됩니다. 따라서 local에서 테스트를 할 때는 http://localhost:81/페이지이름.aspx 와 같은 형식으로 적어 테스트하시기 바랍니다. 여기서 81은 포트번호를 뜻합니다.


두번째로 말씀드릴 것은 403 에러입니다.

The remote server returned an error: (403) Forbidden

와 같은 문장이 뜨게 되는데요. 이것은 주로 permission의 문제에서 일어났습니다. 허락을 구한 permission 이상의 것을 시도하려고 할 때 이런 에러가 발생하게 됩니다. 처음 어플리케이션을 실행하고 페이스북 아이디와 비밀번호로 로그인을 할 때 아래와 같이 permission 창이 뜨게 됩니다.


만약 이 permission 창에서 자신이 필요로 하는 허가 요청이 뜨지 않는다면 프로그램 코드에서 permission 요청하는 곳에 문제가 있을 가능성이 큽니다. 따라서 다시 한번 프로그램의 scope 부분을 확인하는 것이 좋습니다. 특히 글을 쓰는 경우 scope에서 publish_stream을 요청하지 않는다면 접근이 불가능하기 때문에 꼭 추가하시기 바랍니다. 추가적인 facebook의 permission 관련해서는 아래의 링크에서 확인하실 수 있습니다.

http://developers.facebook.com/docs/authentication/permissions/

세번째 문제는 쿠키 문제입니다. facebook api에서는 로그인 했던 사람의 정보를 쿠키로 저장하고 있어 로그아웃 하지 않으면 계속 로그인 상태를 유지할 수 있습니다. 그런데 이것이 잘못되어 로그인이 되어있지 않음에도 불구하고 쿠키의 문제로 로그인되어있다고 인식하는 경우가 있었습니다. 따라서 facebook에서 로그아웃 한 뒤 어플리케이션을 실행해도 로그인 상태로 인식되어 로그인 창 자체가 뜨지 않는 문제가 발생했습니다. 이를 해결하기 위해서는 브라우저에서 쿠키를 삭제하시면 됩니다. 도구-인터넷옵션으로 들어간 뒤 검색기록에서 쿠키를 삭제하면 문제가 해결되니 이와 같은 문제가 생기면 쿠키 문제를 의심하시길 바랍니다.


Azure에서는 딱히 큰 문제가 없었으나 swap VIP에서 문제가 생기는 경우가 있었습니다. 이전에 말씀드렸다시피 swap VIP는 임시 도메인에서 설정했던 도메인 주소로 바꾸는 것을 수행하게 됩니다. 여기서 문제가 생기는 것은 이미 기존에 사용했던 도메인을 그대로 사용하려고 했을 때 입니다. 저같은 경우 같은 url로 테스트하기 위해 azure에 올렸다가 지웠다 다시 올리는 것을 반복했었는데 이렇게 이전에 사용했던 도메인 주소를 사용하려고 하니 임시 주소에서는 잘 수행되지만 swap VIP를 하면 웹페이지가 뜨지 않는 현상이 발생했었습니다. 이 경우 해결책은 매우 간단합니다. 시간을 들여 기다리기만 하시면 됩니다. 도메인이 다시 적용되는데 시간이 좀 걸려서 발생하는 현상인 듯 하니 10분 이상 기다리시면 웹페이지가 다시 정상적으로 뜨는 것을 확인하실 수 있습니다.

azure에 어플리케이션을 올릴 때 warning이 발생하는 경우도 있으실 것입니다. 이것은 한 role의 instance의 수가 1개일 때 발생하는 것으로 instance의 수를 configuration file에서 수정해주시면 발생하지 않을 뿐만 아니라 99% 이상의 안정성을 얻을 수 있으므로 바꾸는 것을 추천해드립니다. 굳이 바꾸시지 않더라도 실행에 있어 문제가 생기지는 않습니다.



웹 프로그래밍을 할 때 정확히 어느 부분에서 문제가 생기는 지 알기 어려워 디버깅하기가 수월하지 않은 경우가 많습니다. 이 외에도 문제가 발생한다면 azure와 facebook에서 각자 제공하고 있는 forum에서 정보를 찾아본다면 같은 문제를 겪고있는 혹은 이미 겪은 개발자가 분명 존재하기 때문에 이들의 글과 답변을 참고하시면 좀 더 수월하게 해결하실 수 있을 것입니다.

Posted by 재재 


azure 서비스에 facebook api를 결합한 azurepicture 프로그램의 소스코드를 첨부합니다. Azure 계정이 없으신 분은 이를 올려서 실제로 해보기는 어려우실 테지만 코드를 보고 azure에 대한 이해도를 높이실 수 있을 것이라 생각합니다. azure 부분에 대한 설명은 이전 포스팅들에서 했으니 이제 facebook api 부분을 설명하도록 하겠습니다.

설명에 들어가기 앞서 이전 포스팅에서 facebook api에 대한 부분을 보지 않으신 분은 앞에서 다시 보고 오시길 바랍니다. facebook application을 등록하고 시작하는 과정과 어떻게 authorization을 받는지에 대한 부분도 설명되어 있으니 참고하세요.

namespace GuestBook_WebRole
{
    public partial class Main : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            string clientId = "201802756503714";
            string redirectUrl = "http://azurepicture.cloudapp.net/picturebook.aspx";
            string scope = "publish_stream,read_friendlists,user_status";

            Response.Redirect(string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope={2}", clientId, redirectUrl, scope));
        }
    }
}

이전 facebook 예제에서는 페이지가 로드되면 바로 로그인 창으로 넘어갔던 것과 달리 이번에는 로그인 버튼을 눌러야 로그인되도록 했습니다. 일전에 말한 것 처럼 clientID는 facebook application id, redirect url은 facebook application 설정에 등록해놓은 url의 하위페이지로 설정합니다. AzurePicture에서는 이전과 달리 뉴스피드의 글을 받아오는 것이 아닌 포스팅을 할 것이기 때문에 위와 같이 publish_stream이라는 권한이 필요합니다. 나머지 scope는 그냥 추가한 것이라 무시하셔도 무방합니다.

모든 변수의 세팅이 끝나면 authorize 페이지로 넘어가 사용자가 자신의 아이디와 비밀번호를 통해 로그인하도록 합니다. 사용자가 로그인을 마치면 scope에서 설정한 권한에 대한 허락 페이지가 뜨게 되고 여기서 수락 버튼을 누르면 위에서 설정한 redirect url인 picturebook.aspx로 넘어가게 됩니다. guestbook 예제에서 수정해 이번에는 facebook에서의 프로필 사진과 이름이 자동으로 출력되도록 바꾸어보았습니다.


지난 포스팅에서 share 버튼을 누르면 스토리지가 initialize되면서 이미지가 blob storage에 업로드되고, 이 entry가 table storage에 저장되며, 이미지를 처리하라는 message가 queue에 저장되는 작업이 수행되는 것을 알려드렸는데 이 뒷부분에서부터 facebook에 포스팅하는 부분이 시작됩니다. 

facebook api를 사용해 얻어오는 객체는 JSONObject의 형태를 가지고 있고 이는 dictionary의 형태이기도 합니다. facebook에 포스팅을 하기 위해서는 이렇게 dictionary 형태의 object를 만들고 이를 api.Post 함수를 통해서 포스팅을 할 수 있습니다. 우리가 원하는 object는 post의 형태인데 facebook developer 페이지에 가면 아래와 같은 아이템을 가진 것을 확인할 수 있습니다.



위와 같이 자신이 원하는 object의 형태를 facebook에서 확인할 수 있습니다. 각 속성에 대한 설명도 같이 나와 있기 때문에 쉽게 알아볼 수 있습니다. 따라서 포스팅을 하기 위해 POST라는 이름의 dictionary를 만들고 이것을 포스팅해줍니다.

                    Dictionary<string, string> POST = new Dictionary<string, string>();
                    string text = entry.Message;
                    string picture = entry.PhotoUrl;
                    string link = "http://azurepicture.cloudapp.net/";
                    string name = "AzurePicture";
                    string caption = "Cloud Web Application";
                    //string description = "";
                    //string source = "";

                    POST.Add("message", text);
                    POST.Add("picture", picture);
                    POST.Add("link", link);
                    POST.Add("name", name);
                    POST.Add("caption", caption);
                    //POST.Add("description", description);
                    //POST.Add("source", source);

                    api.Post("me/feed", POST);

text는 사용자가 입력한 글이고 picture는 우리가 blob storage에 이미지를 저장하고 얻은 url이 들어가게 됩니다. azurepicture에서부터 사진이 온 것이므로 link를 azurepicture의 주소로 해놓았습니다. 따라서 facebook에 포스팅된 사진을 클릭하면 azurepicture 사이트로 바로 넘어가게 됩니다. 사진을 클릭했을 때 원본 사진이 나오기를 원한다면 link를 공백으로 비워놓으시면 사진의 blob storage 주소가 들어가게 됩니다. name에는 azurepicture, caption에는 cloud web application이라고 써서 이 서비스에 대한 설명을 해놓았습니다. description과 source는 사용하지 않았지만 개발자의 취향에 따라 다른 값을 넣으시면 되겠습니다. 이렇게 만든 설정들을 POST에 Add한 뒤 api.Post 함수를 이용해 포스팅을 하면 facebook에 azurepicture 사이트에 게시된 글과 똑같은 내용이 아래와 같이 올라가게 됩니다.



지금까지 코드에 대한 설명을 해드렸는데요. 이제부터는 실제로 이를 어떻게 azure 서비스에 올리는지에 대해 설명해드리도록 하겠습니다. 기본적인 것은 지난번과 동일하지만 이번에는 storage service가 추가되기 때문에 몇가지 과정이 더 추가되게 됩니다. 먼저 http://windows.azure.com 에 접속해 new storage account를 만들어줍니다. storage를 만들면 오른쪽 화면에 Primary key가 있는 것을 확인할 수 있습니다. 이 버튼을 클릭해 클립보드에 key를 복사해놓습니다.



이제 Visual Studio에서 게시를 통해 서비스 패키지를 만듭니다.



게시를 하면 Publish라는 폴더창이 뜨게 됩니다. 여기서 ServiceConfiguration이라는 이름을 가진 파일의 내용을 수정해서 storage account와 연동이 되도록 합니다. 메모장을 통해 파일을 열면 아래와 같은 것을 확인할 수 있습니다.


<ServiceConfiguration serviceName="GuestBook" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration">
  <Role name="GuestBook_WebRole">
    <Instances count="1" />
    <ConfigurationSettings>
      <Setting name="DataConnectionString" value="UseDevelopmentStorage=true" />
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="UseDevelopmentStorage=true" />
      <!--
<Setting name="DataConnectionString" value="DefaultEndpointsProtocol=https;AccountName=[YOUR_ACCOUNT_NAME];AccountKey=[YOUR_ACCOUNT_KEY]" />
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="DefaultEndpointsProtocol=https;AccountName=[YOUR_ACCOUNT_NAME];AccountKey=[YOUR_ACCOUNT_KEY]" />-->
    </ConfigurationSettings>
  </Role>
  <Role name="GuestBook_WorkerRole">
    <Instances count="1" />
    <ConfigurationSettings>
      <Setting name="DataConnectionString" value="UseDevelopmentStorage=true" />
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="UseDevelopmentStorage=true" />
      <!--
<Setting name="DataConnectionString" value="DefaultEndpointsProtocol=https;AccountName=[YOUR_ACCOUNT_NAME];AccountKey=[YOUR_ACCOUNT_KEY]" />
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="DefaultEndpointsProtocol=https;AccountName=[YOUR_ACCOUNT_NAME];AccountKey=[YOUR_ACCOUNT_KEY]" />-->
    </ConfigurationSettings>
  </Role>
</ServiceConfiguration>

보시다시피 파란색으로 진하게 표시한 부분에 account name과 account key를 넣어줘야 하는 것을 알 수 있습니다. 이곳에 storage account 이름을 넣고, 아까 클립보드로 복사한 account key를 넣어줍니다. 값을 넣은 뒤 빨간색으로 표시된 부분은 파일에서 없애버리면 configuration 파일 수정이 끝나게 됩니다. 주석처리 부분도 확실하게 지웠는지 확인해줍니다.

이제 azure에 올리는 일만 남았습니다. 다시 Azure Management Portal로 돌아갑니다. 이전과 똑같이 new hosted service 버튼을 클릭한 뒤 아래와 같이 세팅해줍니다. Package location과 Configuration file의 위치는 Publish 폴더의 경로를 넣어주시면 됩니다.


자 이제 Azure에 AzurePicture 서비스가 무사히 올라가게 되었습니다! Swap VIP 버튼을 눌러 아까 설정해준 url을 주소로 갖도록 꼭 설정해주세요. 주소를 치면 아래와 같이 AzurePicture 사이트가 뜨는 것을 보실 수 있습니다.

Posted by 재재 


이전 포스팅에 이어서 이번에는 worker role에서 수행하는 작업에 대해 알아보도록 하겠습니다.



    Public Overrides Sub Run()
        Trace.TraceInformation("Listening for queue messages...")

        Do
            Try
                ' retrieve a new message from the queue
                Dim msg As CloudQueueMessage = queue.GetMessage()
                If msg IsNot Nothing Then
                    ' parse message retrieved from queue
                    Dim messageParts = msg.AsString.Split(New Char() {","c})
                    Dim uri = messageParts(0)
                    Dim partitionKey = messageParts(1)
                    Dim rowkey = messageParts(2)
                    Trace.TraceInformation("Processing image in blob '{0}'.", uri)

queue storage로부터 메시지를 거낸 뒤 이를 parsing 함으로써 어떤 작업을 수행해야 하는지 확인합니다. uri, partitionkey, rowkey에 대한 정보를 얻을 수 있기 때문에 어떤 이미지를 처리해야하는지 알 수 있습니다.

                    ' download original image from blob storage
                    Dim imageBlob As CloudBlockBlob = container.GetBlockBlobReference(uri)
                    Dim image As New MemoryStream()
                    imageBlob.DownloadToStream(image)
                    image.Seek(0, SeekOrigin.Begin)

어떤 이미지를 처리해야하는지 알았으므로 먼저 blob storage로부터 uri를 이용해 이미지를 받아옵니다.

     
                    ' create a thumbnail image and upload into a blob
                    Dim thumbnailUri As String = String.Concat(Path.GetFileNameWithoutExtension(uri), "_thumb.jpg")
                    Dim thumbnailBlob As CloudBlockBlob = container.GetBlockBlobReference(thumbnailUri)
                    thumbnailBlob.UploadFromStream(CreateThumbnail(image))

uri의 이름에 _thumb.jpg를 덧붙여 thumbnail image url을 정하고 이 이름으로 생성된 thumbnail 이미지를 blob storage에 저장합니다.


                    ' update the entry in table storage to point to the thumbnail
                    Dim ds = New GuestBookEntryDataSource()
                    ds.UpdateImageThumbnail(partitionKey, rowkey, thumbnailBlob.Uri.AbsoluteUri)

현재 entry의 thumbnail url이 원 이미지의 주소로 저장되어 있으므로 이를 새로 만들어진 thumbnail url로 변경해 저장합니다.


                    ' remove message from queue
                    queue.DeleteMessage(msg)

                    Trace.TraceInformation("Generated thumbnail in blob '{0}'.", thumbnailBlob.Uri)
                Else
                    System.Threading.Thread.Sleep(1000)
                End If
            Catch e As StorageClientException
                Trace.TraceError("Exception when processing queue item. Message: '{0}'", e.Message)
                System.Threading.Thread.Sleep(5000)
            End Try
        Loop
    End Sub

모든 작업이 끝났으므로 queue에서 message를 제거하고 이를 trace에 기록합니다.

    Public Overrides Function OnStart() As Boolean

        '   Restart the role upon all configuration changes
        AddHandler RoleEnvironment.Changing, AddressOf RoleEnvironmentChanging

        ' read storage account configuration settings
        CloudStorageAccount.SetConfigurationSettingPublisher(Function(configName, configSetter) configSetter(RoleEnvironment.GetConfigurationSettingValue(configName)))
        Dim storageAccount = CloudStorageAccount.FromConfigurationSetting("DataConnectionString")

configuration setting을 통해 storage account information을 가져와 연동합니다.


        ' initialize blob storage
        Dim blobStorage = storageAccount.CreateCloudBlobClient()
        container = blobStorage.GetContainerReference("guestbookpics")

        ' initialize queue storage
        Dim queueStorage = storageAccount.CreateCloudQueueClient()
        queue = queueStorage.GetQueueReference("guestthumbs")

        Trace.TraceInformation("Creating container and queue...")

blob storage와 queue storage를 생성합니다.


        Dim storageInitialized = False
        Do While (Not storageInitialized)
            Try
                ' create the blob container and allow public access
                container.CreateIfNotExist()
                Dim permissions = container.GetPermissions()
                permissions.PublicAccess = BlobContainerPublicAccessType.Container
                container.SetPermissions(permissions)

blob storage에 누구든지 접근해 이미지를 사용할 수 있도록 권한을 설정합니다.


                ' create the message queue
                queue.CreateIfNotExist()
                storageInitialized = True
            Catch e As StorageClientException
                If (e.ErrorCode = StorageErrorCode.TransportError) Then

                    Trace.TraceError("Storage services initialization failure. " _
                      & "Check your storage account configuration settings. If running locally, " _
                      & "ensure that the Development Storage service is running. Message: '{0}'", e.Message)
                    System.Threading.Thread.Sleep(5000)
                Else
                    Throw
                End If
            End Try
        Loop
        Return MyBase.OnStart()

    End Function

    Private Sub RoleEnvironmentChanging(ByVal sender As Object, ByVal e As RoleEnvironmentChangingEventArgs)
        If (e.Changes.Any(Function(change) TypeOf change Is RoleEnvironmentConfigurationSettingChange)) Then
            e.Cancel = True
        End If
    End Sub

    Private Function CreateThumbnail(ByVal input As Stream) As Stream
        Dim orig As New Bitmap(input)
        Dim width As Integer
        Dim height As Integer

        If orig.Width > orig.Height Then
            width = 128
            height = 128 * orig.Height / orig.Width
        Else
            height = 128
            width = 128 * orig.Width / orig.Height
        End If
        Dim thumb As New Bitmap(width, height)

        Using graphic = Graphics.FromImage(thumb)
            graphic.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
            graphic.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
            graphic.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighQuality
            graphic.DrawImage(orig, 0, 0, width, height)
            Dim ms As New MemoryStream()
            thumb.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg)
            ms.Seek(0, SeekOrigin.Begin)
            Return ms
        End Using
    End Function

실제로 이미지를 처리하는 부분입니다. thumbnail의 가로 길이가 128로 정해져 있기 때문에 이에 비율을 맞춰 세로 길이를 정하고 새로운 bitmap 이미지를 생성합니다. graphic을 이용해 이미지의 사이즈를 줄이고 새로 생성한 bitmap 이미지에 저장함으로써 thumbnail 이미지를 만들어냅니다.



지금까지 microsoft에서 예제로 제공하고 있는 guestbook 예제가 어떻게 돌아가는지에 대해 알아보았습니다. 이 예제를 통해 실제 azure 서비스가 어떻게 돌아가는지에 대한 이해도를 높이실 수 있으실 것이라 생각합니다. 다음 포스팅에서는 이 guestbook 예제에 facebook api를 결합해 새로운 서비스가 만들어지는 것을 보여드리도록 하겠습니다.


Posted by 재재 


이제 AzurePicture라고 이름지은 클라우드 웹 어플리케이션을 만들어보도록 하겠습니다. 이 사이트는 여행 사진과 경험을 공유하는 것을 컨셉으로 잡았으며 facebook 아이디를 이용해 로그인하면 여행 사진과 글을 써서 올릴 수 있는 사이트입니다. 이 때 글과 사진은 azure storage service를 이용해 저장이 되게 되고 글을 씀과 동시에 facebook의 wall에 글과 사진이 똑같이 포스팅되는 사이트 입니다. AzurePicture 사이트의 모습부터 보여드리도록 하겠습니다.





기본적인 구조, 즉 azure 서비스를 이용해 글과 사진을 저장하는 것은 Microsoft에서 제공하고 있는 Windows Azure Platform Training Kit에서 제공하는 방명록 서비스를 사용했습니다. 아래의 링크를 통해 Training kit을 다운받으실 수 있습니다.

http://msdn.microsoft.com/en-us/windowsazure/wazplatformtrainingcourse.aspx

Training kit에서는 기본적으로 애져 서비스를 어떻게 시작하는지부터 시작해서 SQL Azure, Virtual Machine Role, Blob, Queue, Table 등 애져 서비스를 익히기 위해 필요한 각종 정보와 코드까지 제공하고 있으므로 이를 활용하면 이해가 훨씬 수월해질 수 있습니다. 현재는 애져가 한국에 정식으로 런칭되지 않아 영어로 제공되고 있지만 아래 블로그를 통해 한글화된 자료 또한 찾아보실 수 있습니다. 단 Training kit이 업데이트되면서 달라진 부분이 몇몇 있을 수 있으니 참고하시길 바랍니다.

Microsoft Developer Evangelist 박중석님의 블로그
http://www.joongs.net/


AzurePicture 클라우드 웹 어플리케이션을 만들기에 앞서 먼저 Training kit에서 제공하는 코드에 대한 이해가 필요합니다. Training kit의 Demos 폴더에 들어가면 있는 WindowsAzureGuestBookWorkerRoleVS2010 프로젝트를 이용했으므로 이 프로젝트의 코드를 통해 설명해드리도록 하겠습니다.

이 프로젝트는 방명록 서비스를 만들 수 있는 프로젝트로 크게 세가지를 이해하면 됩니다.
첫번째는 blob storage로 사용자가 올리는 사진이 저장되는 저장소라고 생각하시면 됩니다. 이곳에 이미지를 저장하고 그로써 생성되는 url을 사용할 수 있게 됩니다.
두번째는 table storage입니다. 사용자가 올린 사진의 url, 글의 내용, 이름 등이 하나의 entry가 되고 이것은 table 형태로 저장되게 됩니다. 사용자가 새로운 글과 사진을 올리면 새로운 entry가 생성되며 이것은 고유한 key 값을 가지기 때문에 불러오는 것이 가능합니다.
세번째는 queue storage입니다. 이것은 web role과 worker role을 생각하시면 됩니다. web role에서 주로 보여지는 것을 처리하는 것에 비해 worker role에서는 뒤에서 업무를 처리하는 것입니다. 이 서비스에서는 사용자가 올린 사진을 처리해 thumbnail 이미지를 만들어내는 것이 worker role이 하는 작업이라고 할 수 있습니다. 이렇게 web role에서 worker role에게 이미지를 처리하라고 명령하기 위해서 이런 명령을 queue storage에 저장하게 되고 worker role은 queue를 보고 수행해야하는 작업을 알게 되며 수행한 뒤에는 이 명령을 삭제하게 됩니다. 전체적인 프로세스를 알았으니 이제부터 먼저 GuestBook_Data부터 설명하겠습니다.

namespace GuestBook_Data
{
    public class GuestBookEntry :
        Microsoft.WindowsAzure.StorageClient.TableServiceEntity
    {
        public GuestBookEntry()
        {
            PartitionKey = DateTime.UtcNow.ToString("MMddyyyy");

            // Row key allows sorting, so we make sure the rows come back in time order.
            RowKey = string.Format("{0:10}_{1}", DateTime.MaxValue.Ticks - DateTime.Now.Ticks, Guid.NewGuid());
        }

        public string Message { get; set; }
        public string GuestName { get; set; }
        public string PhotoUrl { get; set; }
        public string ThumbnailUrl { get; set; }
    }
}

먼저 GuestBookEntry는 PartitionKey와 Rowkey를 가지고 있어 entry마다 고유한 번호를 가지게 됩니다. 또한 message에는 사용자가 작성한 글, GuestName에는 사용자의 이름, PhotoUrl에는 사진이 저장된 azure storage의 주소가 저장되며 ThumbnailUrl에는 사진의 크기를 게시판 크기에 맞추어 축소한 thumbnail의 주소가 들어가게 됩니다. 사용자가 사진과 글을 등록하면 새로운 entry가 생성됩니다.

        static GuestBookEntryDataSource()
        {
            storageAccount = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");

            CloudTableClient.CreateTablesFromModel(
                typeof(GuestBookDataContext),
                storageAccount.TableEndpoint.AbsoluteUri,
                storageAccount.Credentials);
        }


처음 storageAccount를 연결할 때 configuration setting에 있는 값을 쓰게 됩니다. 이 값은 프로젝트를 다 만들고 게시를 하면 생성되는 configuration 값의 내용을 수정함으로써 연동될 수 있습니다. 이것은 실제 azure 서비스를 사용하기 위해 배포하는 과정에서 설명해드리도록 하겠습니다.

        public IEnumerable<GuestBookEntry> Select()
        {
            var results = from g in this.context.GuestBookEntry
                          where g.PartitionKey == DateTime.UtcNow.ToString("MMddyyyy")
                          select g;
            return results;
        }

원하는 entry를 partitionkey를 통해서 찾아오는 함수입니다. table storage에서 작성된 시간을 기준으로 entry를 검색해서 찾아오게 됩니다.

        public void AddGuestBookEntry(GuestBookEntry newItem)
        {
            this.context.AddObject("GuestBookEntry", newItem);
            this.context.SaveChanges();
        }

새로운 entry를 추가할 때 사용하는 함수입니다. 새로운 object를 추가하고 이 변경 내용을 저장소에 저장합니다.

        public void UpdateImageThumbnail(string partitionKey, string rowKey, string thumbUrl)
        {
            var results = from g in this.context.GuestBookEntry
                          where g.PartitionKey == partitionKey && g.RowKey == rowKey
                          select g;

            var entry = results.FirstOrDefault<GuestBookEntry>();
            entry.ThumbnailUrl = thumbUrl;
            this.context.UpdateObject(entry);
            this.context.SaveChanges();
        }

entry에 저장되어있는 thumbnail url을 수정하는 함수입니다. 맨 처음 글이 작성되었을 때는 사진의 주소가 thumbnail에도 똑같이 들어가게 되고 차후 이것을 이미지 조정을 통해 새로 생성한 url로 바꾸어주게 되는데 이 기능을 수행하는 함수입니다. 이곳에서는 변경된 url로 바군 뒤 bject를 업데이트 하고 그 변화를 반영합니다.





이제부터는 web role에서 하는 작업을 설명해드리도록 하겠습니다. sign button을 클릭하면 아래와 같은 작업이 수행됩니다.

                InitializeStorage();

configuration setting을 통해 azure의 storage account와 연동하고 blob과 queue storage service를 만드는 작업을 수행합니다.
             
                // upload the image to blob storage
                CloudBlobContainer container = blobStorage.GetContainerReference("guestbookpics");
                string uniqueBlobName = string.Format("image_{0}.jpg", Guid.NewGuid().ToString());
                CloudBlockBlob blob = container.GetBlockBlobReference(uniqueBlobName);
                blob.Properties.ContentType = FileUpload1.PostedFile.ContentType;
                blob.UploadFromStream(FileUpload1.FileContent);
                System.Diagnostics.Trace.TraceInformation("Uploaded image '{0}' to blob storage as '{1}'", FileUpload1.FileName, uniqueBlobName);

이미지를 저장하기 위해 unique한 이미지 이름을 정한 뒤 이를 content type과 함께 저장하고 업로드하는 기능을 수행합니다. 또한 trace가 가능하도록 파일의 이름과 저장되는 이름을 문장으로 저장합니다.

                // create a new entry in table storage
                GuestBookEntry entry = new GuestBookEntry() { GuestName = me.Dictionary["name"].String, Message = MessageTextBox.Text, PhotoUrl = blob.Uri.ToString(), ThumbnailUrl = blob.Uri.ToString() };
                GuestBookEntryDataSource ds = new GuestBookEntryDataSource();
                ds.AddGuestBookEntry(entry);
                System.Diagnostics.Trace.TraceInformation("Added entry {0}-{1} in table storage for guest '{2}'", entry.PartitionKey, entry.RowKey, entry.GuestName);

저장된 사진의 url로 photourl, thumbnailurl을 지정한 뒤 사용자가 작성한 글의 내용과 이름으로 새로운 entry를 만들고 이를 table storage에 저장합니다. 그리고 이 과정 또한 trace에 저장합니다.

                // queue a message to process the image
                var queue = queueStorage.GetQueueReference("guestthumbs");
                var message = new CloudQueueMessage(String.Format("{0},{1},{2}", uniqueBlobName, entry.PartitionKey, entry.RowKey));
                queue.AddMessage(message);
                System.Diagnostics.Trace.TraceInformation("Queued message to process blob '{0}'", uniqueBlobName);

저장된 이미지로 thumbnail 이미지를 만들기 위해 worker role에 이미지를 처리하도록 하는 메시지를 queue storage에 저장합니다. blob name과 partition key, row key를 제공해 원하는 이미지를 찾을 수 있도록 합니다.


worker role에서 수행하는 작업은 다음 포스팅에서 다루도록 하겠습니다.


Posted by 재재 

이번 포스팅에서는 Windows Azure management Portal에 대해 설명해보도록 하겠습니다. 이전에 Azure application을 배포하는 방법에 대해 설명한 포스팅에서 약간 설명되긴 했지만 이번에는 스토리지 서비스를 배포하는 방법도 연관지어서 설명해드리고자 합니다. Azure 서비스로 어플리케이션을 배포하기 위해서는 이 포탈에 접속해야만 합니다. 기본적인 메인 화면은 아래와 같습니다.


보시다시피 포탈을 잘 모르는 경우에도 도움말을 쉽게 찾아볼 수 있도록 첫 페이지에 관련 링크들이 나와 있습니다. 포탈이 새로 바뀌게 되면서 이전에 사용하시던 분들도 바뀐 부분에 대한 것을 이 페이지에서 확인할 수 있습니다.
왼쪽 아래에 보면 Home / Hosted Services, Storage Accounts & CDN / Database / Reporting / Service Bus, Access Control &  Caching / Virtual Network와 같이 메뉴가 있는 것을 확인할 수 있습니다. 이 메뉴들을 통해 hosting과 storage 서비스, SQL Azure, SQL Azure Reporting, Azure AppFabric과 같은 서비스들을 이용할 수 있습니다. 현재 사용하는 서비스는 호스팅과 스토리지 서비스 이기 때문에 이 부분에 초점을 맞추어 설명해드리도록 하겠습니다.

아래 그림과 같이 Hosted Services, Storage Accounts & CDN 페이지로 들어가면 먼저 Deployment Health를 체크할 수 있습니다. 특히 이미 기존에 사용하고 있는 서비스가 있을 때 이 페이지가 먼저 뜨게 됩니다. 한 계정에서 여러 서비스를 이용하고 있을 때 한눈에 몇개의 서비스가 동작하고 있는 지 role과 instance는 몇 개인지를 파악할 수 있기 때문에 관리에 있어서 용이할 수 있습니다. 서비스를 잠시 중단한 상황에서도 비용이 나가기 때문에 이것에 대한 경고문을 띄워줄 뿐만 아니라 1개의 instance에 1개의 role만 있을 때에도 경고문을 띄워줍니다. 이는 Azure 서비스에서 보다 안정성을 높이기 위한 것으로 1개의 role만 있을 때 혹시 문제가 생기면 바로 중단되는 것과는 달리 여러개의  role이 있으면 99.95% 이상의 안정도를 보장하기 때문에 알리는 것입니다. 이는 Windows Azure Compute SLA에서도 명시되어 있으며 많은 기술력을 확보하고 있는 MS의 장점이라고 할 수 있습니다.


이제 실제로 hosting service 쪽을 살펴보겠습니다. 이미 2개의 어플리케이션을 등록해놓았기 때문에 목록에 있는 것을 확인할 수 있습니다. 오른쪽의 속성 창을 통해서 이 어플리케이션이 언제 만들어졌는지, 주소는 무엇인지, 어느 지역에서 서비스되고 있는지를 확인할 수 있습니다. 또한 어플리케이션이 많은 경우에는 위의 검색창을 통해서 빠르게 찾아볼 수도 있습니다.


다음으로는 스토리지 서비스 쪽을 살펴보겠습니다. 아까와 유사하게 한 개의 스토리지 서비스가 이미 사용중인 것을 볼 수 있습니다. 오른쪽의 속성창에서 Accss key를 버튼을 눌러 확인할 수 있는데 이 키들은 호스팅 스토리지 서비스와 스토리지 서비스를 결합할 때 쓰게 됩니다. 스토리지 서비스는 크게 세개로 나누어지게 되는데 각각 Blob, Table, Queue로 구분됩니다.

Blob : Blob은 대용량 저장 서비스로 특히 Azure에서 제공하는 CDN(Contents Delivery Network)와 연동이 가능해 전세계 어느 곳에서도 일정 빠르기 이상의 속도를 보장받을 수 있습니다.
Table : Table 형태로 저장하는 서비스로 빠른 접근이 필요할 때 유용하게 쓸 수 있습니다.
Queue : Queue 서비스는 작업을 순서대로 처리할 때 쓸 수 있는 스토리지로 worker role과 작업할 때 같이 쓸 수 있습니다.


먼저 스토리지 서비스를 시작하는 것을 해보도록 하겠습니다. 새로운 스토리지 서비스를 쓰기 위해 왼쪽 위의 New Storage Account를 클릭합니다. 아래와 같이 원하는 이름을 입력한 뒤 지역을 고르고 스토리지를 만듭니다.


잠시 후 그림과 같이 스토리지 서비스가 만들어진 것을 확인할 수 있습니다. 오른쪽의 속성창에서는 이 서비스에 대한 정보를 확인할 수 있습니다. 호스팅 서비스에서 스토리지 서비스를 같이 이용하기 위해서는 오른쪽의 Primary access key가 필요합니다.


View 버튼을 클릭하면 아래와 같이 key가 나오는 것을 확인할 수 있습니다. 이 키를 이용해 나중에 게시된 ServiceConfiguration 파일을 수정함으로써 스토리지 서비스와 연동이 가능합니다. 스토리지 서비스를 더이상 사용하지 않기를 원할 경우에는 위의 Delete Storage 버튼을 눌러 지울 수 있고 키값을 다시 얻기 원할 경우에는 Regenerate 버튼을 눌러 새로운 키를 받을 수 있습니다. Enable CDN 버튼을 통해서는 Azure에서 제공하는 CDN 서비스를 사용할 수 있습니다. CDN 서비스는 스토리지 서비스를 사용할 때 그 속도를 보장하기 위해서 각 지역에서 cache를 통해 일정 수준 이상의 빠른 속도를 유지할 수 있는 서비스입니다. 이 서비스를 이용하기 위해서는 추가의 비용이 들어가니 이를 확인하신 후 이용하는 것이 좋습니다.


스토리지 서비스를 만들었으니 이제 호스팅 서비스에서의 메뉴를 알아보도록 하겠습니다. 이전 포스팅에서 설명했듯이 새로운 호스팅 서비스를 만드는 것은 간단합니다. 그렇다면 이미 만들어서 배포하고 있는 서비스를 수정하기 위해서는 어떻게 해야할까요?
수정하는 것은 이전과 비슷한 과정을 거치면 됩니다. 수정한 프로젝트를 게시한 뒤 생성된 파일인 패키지 파일과 configuration 파일을 이번에는 new hosted service가 아닌 new staging development를 통해 업로드하면 됩니다. 먼저 수정할 서비스를 클릭한 뒤 new staging development 버튼을 눌러줍니다. 저는 azurepicture라는 서비스를 수정해보도록 하겠습니다.

아래와같이 패키지 파일과 configuration 파일의 경로를 넣어준 뒤 deployment name을 임의로 지정합니다. 저는 새로운 버전이라는 의미로 v2.0과 같이 입력했습니다. upgrade를 한 뒤 조금 기다리시면 업로드가 완료되고 웹 어플리케이션을 실행해보면 수정된 것이 반영된 것을 확인하실 수 있습니다.


configuration 파일만을 수정하고 싶을 때는 Configure 버튼을 눌러 수정할 수 있습니다. 아래 그림과 같이 아예 새로운 configuration 파일로 덮어쓸 수도 있으며 현재 등록되어있는 configuration 파일을 직접 수정할 수도 있습니다. 현재 instance의 수가 1개로 되어있어 warning이 발생하기 때문에 instance 수를 2로 바꾸어보겠습니다. 보시다시피 매우 손쉽게 바꿀 수 있다는 것을 알 수 있습니다.




Posted by 재재 


이제 페이스북 API로 애져 웹 어플리케이션을 만들어보도록 하겠습니다.
이전 포스팅에서 얘기했던 대로 먼저 새로운 Azure Project를 생성합니다. 프로젝트 이름은 facebookSample로 하겠습니다.


프로젝트를 생성하면서 Web Role 한 개를 추가합니다. 이전과 같이 연필 모양의 아이콘을 눌러 web role의 이름을 facebook을 수정합니다.


이제 facebookSample 프로젝트가 생성되었습니다. 아래와 같이 facebook이라는 web role이 추가된 것을 확인할 수 있습니다.


이전 포스팅에서 받은 facebook C# SDK 파일을 통해 생성한 facebookAPI.dll을 프로젝트에 포함해주어야 facebook API를 프로젝트 내에서 사용할 수 있습니다. 따라서 아래와 같이 참조 추가 버튼을 눌러 facebookAPI.dll을 포함해줍니다. facebookAPI.dll은 facebookSample 프로젝트의 폴더 내로 복사해 그 경로를 따라 추가해주셔도 되고 최초로 생성되었던 폴더 경로를 넣어 추가하셔도 상관없습니다.


facebookAPI를 추가하고 나면 아래 그림과 같이 참조에서 API를 확인할 수 있습니다. 오른쪽의 내용을 보면 FacebookAPI에서 지원하는 내용 또환 확인할 수 있습니다. 함수들도 나오기 때문에 자신이 사용하고자 하는 것을 찾아 쓰기 쉽게 되어있습니다.


이제 실제 내용을 프로그래밍해 보도록 하겠습니다. 이 웹 어플리케이션은 facebook ID로 로그인하면 자신의 뉴스피드에 뜨는 글들을 화면에 출력해주는 어플리케이션입니다.

facebook으로 authorization하는 서비스를 이용하기 위해서는 시작 페이지에서 facebook login 페이지로 이동한뒤 다시 내가 지정한 웹페이지로 redirect되어야 하기 때문에 시작 페이지와 redirect 되는 페이지 이렇게 두개를 만들도록 하겠습니다. 아래 이미지대로 시작 페이지의 이름은 main, redirect되는 페이지의 이름은 show로 정해 새로운 웹 폼을 추가해주었습니다.




Main 페이지가 열리면 바로 facebook의 로그인 페이지로 넘어가도록 설정합니다.
facebook에서는 아래와 같은 url로 연결되었을 때 로그인 기능을 제공하고 로그인이 성공했을 시 미리 지정해준 redirectUrl로 넘어가도록 해줍니다.

https://graph.facebook.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUrl}&scope={scope}

로그인 후 show.aspx로 연결되어야 하므로 redirectUrl을 http://localhost:81/show.aspx로 설정해주었습니다. 이것은 facebook에서 설정한 redirectUrl의 하위 페이지여야 합니다. 현재는 visual studio를 통해 가상 클라우드 환경에서 테스트를 할 것이기 때문에 localhost로 설정했지만 실제로 애져서비스를 통해 배포하게 될 때에는 이런 부분들은 모두 수정해주어야 합니다.

scope의 경우 유저에게 요청하는 권한의 범위를 말합니다. 권한을 얻지 못할 경우 글을 받아오거나 쓰는 등의 활동을 하지 못하게 되므로 어플리케이션에서 필요한 기능에 따라 맞는 권한을 요청합니다. facebook에서 권한에 대한 설명은 아래 링크를 보면 자세히 나와있습니다.

http://developers.facebook.com/docs/authentication/permissions/


다음으로는 show.aspx 부분을 수정하도록 하겠습니다. show 페이지는 facebook 로그인 후 연결되게 되는데 이곳에서는 먼저 facebook으로부터 access token을 받아온 뒤 이를 이용해 원하는 정보를 얻어오게 됩니다. 

Facebook.FacebookAPI api = new Facebook.FacebookAPI(GetAccessToken());
이 문장을 통해 facebook에서 access token을 받아올 수 있습니다. GetAccessToken에 대한 설명은 후에 나오므로 그 부분을 참고하시기 바랍니다.

JSONObject meHome = api.Get("me/home");
access token을 받아오는 데 성공하면 이제 이를 통해 정보가 담긴 object를 받아올 수 있게 됩니다. 이것이 바로 JSONObject로 위와 같이 api.Get 함수를 이용하면 얻어지는 return 값이 JSONObject가 됩니다. 이것은 dictionary의 형태로 되어있어 필요한 정보를 index에 따라 뽑아올 수 있습니다. 따라서 아래 스크린샷과 같이 meHome이라는 JSONObject에서 name, id, message 등의 정보를 얻어와 출력할 수 있게 됩니다.
이 예제에서는 me/home을 받아왔지만 이 외에도 여러가지를 object로 받아올 수 있습니다. 자세한 내용들은 facebook의 developer 사이트에서 알아보실 수 있으므로 아래 링크를 참고하시기 바랍니다.

http://developers.facebook.com/docs/reference/api/


GetAccessToken과 GetOauthToken은 access token을 받아올 수 있도록 해주는 함수입니다. 토큰이 없는 경우 facebook에 아래와 같은 url을 통해 토큰을 요청합니다.
https://graph.facebook.com/oauth/access_token?client_id={clientId}&redirect_uri={redirectUrl}&client_secret={clientSecret}&code={code}

여기서 client Id와 client Secret은 facebook에 어플리케이션 등록을 했을 때 얻었던 아이디와 시크릿코드입니다. facebook의 developers 사이트에서 my apps를 누르면 자신의 어플리케이션 정보를 다시 확인하실 수 있습니다.


이렇게 프로그래밍 부분이 완성되었습니다. 이제 가상 클라우드 환경에서 실제로 이 어플리케이션이 어떻게 동작하는지를 확인하도록 합니다. Visual Studio에서는 Azure SDK를 설치했을 때 어플리케이션 제작, 빌드에서부터 시작해 실제 테스트와 배포까지 가능하다는 장점이 있기 때문에 바로 확인 가능합니다. 디버그 시작 혹은 F5를 누르면 아래와 같이 facebook 로그인창이 뜨는 것을 확인하실 수 있습니다. 이는 아까 만들었던 Main 페이지가 뜨면서 facebook 로그인으로 바로 redirect 되었기 때문입니다.


아이디와 비밀번호를 입력하고 로그인하면 Permission 허락을 구하는 창이 뜹니다. 아까 scope에서 요청한 대로 허가 내역이 뜨게 됩니다. scope에 더 많은 권한을 추가하면 어플리케이션으로 접근할 수 있는 정보나 할 수 있는 기능이 더 많아지게 됩니다. allow 버튼을 누르면 이제 show 화면으로 전환되게 됩니다.



어플리케이션의 show 화면으로 전환되면서 최종적으로 우리가 원하던 화면이 나오게 됩니다. 제 facebook 아이디로 실험해보았는데요 친구의 이름, 아이디 번호와 함께 친구가 쓴 내용이 그대로 나오는 것을 확인할 수 있습니다. facebook API도 사용이 쉬운 편일 뿐 아니라 Azure 역시 쉽게 만들고 올려서 배포 가능하기 때문에 이를 결합해서 새로운 개념의 서비스를 창출하는 것도 가능하게 됩니다. 아이디어가 있을 때 이렇게 빠르고 간단하게 만들어서 실제 클라우드 환경에서 어떻게 나올지 테스트해보는 것도 즐거운 경험이 될 것입니다.

Posted by 재재 


최근 급부상하고 있는 서비스인 SNS(Social Network Service)의 대표주자인 facebook과 twitter의 API를 이용한 개발이 주목받고 있습니다. 오픈소스를 지향하고 있기 때문에 손쉽게 API를 활용해 새로운 서비스를 만들어낼 수 있는 점이 이 서비스들의 가장 큰 매력이라고 할 수 있습니다. Visual Studio를 이용해 facebook API가 결합된 클라우드 웹 어플리케이션을 만드는 과정에서 먼저 페이스북 API를 먼저 알아보도록 하겠습니다.

http://developers.facebook.com/

개발자들을 위해 facebook은 위의 주소에서 여러 정보를 제공하고 있습니다. 개발에 관한 설명과 정보는 주로 개발자 문서를 통해 확인할 수 있으며 포럼에서는 토론이나 질문을 하는 것도 가능하며 쇼케이스를 통해 실제로 facebook이 적용된 사례를 확인할 수 있습니다. 블로그를 통해서는 facebook 개발자들이 올리는 글을 볼 수 있으며 내 앱스에서 등록한 어플리케이션들을 확인하고 관리할 수 있습니다.


우리가 실제로 개발에 사용할 것은 facebook에서 core concepts로 소개하고 있는 Graph API입니다. Graph API는 쉽게 말하자면 모든 정보를 object와 object간의 connection으로 생각하는 개념입니다. 사람, 사진, 이벤트 같은 것들이 하나의 object가 될 수 있으며 친구관계, 공유하는 콘텐츠, 사진 태그 등이 그 object들을 연결하는 connection이 됩니다. 모든 object는 고유의 ID를 가지고 있고 이를 이용해 정보에 접근할 수 있습니다. 기본적으로 모든 접근은 아래와 같은 형태로 이루어지게 됩니다.

https://graph.facebook.com/ID

여기서 ID는 아까 말한 object의 고유한 ID입니다. 이 요청을 통해 우리는 JSON object를 얻을 수 있는데 이것이 Graph API에서 말하는 object의 형태입니다. 우리가 원하는 모든 정보는 이 JSON object로부터 얻을 수 있게 됩니다. 예를 들어 위의 요청을 통해서 어떤 사람을 JSON object로 받아왔다면 우리는 그 JSON object 내의 id, name, gendr, timezone 등의 내용을 얻을 수 있게 됩니다. 실제 프로그래밍 내용은 다음 포스팅에서 다룰 예정이므로 먼저 facebook API를 시작하기 위해 해야하는 것부터 해보도록 하겠습니다.


일단 우리가 만들고자 하는 것이 Visual Studio를 이용한 클라우드 웹 어플리케이션이기 때문에 이 facebook API를 이용할 수 있도록 SDK부터 받아야 합니다. 현재 developers 페이지에서는 JavaScript, iOS, Android, PHP를 위한 SDK를 제공하고 있습니다. 우리는 C#을 이용해 어플리케이션을 만들 것이기 때문에 facebook에서 소개하는 사이트를 통해 C#용 SDK를 받도록 하겠습니다. 
사이트 주소는 아래와 같으며 Download 버튼을 눌러 SDK를 다운받을 수 있습니다. 

facebook C# SDK : https://github.com/facebook/csharp-sdk


아래와 같이 facebook 폴더로 들어가면 facebookAPI라는 project file이 있는 것을 확인할 수 있습니다. 이 프로젝트 폴더를 열고 빌드해주면 다음 사진에서와 같이 FacebookAPI.dll이 생성되는 것을 확인 수 있습니다. 새로운 프로젝트를 만들며너 이 dll을 참조함에 따라 facebook AI를 사용할 수 있게 됩니다. 



다음으로는 facebook에 어플리케이션을 등록하도록 하겠습니다. 아직 만들지도 않은 어플리케이션을 등록한다는 것에 대해 의아하실 수도 있는데 이는 어플리케이션을 등록함으로써 어플리케이션의 ID, Secret key를 받을 수 있을 뿐만 아니라 사용자가 facebook 계정으로 로그인 후 redirect되는 url 주소도 정할 수 있습니다. 웹 어플리케이션에서 사용자가 facebook 계정으로 인증받기 때문에 꼭 필요한 절차라고도 할 수 있습니다.

먼저 아까 보았던 facebook developers 사이트에서 내 앱스를 눌러 새로운 어플리케이션을 만듭니다.
아래 화면에서 어플리케이션의 이름을 정하고 약관에 동의합니다.


이후 웹 사이트 란에서 facebook 계정 로그인 후 redirect 될 사이트의 url을 적습니다. 우리가 만들 클라우드 웹 어플리케이션의 경우 아직 클라우드로 배포하지 않고 visual studio를 통해서 테스트만 할 것이기 때문에 http://localhost:81/과 같이 적도록 합니다. 후에 클라우드로 배포할 시 이 주소는 바꿔주어야 제대로 동작할 수 있습니다.


어플리케이션을 등록하고 나면 아래와 같이 어플리케이션의 아이디, API 키, 시크릿 코드, 사이트 URL을 확인할 수 있습니다. 이 숫자는 나중에 프로그래밍하면서 사용할 것입니다.
 

이제 실제로 facebook을 이용한 어플리케이션을 만들기 위한 준비과정은 마무리되었습니다. 다음 포스팅에서 facebook 계정으로 로그인하면 뉴스피드의 내용을 출력하는 웹 어플리케이션을 만들어보도록 하겠습니다.

Posted by 재재 

이번 포스팅에서는 개발한 application을 애져를 통해 배포하는 방법을 알아보도록 하겠습니다. 앞서 포스팅에서 만들었던 Azure 프로젝트를 배포하는데 사용하도록 하겠습니다.
Azure 서비스를 이용해 배포하기 위해서는 먼저 Azure 계정이 필요합니다. Azure 서비스는 한국에는 아직 출시가 되지 않았기 때문에 Azure를 이용하기 위해서는 미국이나 영국 등 다른 나라의 계정을 만들어서 사용하실 수 있습니다. 무료로 테스트만 해보고자 하시는 개발자 분은 "Windows Azure Platform Introductory Special"을 이용하실 수 있습니다. 이는 한달에 25시간을 무료로 제공하는 서비스로 간단히 올려 테스트만 하실 분에게는 적합한 서비스라고 할 수 있습니다.

Included each month at no charge:

  • Windows Azure
    • 25 hours of a small compute instance
    • 500 MB of storage
    • 10,000 storage transactions
  • SQL Azure
    • 1GB Web Edition database (available for first 3 months only)
  • Windows Azure AppFabric
    • 100,000 Access Control transactions
    • 2 Service Bus connections
  • Data Transfers (per region)
    • 500 MB in
    • 500 MB out

위의 내용은 한달동안 무료로 제공하는 서비스입니다. 초과분이 발생했을 시는 기존요금대로 요금이 나가게 되는 주의하시는 것이 좋습니다. 이 무료 서비스는 2011년 3월 31일까지 제공될 예정으로 그 이후에는 기존요금대로 부과될 예정입니다.
무료서비스를 이용하시고자 하시는 분은 해외결제가 가능한 카드가 있어야 하시며 Windows Live ID가 있어야 합니다. 아래 링크의 내용대로 따라하시면 계정을 만드실 수 있습니다.
http://blogs.msdn.com/b/ericnel/archive/2010/01/13/step-by-step-sign-up-for-the-25-hour-free-windows-azure-platform-introductory-special.aspx


이제 계정이 있다는 가정하에 어떻게 어플리케이션을 실제로 배포하는지를 알아보도록 하겠습니다.
먼저 Visual Studio를 통해 만든 어플리케이션을 게시해야 합니다. 그림과 같이 Azure 어플리케이션에서 우클릭 후 게시를 눌러 설정창이 뜨도록 합니다.


기본적으로 Windows Azure에 Windows Azure 프로젝트 배포로 되어있지만 우리는 서비스 패키지만 만들기를 선택합니다. 프로젝트를 배포하는 방법은 여러가지가 있지만 여기서는 포탈을 통해 배포하는 방법으로 해보겠습니다.


확인 버튼을 누르면 아래의 창과 같이 새로운 폴더창이 뜨게 됩니다. 이것은 우리가 위에서 만든 서비스 패키지가 저장된 경로로 이 경로는 나중에 애져서비스로 배포할 때 쓰여질 것이기 때문에 복사해놓는 것이 좋습니다.


이제 http://windows.azure.com 으로 접속합니다. 이곳에서 windows live ID로 로그인하면 아래와 같은 화면을 볼 수 있습니다.
이곳에서 새로운 서비스를 호스팅하거나 스토리지나 데이터베이스를 이용할 수도 있습니다. 왼쪽 아래의 Hosted Services, Storage Accounts & CDN을 클릭하면 현재 사용중인 서비스를 확인할 수 있습니다.


왼쪽 위의 New Hosted Service를 누르면 새로운 서비스를 만들 수 있습니다. 서비스 이름과 URL을 넣고 애져 서비스를 이용할 지역을 선택합니다. 이후 Deployment options는 Deploy to stage environment로 선택한 뒤 이름을 넣습니다. 아래의 Package location과 configuration file의 경로를 넣어줘야 하는데 여기서 아까 본 폴더의 경로를 사용하게 됩니다.

폴더의 경로를 넣어주면 아래 그림과 같이 Azure라는 이름의 Service Package가 뜨는 것을 볼 수 있습니다.


Service configuration file 또한 위와 동일한 과정을 거쳐 파일을 선택해준 뒤 ok 버튼을 눌러줍니다.


버튼을 누르면 아래의 모습과 같이 패키지를 업로드하고 있는 모습을 볼 수 있습니다. 시간이 어느정도 걸릴 수 있기 때문에 기다리는 것이 좋습니다.

패키지 업로드가 완료되면 Ready라는 글씨로 성공적으로 올라갔음을 확인할 수 있습니다. azure라는 이름의 Deployment를 클릭하면 오른쪽 속성에서 DNS name이 영문자와 숫자의 조합으로 되어있는 것을 알 수 있습니다. 아까 지정해준 URL로 접속했을 때 서비스로 연결되도록 하기 위해서는 가운데 위의 Swap VIP를 눌러서 주소를 바꾸어주어야 합니다.


OK 버튼을 눌러주면 DNS 주소가 맨 처음 설정했던대로 바뀐 것을 확인할 수 있습니다.
 

이 주소를 클릭하면 아래와 같이 Visual Studio에서 확인할 수 있었던 창이 그대로 뜨는 것을 확인할 수 있습니다. 이렇게 클라우드를 통해 배포를 마치게 되면 다른 곳에서도 이 사이트 주소를 통해 접속할 수 있게 됩니다. 사이트를 테스트하기 위해 무료 계정을 사용중이시라면 테스트 이후에는 꼭 STOP 버튼을 눌러 추가로 과금되지 않도록 유의하시는 것이 좋습니다. 더 확실하게 하기 위해서는 등록한 어플리케이션을 삭제하는 것도 가능합니다. 기본적으로 Visual Studio와 연동이 잘 되어있고 결과를 똑같이 확인할 수 있기 때문에 이를 잘 활용하는 것을 추천해드립니다.
Posted by 재재 


이번 포스팅에서는 Windows Azure Appliaction을 개발하기 위한 환경을 구축하는 것과 이를 이용해 간단한 Hello Azure 프로그램을 만드는 것까지 해보도록 하겠습니다.


- Windows Azure 개발 환경 구축
제 노트북으로는 Window 7에서 Visual Studio 2010을 사용해 개발을 하고 있습니다. 애져가 지원하는 운영체제는 Windows Vista, Windows 7, Windows Serever 2008, Windows Server 2008 R2로 안타깝게도 Windows 2000과 Windows XP에서는 지원이 되지 않습니다. 개발 도구로는 Visual Studio 2008 SP1, Visual Web Developer 2008 Express SP1, Visual Studio 2010, Visual Web Developer 2010 Express가 가능합니다. 저는 Visual Studio 2010을 사용중이라 이것으로 소개해드릴 것이지만 소프트웨어가 없다면 Visual Web Developer 2010이 무료로 제공되고 있으므로 다운받으셔서 이용하시면 됩니다. 저는 Windows7과 Visual Studio 2010으로 진행하도록 하겠습니다.



먼저 애져를 이용한 개발을 하기 위한 환경 설정을 하도록 하겠습니다.
시작 메뉴를 누른 뒤 검색창에 appwiz.cpl을 입력한뒤 엔터를 칩니다.


제어판이 뜨면 왼쪽의 WIndows 기능 사용/사용 안함 버튼을 클릭합니다


Windows 기능 중 Microsoft .NET Framework 3.5.1을 확장해 Windows Communication Foundation HTTP Activation을 체크해줍니다.


스크롤을 내려 인터넷 정보 서비스를 확장한 뒤 World Wide Web 서비스 - 응용 프로그램 개발 기능의 ASP.NET과 CGI를 체크해줍니다. 그리고 아래의 일반적인 HTTP 기능을 확장해 정적 콘텐츠도 같이 선택해줍니다. 설정을 마치고 확인 버튼을 누르면 설정을 적용하기 위해 잠시 시간이 걸릴 수 있습니다.


여기까지가 개발을 위한 설정 과정이었습니다. 생각보다 간단하지요? 아직 개발 도구가 없으신 분들은 지금 개발 도구를 설치하셔야 합니다. 기존의 Visual Studio를 사용중이신 분이라면 윈도우의 기본적인 설정은 끝났다고 생각하시면 됩니다.



- Windows Azure Tools for Visual Studio 설치
Microsoft에서는 보다 나은 클라우드 어플리케이션 개발을 위해 Windows Azure Tools for Visual Studio를 제공하고 있습니다. 이 안에는 클라우드 가상 환경에서 테스트해볼 수 있는 SDK를 포함하고 있으며 Visual Studio와 연동되도록 도와주기 때문에 꼭 설치해줘야 합니다. 현재 2011년 2월 기준으로 최신 버전은 2010년 11월에 나온 1.3 버전으로 아래 링크를 따라가면 다운로드 할 수 있습니다.

Windows Azure Tools for Visual Studio 설치하러가기



- Azure 시작하기
Windows Azure Tools for Visual Studio 설치까지 마치셨다면 이제 Azure application 개발을 시작할 수 있습니다. 짝짝짝!!!
이제 Visual Studio를 시작해주면 되는데 가상 클라우드 환경에서 테스트와 디버깅을 하기 위해서는 Visual Studio를 관리자 권한으로 권한 상승을 해야합니다. 권한 상승을 하기 위해서는 Visual Studio 위에 마우스를 올린 뒤 우클릭 후 "관리자 권한으로 실행"을 누르면 됩니다. 하지만 매번 관리자 권한 상승을 하기 번거로우므로 아래의 방법으로 해결합니다.


먼저 시작을 누른 뒤 모든 프로그램으로 가서 Microsoft Visual Studio 2010을 찾은 뒤 우클릭 후 속성을 누릅니다.
속성창이 뜨게 되면 호환성 탭으로 간 뒤 아래의 권한 수준에 체크를 해줘 항상 이 프로그램이 관리자 권한으로 실행되도록 합니다.


이제 Visual Studio 창을 띄웠으니 프로젝트를 만들어보도록 하겠습니다.

먼저 시작 페이지에서 "새 프로젝트"를 클릭하면 아래와 같이 템플릿 선택 창이 뜨게 됩니다. 모든 설치와 설정을 마친 상태에서는
다른 언어 - Visual C# - Cloud로 들어가시면 Windows Azure 프로젝트라는 템플릿이 있는 것을 확인할 수 있습니다.
아래의 이름을 원하는 프로젝트의 이름으로 바꾸어준 뒤 확인 버튼을 눌러줍니다. 저는 Azure로 프로젝트 이름을 변경했습니다.


새로운 창이 뜨게 되는데 이곳에서 Role을 선택할 수 있습니다. Role은 Web Role과 Worker Role로 나누어지게 되는데 Web Role은 쉽게 화면에 보여지는 부분을 담당하고 Worker Role은 백그라운드에서 서포트하는 부분이라고 생각하시면 됩니다. 간단한 프로그램을 만들 것이기 때문에 Visual C#의 ASP.NET 웹 역할만 추가하겠습니다. 화살표를 누르면 오른쪽 사각형에 WebRole이 나오는 것을 볼 수 있습니다. 여기서 오른쪽의 연필 표시를 눌러 Web Role의 이름을 Azure_WebRole로 변경하겠습니다.


확인 버튼을 누르면 프로젝트가 생성되는 것을 볼 수 있습니다. Default.aspx를 우클릭 후 디자이너 보기를 하면 기본적으로 세팅되어 있는 웹의 모습을 볼 수 있습니다. 이 상태에서 도구상자를 클릭하면 여러 도구들이 나오게 되는데 원하는 도구를 드래그해서 화면에 놓으면 손쉽게 웹에 원하는 형태를 추가할 수 있습니다. 이는 사실 클라우드 개발이라고 해서 다른 것이 아니기 때문에 기존에 관련 프로그래밍을 해보신 분이라면 거의 같다는 사실을 알 수 있을 것입니다.


모든 프로그래밍 예제에 있어서 시작이 되는 Hello World를 입력해보도록 하겠습니다.
왼쪽의 도구상자에서 Label을 클릭 후 드래그해서 화면에 올려놓습니다. 그리고나서 Default.aspx를 우클릭 후 코드보기로 전환한 뒤 Page_Load 함수 안에
this.Label1.Text = "Hello World";
를 입력해 라벨의 텍스트 내용이 바뀌도록 합니다.


이후 솔루션 탐색기에서 ServiceConfiguration.cscfg 파일을 열고 인스턴스의 수를 1에서 2로 수정합니다. 인스턴스의 수를 늘리는 것은 후에 애저 서비스로 어플리케이션을 올렸을 때 만약 문제가 발생해 인스턴스가 멈췄을 때 다른 인스턴스가 돌아가므로 안정도를 높일 수 있기 때문입니다. 후에 보겠지만 애져로 배포할 때 인스턴스가 1개이면  warning 창이 뜨게 됩니다. 이렇게 인스턴스를 2개 이상 했을 때 안정도를 98% 이상으로 보장할 수 있으므로 바꾸는 것을 권장합니다.


이제 Debug에서 Start Debugging을 선택하면 가상 클라우드 환경에서 어플리케이션의 실행 모습을 확인할 수 있습니다.


Posted by 재재 



- "클라우드 컴퓨팅(Cloud Computing)"이 뭔가요?
최근 클라우드 컴퓨팅이 새로운 IT업계의 트렌드로 떠오르고 있습니다. 특히 Microsoft에서 2011 IT Trend 중 하나로 Commercial Cloud를 꼽으면서 더욱 관심이 증가하고 있는 추세입니다.
먼저 클라우드 컴퓨팅을 간단히 말하자면 인터넷 기술을 활용하여 가상화된 IT 자원을 서비스로 제공하는 컴퓨팅을 뜻합니다.
잘 모르는 사람이 보기에는 상당히 추상적으로 느껴지겠지만 사실 클라우드 컴퓨팅에는 이미 예전부터 존재하던 서비스도 많이 포함되어 있습니다. 예를 들어 사람들이 많이 사용하는 웹메일이나 웹하드 서비스, 호스팅 서비스는 일종의 클라우드로 볼 수 있습니다. 그동안은 하나의 카테고리로 이름 붙여져 불리우지 않았지만 모바일기기 등의 발달로 인해 인터넷에 접근하기가 이전보다 용이해져가면서 클라우드 컴퓨팅의 중요성이 더욱 부각되어가고 있습니다. 특히 스마트폰, 태블릿이 쏟아지고 있는 현재 상태에서 이동성은 좋지만 그 외의 많은 부분에서 부족함을 가지고 있는 모바일 기기의 단점을 보완할 수 있는 방법으로도 꼽히고 있습니다. 데스크탑 사용자에게 있어서도 기존의 방식대로 소프트웨어를 CD로 사는 대신 인터넷을 통해 제공받는 것이 가능해지기 때문에 클라우드 컴퓨팅이 확산될수록 IT문화가 크게 바뀔 것으로 예상되고 있습니다. 많은 IT 회사들이 클라우드 컴퓨팅이 미래의 IT시대의 모습이 될 것이라 예상하고 있으며 따라서 이 시장에 진입하기 위해 노력을 기울이고 있는 추세입니다.





- 클라우드의 세 영역

클라우드 컴퓨팅은 현재 크게 세가지 분야인 IaaS, PaaS, SaaS로 나누어지고 있습니다. 이것들은 Infrastructure as a Service, Platform as a Service, Software as a Service의 약자로 각자의 특성을 그대로 반영하고 있습니다.
IaaS, PaaS, SaaS를 나누는 기준은 어느 서비스 영역까지 클라우드 회사가 제공하느냐입니다. 클라우드는 인터넷을 통해 자원을 제공하는데 소프트웨어 통째로 제공할 수도 있고 단지 스토리지만 제공할 수도 있습니다.
IaaS의 경우 Infrastructure, 즉 스토리지나 서버 등의 인프라서비스를 제공하게 되고 PaaS는 플랫폼, SaaS는 소프트웨어를 제공합니다. 한국에서는 네이버의 N드라이브같은 스토리지 서비스가 IaaS에 속하는 예이며 미국에서는 아마존의 AWS 서비스가 유명합니다. PaaS는 플랫폼을 제공하고 있는 서비스로 어플리케이션을 개발하는 플랫폼을 제공하는 회사로는 마이크로소프트와 구글이 자리하고 있습니다. 우리가 비교할 마이크로소프트의 애져와  구글의 앱엔진도 PaaS 영역에 속하는 서비스입니다. SaaS 영역에서는 현재 세일즈포스닷컴의 CRM 서비스가 가장 대표적인 예라 할 수 있습니다.





- Microsoft Azure & Google App Engine

효율적으로 클라우드 컴퓨팅 서비스를 활용했을 경우 회사는 비용을 절감하는 효과 뿐 아니라 필요한 서버의 크기를 예측하기 힘든 경우 유동적으로 관리할 수 있습니다. 특히 해외 진출을 희망하는 경우 현지에 따로 서버를 구축할 필요가 없기 때문에 적은 비용으로도 큰 효과를 누릴 수 있습니다. 특히 어플리케이션 개발을 염두에 두고 있는 회사 혹은 개인에게 PaaS는 새로운 방향이 될 수 있습니다. 마이크로소프트에서 만든 애저 서비스와 구글의 앱엔진 서비스는 모두 어플리케이션을 개발해서 올릴 수 있는 플랫폼을 제공하고 있는데 서로 지원하는 언어도 다를 뿐 아니라 연동되는 서비스도 다르기 때문에 각 플랫폼의 장단점을 따져보고 신중히 판단하는 것이 중요합니다.

구글 앱엔진 : http://code.google.com/appengine/
윈도우 애저 : http://www.microsoft.com/windowsazure/




          .NET, WCF, PHP, Java 지원
          한달에 25시간, 500MB 무료 사용 가능
          시간당 $0.12, 1GB당 $0.15
          자동 서비스 매니지먼트 지원
          custom SSL 가능
          SQL Azure Database와 연동
          Windows Azure CDN의 지원으로 속도 보장
          현재 한국은 런칭되지 않아 외국 계정을 사용해야함
          Visual Studio와의 연동성(Azure Tool과 SDK 제공)





      
               Python, Java 지원
               하루당 6.5시간, 1GB 무료 사용 가능
               시간당 $0.10, 1GB당 $0.15
               구글앱스와 연동 가능
               30초 타임아웃 제한
               싱글 쓰레드만 가능






위의 비교는 가장 차이나는 부분을 중점으로 정리한 것입니다. 애저와 앱엔진을 비교했을 때 일단 가장 눈에 띄는 것은 지원 언어의 차이입니다. 개발자에 따라 선호하는 언어가 다를 뿐 아니라 어떤 어플리케이션을 개발하느냐에 따라 다른 언어를 쓸 수 있기 때문에 이는 플랫폼 선택에 중요 요소가 될 것입니다.
구글의 앱엔진은 애저에 비해 무료 제공이 많고 시간당 가격에서 $0.02의 차이가 있기 때문에 가격적인 면에서 메리트가 있으며 애저는 사용하려면 따로 외국 계정을 만들어야 하는 것과 달리 앱엔진은 기존의 구글 계정과 핸드폰 인증을 통해 이용할 수 있기 때문에 시작하기는 비교적 쉽다고 할 수 있습니다.
애저 서비스는 현재 한국에 런칭되지 않아 해외서비스를 통해 이용해야 하지만 앱엔진에 비해 기능적으로 많은 부분을 지원하고 있으며 특히 데이터베이스가 연동되기 때문에 개발에 있어 편리할 수 있습니다. Azure CDN 서비스를 통해서는 전세계 어디서나 일정 속도 이상을 보장받을 수 있습니다. 또한 마이크로소프트가 개발 분야에서 오랜 시간 제품을 제공하고 있는 만큼 앱엔진에 비해 기술적 신뢰도가 높다고 할 수 있습니다. 애저 서비스의 가장 큰 장점은 Visual Studio용 SDK를 지원하고 있어 가상 클라우드 환경에서 개발 및 테스트가 가능하다는 것입니다. 보다 익숙한 환경에서 편하게 작업할 수 있기 때문에 Azure에 대한 개발자의 선호도가 높을 것이라 예상됩니다.






Posted by 재재 

최근에 달린 댓글

최근에 받은 트랙백

글 보관함