Создание сайта Windows Azure Web Sites с подключением к MongoDB в виртуальной машине c помощью Git

项目
08/23/2012

С помощью Git можно развернуть приложение ASP.NET на веб-сайте Windows Azure. В этом руководстве рассказывается, как создать простое интерфейсное приложение для списка задач ASP.NET MVC, которое подключается к базе данных MongoDB, исполняемой на виртуальной машине на платформе Windows Azure. MongoDB — это популярная высокопроизводительная база данных NoSQL с открытым исходным кодом. После запуска и тестирования приложения ASP.NET на компьютере разработчика вы загрузите приложение на веб-сайт Windows Azure с помощью Git.

Создаваемое приложение ASP.NET будет выглядеть следующим образом.

clip_image002[4]

Общие сведения

О чем пойдет речь в данном руководстве:

Базовые знания

При изучении данного материала необходимо (но не обязательно) разбираться в следующих областях.

Драйвер на C# для MongoDB. Дополнительные сведения о разработке приложений на C# для MongoDB приведены на веб-сайте CSharp Language Center.
Платформа веб-приложений ASP .NET. Более подробные сведения можно найти на веб-сайте ASP.net.
Платформа веб-приложений ASP .NET MVC 3.0. Более подробные сведения можно найти на веб-сайте ASP.NET MVC 3.
Windows Azure. Начать знакомство с платформой можно на веб-сайте Windows Azure.

Подготовка

В этом разделе рассказывается о создании виртуальной машины на платформе Windows Azure, установке MongoDB и настройке среды разработки.

Создание виртуальной машины и установка MongoDB

Предполагается, что вы уже создали виртуальную машину на платформе Windows Azure. Теперь на нее нужно установить MongoDB.

Сведения о создании виртуальной машины Windows и установке MongoDB см. в статье «Установка MongoDB на виртуальной машине, работающей под управлением Windows Server 2008 R2 на платформе Windows Azure».
Сведения о создании виртуальной машины Linux и установке MongoDB см. в статье «Установка MongoDB на виртуальной машине, работающей под управлением CentOS Linux на платформе Windows Azure».

После создания виртуальной машины на платформе Windows Azure и установки MongoDB необходимо запомнить DNS-имя виртуальной машины (например, testlinuxvm.cloudapp.net) и внешний порт MongoDB, указанный в конечной точке. Эта информация потребуется нам позднее.

Регистрация для использования функции предварительного просмотра Windows Azure Web Sites

Чтобы создать веб-сайт Windows Azure, нужно зарегистрироваться для использования функции предварительного просмотра веб-сайтов Windows Azure. Кроме того, после регистрации можно получить бесплатную пробную учетную запись Windows Azure.

Откройте веб-браузер и перейдите на веб-сайт https://www.windowsazure.com.

Чтобы приступить к работе с помощью бесплатной учетной записи, щелкните в верхнем правой углу Free Trial и выполните указанные действия. Для проверки личности может потребоваться указать номер кредитной карты или мобильного телефона. Счет при этом не выставляется.

clip_image004[4]

Включение веб-сайта Windows Azure

Перейдите на страницу https://account.windowsazure.com/ и выполните вход с помощью учетной записи Windows Azure. Щелкните элемент preview features, чтобы увидеть доступные варианты предварительного просмотра.

clip_image006[4]

3. Выполните прокрутку до пункта Web Sites и нажмите кнопку try it now.

clip_image008[4]

4. Выберите подписку и установите флажок.

clip_image010[4]

Настройка среды разработки

В этом руководстве мы используем Microsoft Visual Studio 2010, однако можно работать также с Microsoft Visual Web Developer 2010 Express с пакетом обновления SP1 (это бесплатная версия Microsoft Visual Studio). Сначала убедитесь, что на локальном компьютере разработчика установлены необходимые компоненты, указанные ниже. Чтобы установить все компоненты сразу, щелкните ссылку Web Platform Installer. Кроме того, компоненты можно установить по отдельности, выполнив переход по ссылкам:

