기본 콘텐츠로 건너뛰기

Azure Big Data 시리즈 1 – Web Site with MongoDB

출처 : http://www.windowsazure.com/en-us/develop/net/tutorials/website-with-mongodb-vm/

이 시리즈에서는 Windows Azure 를 사용하는 것과 간단하게 웹 사이트를 구성하고 MongoDB를 활용하는 방법에 대해서 알아보도록 한다.

 

Windows Azure 설정

이미 Windows Azure 에 계정이 존재하고 운영 중이라면 생략해도 상관 없다. 이 부분은 Azure를 처음 사용하는 방법에 대해서 설명하는 부분이다.

  • http://www.windowsazure.com 에 접속하면 아래와 같은 화면을 볼 수 있다. 오른쪽 상단의 “무료 평가판”을 클릭하여 무료 계정을 90일간 사용해 볼 수 있다.
image
  • “무료 평가판”을 사용하기 위해서는 MS 라이브 계정이 존재하여야 한다. 이미 존재하는 계정이 있으면 로그인을 하고 다시 Azure 사이트로 이동하여 “무료 평가판” 을 다시 클릭하면 아래와 같은 Azure 청구 계정에 대한 설정 부분을 볼 수 있다. 개인 인증과 결제(신용카드 또는 핸드폰)에 대한 정보를 입력하며 된다. “무료 평가판”에서는 결제 비용이 0원으로 처리된다.

image

  • 청구 계정에 대한 처리가 완료되면 아래와 같은 화면을 볼 수 있다. 상단의 “미리 보기 기능” 을 클릭한다.

image

  • “미리 보기 기능” 화면은 크게 “모바일 서비스” 와 “VM 및 VM 네트워크” 메뉴를 볼 수 있다. 우선은 아래 쪽의 “MANAGE” 를 클릭하여 다음으로 진행한다.

image

  • 아래의 화면과 같이 왼쪽의 메뉴들 중에서 “WEB SITES”를 선택하고, “CREATE A WEB SITE”를 클릭한다.

image

  • 아래의 화면과 같이 웹 사이트의 URL 과 지역을 입력하고 “CREATE WEB SITE”를 클릭하면 웹 사이트틀 생성하게 된다. 당연히 샘플을 위한 웹 사이트 이므로 임의대로 URL을 입력하면 된다.

image

  • 웹 사이트 생성과정이 완료되면 아래의 화면과 같이 1개의 웹 사이트가 운영 중이라는 것을 확인할 수 있다. 맨 아래 쪽에는 작업을 위한 빠른 기능 버튼 들이 존재한다.

image

Create a virtual machine and Install MongoDB

여기서는 Azure 상에 VM 을 생성하고 MongoDB를 설치하고, 개발 환경을 구성하는 방법을 알아보도록 한다. 이미 환경 설정이 되어 있는 경우는 생략해도 된다.

참고로 MongoDB 는 인기 있는 오픈 소스로 고 가용성의 NoSQL 데이터베이스이다.

MongoDB를 VM에 설치하는 방법은 2 가지가 존재한다. 하나는 Windows Server 2008 R2 가 운영 중인 VM에 설치하는 방법이고, 또 다른 하나는 CentOS Linux 가 돌아가는 VM에 설치하는 방법이다. 여기서는 2 가지 방법 중에서 Windows Server 2008 R2 에 MongoDB를 설치하는 것을 기준으로 한다. CentOS Linux 는 개인적으로 진행해 보도록 하자.

Create Windows 2008 R2 VM
  • http://www.windowsazure.com 으로 이동하여 관리를 위한 로그인을 수행하고 "미리 보기 기능” 을 선택하고 “Virtual Machines & Virtual Networks” 섹션에서 “MANAGE” 를 클릭하도록 한다.
  • 아래의 화면과 같이 “VIRTUAL MACHINES”를 왼쪽 메뉴에서 선택하고, “CREATE A VIRTUAL MACHINE”을 클릭하도록 한다.