Если вместо Visual Studio 2010 вы используете Visual Web Developer 2010, установите необходимые компоненты, щелкнув следующую ссылку: Необходимые компоненты для Visual Studio Web Developer Express SP1

Создание и запуск приложения My Task List ASP.NET на компьютере разработчика

В этом разделе вы создадите приложение My Task List ASP.NET с помощью Visual Studio. Кроме того, вы запустите приложение локально в экземпляре MongoDB, который создан на виртуальной машине, размещенной на платформе Windows Azure.

Создание приложения

Запустите Visual Studio и на странице Start выберите New Project.

В левой части выберите элементы Visual C# и Web , а затем в списке шаблонов –– ASP.NET MVC 3 Web Application. Присвойте проекту имя MyTaskListApp и нажмите кнопку OK.

clip_image012

В диалоговом окне New ASP.NET MVC 3 Project выберите Internet Application. Установите флажок Use HTML5 markup и оставьте Razor в качестве системы просмотра по умолчанию.

Нажмите кнопку OK.

clip_image014

Установка драйвера на C# для MongoDB

MongoDB обеспечивает клиентскую поддержку приложений на C# при помощи драйвера, который нужно установить на локальном компьютере разработчика. Драйвер на C# можно получить с помощью средства NuGet.

Чтобы установить драйвер на C# для MongoDB, выполните следующие действия.

В Solution Explorer щелкните правой кнопкой мыши ссылки на проект MyTaskListApplication и выберите команду Add Library Package Reference...

clip_image016

В окне Add Library Package Reference щелкните элемент Online и найдите драйвер mongocsharpdriver. Нажмите кнопку Install, чтобы установить драйвер.

clip_image018

Щелкните I Accept, чтобы принять условия лицензионного соглашения 10gen, Inc.. После установки драйвера нажмите кнопку Close.

clip_image020

Драйвер на C# для MongoDB установлен. К проекту добавлены ссылки на библиотеки MongoDB.Driver.dll и MongoDB.Bson.dll.

clip_image022

Добавление модели

В Solution Explorer щелкните правой кнопкой мыши папку Models, затем Add и новый Class TaskModel.cs. В файле TaskModel.cs замените существующий код следующим:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MongoDB.Bson.Serialization.Attributes;
using MongoDB.Bson.Serialization.IdGenerators;
using MongoDB.Bson;

namespace MyTaskListApp.Models
{
    public class Task
    {
        [BsonId(IdGenerator = typeof(CombGuidGenerator))]
        public Guid Id { get; set; }

[BsonElement("Name")]
public string Name { get; set; }

[BsonElement("Category")]
public string Category { get; set; }

[BsonElement("Date")]
public DateTime Date { get; set; }

[BsonElement("CreatedDate")]
public DateTime CreatedDate { get; set; }

}
}

Добавление уровня доступа к данным

В Solution Explorer щелкните правой кнопкой мыши проект MyTaskListApp и выберите команду Add для добавления новой папки с именем DAL. Правой кнопкой мыши щелкните папку DAL и выберите команду Add, чтобы добавить новый файл класса с именем Dal.cs. В файле Dal.cs замените существующий код следующим:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MyTaskListApp.Models;
using MongoDB.Driver;
using System.Configuration;

namespace MyTaskListApp
{
    public class Dal : IDisposable
    {
        private MongoServer mongoServer = null;
        private bool disposed = false;

        // To do: update the connection string with the DNS name
        // or IP address of your server.
        //For example, "mongodb://testlinux.cloudapp.net"
        private string connectionString = "mongodb://<vm-dns-name>";

        // This sample uses a database named "Tasks" and a
        //collection named "TasksList". The database and collection
        //will be automatically created if they don't already exist.
        private string dbName = "Tasks";
        private string collectionName = "TasksList";

        // Default constructor.
        public Dal()
        {
        }

        // Gets all Task items from the MongoDB server.
        public List<Task> GetAllTasks()
        {
            try
            {
                MongoCollection<Task> collection = GetTasksCollection();
                return collection.FindAll().ToList<Task>();
            }
            catch (MongoConnectionException)
            {
                return new List<Task>();
            }
        }

        // Creates a Task and inserts it into the collection in MongoDB.
        public void CreateTask(Task task)
        {
            MongoCollection<Task> collection = GetTasksCollectionForEdit();
            try
            {
                collection.Insert(task, SafeMode.True);
            }
            catch (MongoCommandException ex)
            {
                string msg = ex.Message;
            }
        }

        private MongoCollection<Task> GetTasksCollection()
        {
            MongoServer server = MongoServer.Create(connectionString);
            MongoDatabase database = server[dbName];
            MongoCollection<Task> todoTaskCollection = database.GetCollection<Task>(collectionName);
            return todoTaskCollection;
        }

        private MongoCollection<Task> GetTasksCollectionForEdit()
        {
            MongoServer server = MongoServer.Create(connectionString);
            MongoDatabase database = server[dbName];
            MongoCollection<Task> todoTaskCollection = database.GetCollection<Task>(collectionName);
            return todoTaskCollection;
        }

# region IDisposable

        public void Dispose()
        {
            this.Dispose(true);
            GC.SuppressFinalize(this);
        }

        protected virtual void Dispose(bool disposing)
        {
            if (!this.disposed)
            {
                if (disposing)
                {
                    if (mongoServer != null)
                    {
                        this.mongoServer.Disconnect();
                    }
                }
            }

this.disposed = true;
}

# endregion
}
}

Добавление контроллера

Откройте файл Controllers\HomeController.cs в Solution Explorer и замените существующий код следующим:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyTaskListApp.Models;
using System.Configuration;

namespace MyTaskListApp.Controllers
{
    public class HomeController : Controller, IDisposable
    {
        private Dal dal = new Dal();
        private bool disposed = false;
        //
        // GET: /Task/

        public ActionResult Index()
        {
            return View(dal.GetAllTasks());
        }

//
// GET: /Task/Create

        public ActionResult Create()
        {
            return View();
        }

//
// POST: /Task/Create

        [HttpPost]
        public ActionResult Create(Task task)
        {
            try
            {
                dal.CreateTask(task);
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        public ActionResult About()
        {
            return View();
        }

# region IDisposable

        new protected void Dispose()
        {
            this.Dispose(true);
            GC.SuppressFinalize(this);
        }

        new protected virtual void Dispose(bool disposing)
        {
            if (!this.disposed)
            {
                if (disposing)
                {
                    this.dal.Dispose();
                }
            }

this.disposed = true;
}

# endregion

}
}

Настройка стиля сайта

Чтобы изменить заголовок в верхней части страницы, откройте файл Views\Shared\_Layout.cshtml в Solution Explorer и замените существующий текст заголовка h1 следующим:

<h1>My Task List Application</h1>

Чтобы настроить меню Task List, откройте файл \Views\Home\Index.cshtml и замените существующий код следующим:

@model IEnumerable<MyTaskListApp.Models.Task>

@{
ViewBag.Title = "My Task List";
}

<table border="1">
    <tr>
        <th>Task</th>
        <th>Category</th>
        <th>Date</th>

</tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Date)
        </td>

</tr>
}

</table>
<div> @Html.Partial("Create", new MyTaskListApp.Models.Task())</div>
To add the ability to create a new task, right-click the Views\Home\ folder and Add a View. Name the view Create. Replace the code with the following:
@model MyTaskListApp.Models.Task

@using (Html.BeginForm("Create", "Home")) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New Task</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Category)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Category)
            @Html.ValidationMessageFor(model => model.Category)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Date)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Чтобы добавить возможность создания задачи, щелкните правой кнопкой мыши папку Views\Home\ и выберите команды Add и View. Присвойте представлению имя Create. Замените код следующим:

@model MyTaskListApp.Models.Task

@using (Html.BeginForm("Create", "Home")) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New Task</legend>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Solution Explorer должен выглядеть следующим образом:

clip_image024

Установка строки подключения к MongoDB

В Solution Explorer откройте файл DAL/Dal.cs. Найдите следующую строку кода:

private string connectionString = "mongodb://<vm-dns-name>";

Замените DNS-имя виртуальной машины, на которой запущена база данных MongoDB и которая была создана в разделе "Создание виртуальной машины и установка MongoDB" этого руководства. Чтобы узнать DNS-имя виртуальной машины, перейдите на портал управления Windows Azure, выберите Virtual Machines и найдите DNS Name.

Если виртуальная машина имеет DNS-имя testlinuxvm.cloudapp.net и MongoDB по умолчанию выполняет прослушивание порта 27017, то код строки подключения будет выглядеть следующим образом:

private string connectionString = "mongodb://testlinuxvm.cloudapp.net";

Если конечная точка виртуальной машины указывает другой внешний порт для MongoDB, то номер порта можно задать в строке подключения:

private string connectionString = "mongodb://testlinuxvm.cloudapp.net:12345";

Дополнительные сведения о строках подключения к MongoDB приведены в разделе "Подключения".

Тестирование локального развертывания

Чтобы запустить приложение на компьютере разработчика, в меню Debug выберите пункт Start Debugging или нажмите клавишу F5. Запустится веб-сервер разработки и откроется веб-браузер с домашней страницей приложения. Можно добавить новую задачу, которая будет добавлена также в базу данных MongoDB на виртуальной машине, развернутой на платформе Windows Azure.

clip_image026

Развертывание приложения ASP.NET на веб-сайте Windows Azure

В этом разделе вы создадите веб-сайт и развернете приложение My Task List ASP.NET с помощью Git.

Создание веб-сайта Windows Azure

В этом разделе вы создадите веб-сайт Windows Azure.

Откройте веб-браузер и перейдите к порталу управления Windows Azure (версия Preview). Войдите на портал с помощью учетной записи Windows Azure.

В нижней части страницы щелкните +New, затем — Web Site, а затем — Quick Create. Введите уникальный префикс для URL-адреса приложения. Выберите регион.

Щелкните Create Web Site.

clip_image028

Будет создан веб-сайт, он появится в списке Web sites.

clip_image030

Развертывание приложения ASP.NET на веб-сайте с помощью Git

В этом разделе вы развернете приложение My Task List с помощью Git.

В списке Web sites выберите имя веб-сайта, а затем щелкните Dashboard. Щелкните Set up Git publishing в нижней части страницы Dashboard для сайта mytasklistapp.

На странице New user name and password введите имя пользователя и пароль и поставьте флажок. Обратите внимание на инструкции на итоговой странице, поскольку они будут использоваться в следующем разделе.

Будет быстро создан репозиторий Git.

clip_image032

Выберите Push my local files to Windows Azure, чтобы отобразить инструкции по отправке кода на платформу Windows Azure. Инструкции выглядят приблизительно следующим образом.

clip_image034

Если система Git не установлена, сделайте это, воспользовавшись ссылкой Get it here на шаге 1.

После выполнения инструкций на шаге 2 зафиксируйте локальные файлы.

Добавьте удаленный репозиторий Windows Azure и отправьте файлы на веб-сайт Windows Azure согласно инструкциям на шаге 3.

После окончания развертывания появится следующее подтверждение:

clip_image036

Теперь к веб-сайту Windows Azure можно получить доступ. На странице Dashboard проверьте сайт и поле Site URL, чтобы найти URL-адрес своего сайта. После выполнения процедур данного руководства ваш сайт будет доступен по адресу: https://mytasklistapp.azurewebsites.net.

Сводные данные

Вы успешно развернули приложение ASP.NET на веб-сайте Windows Azure. Чтобы просмотреть сайт, щелкните ссылку в поле Site URL на странице Dashboard. Дополнительные сведения о разработке приложений на C# для MongoDB приведены на веб-сайте CSharp Language Center.

通过