image

  • 아래의 화면과 같이 Windows 2008 R2 서버 이미지를 기반으로 VM 을 생성할 수 있으므로 관련된 정보를 설정하고 “CREATE VIRTUAL MACHINE” 을 클릭하도록 한다. 현재는 테스트를 위한 서버이므로 서버 size 는 small 로 설정하면 된다.

image

  • O/S 이미지를 이용해서 설치를 하므로 상당히 많은 시간의 소비가 발생한다. 생성과정이 완료되면 아래의 화면과 같이 VM 상태를 확인할 수 있다.

image

  • 이제 생성된 VM 에서 사용할 디스크를 연결하여야 한다. 생성된 VM을 선택하고 맨 아래 쪽의 기능 버튼 중에서 “ATTACH”를 선택하고 “Attach Empty Disk”를 선택한다.

image

  • 아래의 화면과 같이 기본적인 VM 정보 아래에 DISK 의 크기를 지정하는 부분에 테스트용이므로 5G 정보를 지정하도록 한다.

image

  • 서버를 갱신(Update) 하는 과정이 진행된다. 진행이 완료되면 VM 정보에서 VM 이름을 클릭하면 현재 구동 중인 VM 정보와 연결된 OS 디스크와 DATA 디스크 연결 상태를 확인할 수 있다.

image

지금까지로 해서 VM 에 Windows 2008 R2 서버의 설치가 완료 되었다. 서버의 설정은  “원격 데스크탑 연결” 을 이용해서 처리하게 된다.

Connect VM using Remote Desktop and Setting
  • Azure Management 화면에서 맨 아래쪽의 “Connect” 를 클릭하면 원격 접속을 위한 RDP 파일을 다운로드 할 수 있다.

image

  • 다운로드된 RDP 파일을 더블클릭하거나 “%WINDIR%\system32\mstsc.exe” 를 실행하여 연결하고, 설정했던 Administrator 사용자로 로그인을 한다.
  • “Server Manager > Storage > Disk Management” 를 선택하면 5G 로 추가했던 디스크가 초기화가 필요하다는 메시지를 볼 수 있다. “OK”를 클릭하고 “Simple Volume” 으로 생성하도록 한다. 파티션과 포맷 등은 기본 설정 또는 원하는 데로 처리하도록 한다.

image

image

Install and run MongoDB on VM

위에서 설정한 VM 상에 MongoDB를 설치하도록 한다. 설치할 때 주의할 점은 MongoDB 의 보안 기능에 인증과 IP 주소 바인딩 부분은 기본적으로 활성화되어 있지 않으므로 MongoDB를 적용할 때는 활성화 시켜 주어야 한다. (이 부분은 여기를 참고하도록 한다)

  • 원격 데스크 톱에서 브라우저를 실행하고 “Tools > Internet Options”를 선택하고 열린 화면에서 “Security” 탭에서 “Trustred Sites” 에 “http://*.mongodb.org” 를 추가하도록 한다.

image

  • 여기를 통해서 MongoDB 를 다운로드 한다. 다운로드 대상은 “Windows 64-bit” 로 설정된 항목들 중에서 “Production Release 2.2.2” 버전의 링크가 “*2008R2+” 로 표시된 것을 받으면 된다. 설치형식이 아닌 압축 형식이므로 특정 폴더에 압축을 해제하면 된다.
  • MongoDB 데이터와 로그 파일을 생성하여야 하므로 데이터 디스크로 추가한 F 드라이브에 “F:\MongoData”, “F:\MongoLogs” 라는 폴더를 생성한다. (경로와 폴더 명은 맘대로 생성해도 된다)
  • 이제 MongoDB를 실행한다. 실행은 압축을 해제한 폴더로 가서 “bin” 폴더 밑에서 다음과 같은 명령을 실행하며 된다.

image

mongod.exe 로 서버가 기동되며 모든 로그 정보는 “–logpath” 로 지정된 파일로 출력이 되고, 저널 파일들을 할당하고, 연결에 대한 수신처리를 하므로 몇 분 정도의 시간이 소비된다. 위의 실행 명령은 다음과 같다. (MongoDB 가 실행되면 최초에 구성되는 데이터가 존재하므로 디스크 사이즈가 최소한 5G 정도는 되어야 한다)

C:\mongodb\bin>mongod --dbpath F:\MongoData --logpath F:\MongoLogs\mongolog.log




  • MongoDB 에 대한 관리자 명령을 실행하기 위해서는 또 다른 명령 창을 열고 다음과 같은 명령을 실행하여 insert 문장에 따라서 데이터베이스가 생성된 것을 확인해 보도록 한다.
C:\mongodb\bin> mongo
> db
test
> db.foo.insert({a:1})
> db.foo.find()
{ “_id” : ObjectId(“5100fcbc3dd01cbfd1e5bdde”), “a” : 1 }
> show dbs
...
> show collections
...
show > help



image



  • 옵션이지만, mongod.exe 는 윈도우 서비스로 설치되고, 실행되는 것을 지원하고 있다. 이 작업을 처리하는 명령은 다음과 같다.
C:\mongodb\bin> mongod.exe --logpath "C:\mongodb\logs\logfile.log" --logappend --dbpath "C:\data" --install



위의 명령이 수행되면 서비스 이름이 “Mongo DB” 인 서비스가 생성이 된다. 서비스로 구동되는 경우는 출력이 화면으로 처리되지 않으므로 반드시 logpath를 특정 파일로 지정하도록 하고 서비스가 재 시작되는 시점에 로그가 추가되어 운영될 수 있도록 logppend 옵션을 지정하도록 한다. 윈도우 서비스 설정에 대한 좀 더 자세한 옵션 정보들은 여기를 참고하도록 한다.



  • MongoDB 가 설치과정이 완료되었으면 외부에서 접속이 될 수 있도록 방화벽을 열어 주어야 한다. “시작 > 관리도구 > 윈도우 방화벽” 을 실행하고 “Inbound Rule” 을 새로 생성하고 Port 는 27017 로 지정하도록 한다.

Windows Firewall


Windows Firewall


Windows Firewall


Windows Firewall


Windows Firewall


Windows Firewall



  • 이제 원격에서 접속 요청을 받아들일 EndPoint 를 설정해 주어야 한다. Azure 의 관리 포탈에서 “Virtual Machines” 메뉴를 클릭하고 오른쪽 화면의 상단 메뉴 중에서 “ENDPOINTS”를 클릭한 후에 아래쪽의 빠른 메뉴에서 “ADD ENDPOIINT”를 클릭한다. 위에서 방화벽을 설정했던 포트를 지정해 주면 된다.

image


image


image


여기까지로 해서 Azure 설정과 MongoDB 의 설치와 환경 설정 부분까지를 작업하였다. MongoDB 에 대한 좀 더 자세한 사항은 여기를 참고하면 된다.


Set up the development environment

개발 환경은 VS 2010 이나 VS 2012 를 사용하도록 한다. 그리고 Web Platform Installer 를 이용하여 ASP.NET MVC 3 Tools Update 를 설치하도록 한다. .NET 개발 환경은 기본적으로 설정할 수 있다고 가정하고 따로 설명하지 않는다.


Create and run the My Task List ASP.NET MVC Application on your development computer
























ASP.NET MVC 어플리케이션을 이용하여 Azure 상의 VM 에서 구동되고 있는 MongoDB 에 연결하여 Task 정보를 보여주는 부분을 작성하도록 한다.


Create the application

Visual Studio 2012 를 실행하고 아래의 화면과 같이 ASP.NET MVC 3 웹 어플리케이션을 생성하고, 프로젝트 명은 “MyTaskListApp”라고 지정한다.


image


ASP.NET MVC 3 프로젝트 템플릿에서는 “인터넷 응용 프로그램” 을 선택하고, 뷰 엔진은 “Razor” 를 선택하고, “HTML5 의미 체계 태그 사용”을 선택하도록 한다.


image


Install the MongoDB C# driver

생성된 프로젝트에서 MongoDB 를 연결하여 사용하기 위해서는 NuGet 에서 제공하고 driver를 설치하여야 한다.



  • 솔루션 탐색기에서 “참조”를 선택하고 컨텍스트 메뉴에서 “NuGet 패키지 관리…” 를 선택한다.

image



  • NuGet 패키지 관리 화면에서 아래와 같이 “mongocsharpdriver” 를 검색하고 설치하도록 한다.

image



  • 설치가 완료되면 프로젝트의 “참조” 항목에 아래의 화면과 같이 MongoDB 연결을 위한 라이브러리가 추가된 것을 확인할 수 있다.

image


Add a Model

솔루션 탐색기에서 “Models” 폴더를 선택하고 컨텍스트 메뉴에서 “추가 > 클래스” 를 클릭하고 클래스 명은 “TaskModel” 이라고 지정한다.


image


생성된 “TaskModel.cs” 파일의 내용을 아래와 같이 구성하도록 한다.


   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using MongoDB.Bson.Serialization.Attributes;
   6:  using MongoDB.Bson.Serialization.IdGenerators;
   7:   
   8:  namespace MyTaskListApp.Models
   9:  {
  10:      public class Task
  11:      {
  12:          [BsonId(IdGenerator = typeof(CombGuidGenerator))]
  13:          public Guid Id { get; set; }
  14:   
  15:          [BsonElement("Name")]
  16:          public string Name { get; set; }
  17:   
  18:          [BsonElement("Category")]
  19:          public string Category { get; set; }
  20:   
  21:          [BsonElement("Date")]
  22:          public DateTime Date { get; set; }
  23:   
  24:          [BsonElement("CreatedDate")]
  25:          public DateTime CreatedDate { get; set; }
  26:      }
  27:  }

Add the Data Access Layer

솔루션 탐색기에서 프로젝트를 선택하고 컨텍스트 메뉴에서 새 폴더를 추가하고 “DAL” 이라고 명칭을 설정한 후에 “Dal.cs” 클래스를 추가하도록 한다.


생성된 Dal.cs 클래스의 내용을 아래와 같이 구성한다. (코드는 아직 최적화 및 기능 모듈화가 완전히 처리된 것은 아니다)


   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using MongoDB.Driver;
   6:  using MyTaskListApp.Models;
   7:   
   8:  namespace MyTaskListApp.DAL {
   9:      public class Dal : IDisposable {
  10:          #region Fields
  11:          private MongoServer mongoServer = null;
  12:          private bool disposed = false;
  13:   
  14:          // VM 에서 설정한 DNS 명 또는 IP Address 를 설정하도록 한다.
  15:          // 예) mongodb://W8R2.cloudapp.net
  16:          private string connectionString = "mongodb://W8R2.cloudapp.net";
  17:   
  18:          // 데이터베이스 이름은 "Tasks" 이며, Collection 은 "TaskList" 라고 사용한다.
  19:          // 존재하지 않는 경우라면 자동으로 생성된다.
  20:          private string dbName = "Tasks";
  21:          private string collectionName = "TasksList";
  22:          #endregion
  23:   
  24:          #region Constructors & Destructors
  25:          public Dal() {
  26:          }
  27:   
  28:          protected virtual void Dispose(bool disposing) {
  29:              if (!this.disposed) {
  30:                  if (disposing) {
  31:                      if (this.mongoServer != null) this.mongoServer.Disconnect();
  32:                  }
  33:              }
  34:              this.disposed = true;
  35:          }
  36:          #endregion
  37:   
  38:          #region Methods
  39:          private MongoCollection<Task> getTasksCollection() {
  40:              MongoServer server = MongoServer.Create(this.connectionString);
  41:              MongoDatabase database = server[this.dbName];
  42:              MongoCollection<Task> todoTaskCollection = database.GetCollection<Task>(this.collectionName);
  43:              return todoTaskCollection;
  44:          }
  45:   
  46:          private MongoCollection<Task> GetTasksCollectionForEdit() {
  47:              MongoServer server = MongoServer.Create(this.connectionString);
  48:              MongoDatabase database = server[this.dbName];
  49:              MongoCollection<Task> todoTaskCollection = database.GetCollection<Task>(this.collectionName);
  50:              return todoTaskCollection;
  51:          }
  52:   
  53:          // MongoDB 서버로 부터 모든 Task Item 들을 반환한다.
  54:          public List<Task> GetAllTasks() {
  55:              try {
  56:                  MongoCollection<Task> collection = this.getTasksCollection();
  57:                  return collection.FindAll().ToList<Task>();
  58:              } catch (MongoConnectionException) {
  59:                  return new List<Task>();
  60:              }
  61:          }
  62:   
  63:          // MongoDB 에 새로운 Task Item을 생성하고 컬랙션에 추가한다.
  64:          public void CreateTask(Task task) {
  65:              MongoCollection<Task> collection = GetTasksCollectionForEdit();
  66:              try {
  67:                  collection.Insert(task, SafeMode.True);
  68:              } catch (MongoCommandException ex) {
  69:                  string msg = ex.Message;
  70:              }
  71:          }
  72:          #endregion
  73:   
  74:          #region Implementations of IDisposable
  75:          public void Dispose() {
  76:              this.Dispose(true);
  77:              GC.SuppressFinalize(this);
  78:          }
  79:          #endregion
  80:      }
  81:  }




위의 코드 16번째 라인을 보면 MongoDB Connection String 설정 부분이 있다. 이 부분은 각자 VM 에서 설정했던 내용으로 변경해서 사용하면 된다. 만일 EndPoint 등에 사용할 포트를 변경하였거나 다른 설정 부분이 존재하는 경우는 여기를 통해서 ConnectionString 을 조정하는 방법에 대해서 검토하도록 한다.


Add a Controller

솔루션 탐색기에서 “Controllers\HomeController.cs” 파일을 선택하고 아래와 같은 코드로 변경하도록 한다.


   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.Mvc;
   6:  using MyTaskListApp.DAL;
   7:  using MyTaskListApp.Models;
   8:   
   9:  namespace MyTaskListApp.Controllers
  10:  {
  11:      public class HomeController : Controller, IDisposable {
  12:          #region Fields
  13:   
  14:          private Dal dal = new Dal();
  15:          private bool disposed = false;
  16:   
  17:          #endregion
  18:   
  19:          #region Constructors & Destructors
  20:   
  21:          new protected virtual void Dispose(bool disposing) {
  22:              if (!this.disposed) {
  23:                  if (disposing) this.dal.Dispose();
  24:              }
  25:              this.disposed = true;
  26:          }
  27:   
  28:          #endregion
  29:   
  30:          #region Action Methods
  31:   
  32:          // GET: /Task/
  33:          public ActionResult Index() {
  34:              return View(dal.GetAllTasks());
  35:          }
  36:   
  37:          // GET: /Task/Create
  38:          public ActionResult Create() {
  39:              return View();
  40:          }
  41:   
  42:          // POST: /Task/Create
  43:          [HttpPost]
  44:          public ActionResult Create(Task task) {
  45:              try {
  46:                  dal.CreateTask(task);
  47:                  return RedirectToAction("Index");
  48:              } catch {
  49:                  return View();
  50:              }
  51:          }
  52:   
  53:          public ActionResult About() {
  54:              return View();
  55:          }
  56:   
  57:          #endregion
  58:   
  59:          #region IDisposable 멤버
  60:   
  61:          void IDisposable.Dispose() {
  62:              this.Dispose(true);
  63:              GC.SuppressFinalize(this);
  64:          }
  65:   
  66:          #endregion
  67:      }
  68:  }



Set up the site style

솔루션 탐색기에서 “Views\Shared\_Layout.cshtml” 파일을 열고 아래와 같이 타이틀 부분을 변경 하도록 한다.


   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8" />
   5:      <title>@ViewBag.Title</title>
   6:      <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
   7:      <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
   8:      <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
   9:  </head>
  10:  <body>
  11:      <div class="page">
  12:          <header>
  13:              <div id="title">
  14:                  <h1>My Task List Application</h1>
  15:              </div>
  16:              <div id="logindisplay">
  17:                  @Html.Partial("_LogOnPartial")
  18:              </div>
  19:              <nav>
  20:                  <ul id="menu">
  21:                      <li>@Html.ActionLink("홈", "Index", "Home")</li>
  22:                      <li>@Html.ActionLink("정보", "About", "Home")</li>
  23:                  </ul>
  24:              </nav>
  25:          </header>
  26:          <section id="main">
  27:              @RenderBody()
  28:          </section>
  29:          <footer>
  30:          </footer>
  31:      </div>
  32:  </body>
  33:  </html>



메뉴 정보를 변경하기 위해서는 “Views\Home\Index.cshtml” 파일을 열고 아래와 같이 변경하도록 한다.


   1:  @model IEnumerable<MyTaskListApp.Models.Task>
   2:   
   3:  @{
   4:      ViewBag.Title = "My Task List";
   5:  }
   6:   
   7:  <h2>My Task List</h2>
   8:   
   9:  <table border="1">
  10:      <tr>
  11:          <th>Task</th>
  12:          <th>Category</th>
  13:          <th>Date</th>
  14:      </tr>
  15:   
  16:      @foreach (var item in Model) {
  17:          <tr>
  18:              <td>
  19:                  @Html.DisplayFor(modelItem => item.Name)
  20:              </td>
  21:              <td>
  22:                  @Html.DisplayFor(modelItem => item.Category)
  23:              </td>
  24:              <td>
  25:                  @Html.DisplayFor(modelItem => item.Date)
  26:              </td>
  27:          </tr>
  28:      }
  29:  </table>
  30:   
  31:  <div>
  32:      @Html.Partial("Create", new MyTaskListApp.Models.Task())
  33:  </div>



위의 Razor 코드에서 가장 마지막에 지정한 Partial 처리를 위해서는 솔루션 탐색기에서 “Views\Home\” 폴더를 선택하고 View 를 “Create” 라는 이름을 추가하고 아래와 같이 코드를 구성하도록 한다.


   1:  @model MyTaskListApp.Models.Task
   2:   
   3:  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
   4:  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
   5:  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
   6:   
   7:  @using(Html.BeginForm("Create", "Home")) {
   8:      @Html.ValidationSummary(true)
   9:      <fieldset>
  10:          <legend>New Task</legend>
  11:          <div class="editor-label">
  12:              @Html.LabelFor(model => model.Name)
  13:          </div>
  14:          <div class="editor-field">
  15:              @Html.EditorFor(model => model.Name)
  16:              @Html.ValidationMessageFor(model => model.Name)
  17:          </div>
  18:          <div class="editor-label">
  19:              @Html.LabelFor(model => model.Category)
  20:          </div>
  21:          <div class="editor-field">
  22:              @Html.EditorFor(model => model.Category)
  23:              @Html.ValidationMessageFor(model => model.Category)
  24:          </div>
  25:          <div class="editor-label">
  26:              @Html.LabelFor(model => model.Date)
  27:          </div>
  28:          <div class="editor-field">
  29:              @Html.EditorFor(model => model.Date)
  30:              @Html.ValidationMessageFor(model => model.Date)
  31:          </div>
  32:          <p>
  33:              <input type="submit" value="Create" />
  34:          </p>
  35:      </fieldset>
  36:  }




Test the local deployment
지금까지 작성된 것을 F5 를 눌러서 실행해 보도록 하자. 아래와 같이 실행된 것을 확인할 수 있다. 그리고 새로운 Task 를 추가하여 조회할 수 있다.
image

Deploy the ASP.NET Application to a Windows Azure web site

현재는 개발 장비와 VM 간의 통로가 외부 네트워크로 연결되기 때문에 성능이 별로 좋지 않다. 이제는 이 어플리케이션을 Azure 에 생성해 놓은 웹 사이트에 배포를 해 보도록 한다.

Create a Windows Azure web site


  • 브라우저를 통해서 Windows Azure 관리 포탈에 접속한다.
  • 가장 아래쪽의 빠른 기능 버튼들 중에서 “NEW” 를 선택하고 웹 사이트를 생성하도록 한다. 위에서 이미 생성한 경우는 생략하고, 새롭게 생성하는 경우는 URL 과 지역 정보를 입력하고 생성하면 된다.

Deploy the ASP.NET Application to the web site using Git


  • Azure 관리 포탈에서 생성한 웹 사이트의 이름을 클릭하면 DASHBOARD 페이지로 이동하게 된다.
  • 오른쪽 중간에 “quick glance” 메뉴에서 “Set up Git publishing” 를 클릭하도록 한다.

image



  • Git 와 FTP 는 Live ID 를 사용하지 않는다. 따라서 새로운 사용자 아이디와 비밀번호를 설정해 주어야 한다.

image



  • Git 저장소가 생성되는 과정이 진행이 되고, 생성된 후에 저장소에 대한 URL 이 나타나게 된다.

image



  • 생성된 Git 저장소 정보에서 “Push my local files to Windows Arure”를 클릭하도록 한다. 그러면 Git 설정을 위한 처리 순서를 볼 수 있다.

image



  • Git 가 이미 설치되어 있지 않은 경우는 순서 1 의 “Get it here” 를 클릭하여 Git 를 다운로드 하고 설치하도록 한다. 설치 후에 원활한 사용을 위해서 환경 변수에 설치된 Git 폴더 경로 밑의 bin 을 등록하도록 한다.
  • 설치 과정이 완료되었으면 MyTaskListApp 가 존재하는 경로로 이동하여 배포할 폴더를 선택하고 컨텍스트 메뉴에서 “Git Init” 를 실행하도록 한다. 실행이 되면 해당 폴더의 아래에 “.git” 라는 숨김 폴더가 생긴 것을 확인할 수 있다.
  • 또 다른 방법은 해당 폴더에서 컨텍스트 메뉴의 “Git GUI”를 이용하는 방법이다. 이를 선택하면 다음과 같은 화면을 볼 수 있다.

image



  • Command 창에서 다음과 같이 처리하여 로컬에 생성한 파일들을 초기 Commit 버전으로 생성하도록 한다.
> git add .
> git commit -m "initial commit"




  • 이제 원격에 존재하는 Azure 저장소에 현재 로컬의 파일을 전송하여야 한다. 전송하는 방법은 아래와 같이 명령을 처리한다. 마지막 명령인 “git push azure master” 를 실행하면 접속 패스워드를 물어보게 된다. 정상적으로 입력하면 배포가 진행된다.
> git remote add azure https://<azure repository url>
> git push azure master




  • 처리가 완료된 후에 Azure 관리 포탈에서 Deployment 를 확인해 보면 처리된 내용을 볼 수 있다.

 image



  • 이제 배포가 완료되었으므로 Azure web site 의 주소를 이용해서 브라우저에서 실행하면 동작하는 화면을 볼 수 있다.

image











댓글