company_banner

Готовим ASP.NET 5, выпуск №6: Continuous Deployment с Visual Studio Team Services — полное руководство

  • Tutorial
Вслед за замечательными анонсами с конференции Connect 2015 мы продолжаем знакомить вас со сценариями использования новых технологий и сервисов для организации непрерывной разработки и тестирования ваших приложений.

Недавно мы рассказывали о реализации непрерывных процессов разработки и тестирования с помощью Visual Studio Team Services (ранее Visual Studio Online). В статье подробно описывается как на базе репозиториев Git в Visual Studio Team Services организовать процесс разработки на базе Scrum и с помощью интеграции с Visual Studio обеспечить непрерывные процесс тестирования и разработки кода (Continuous Integration & Testing).


В этой статье мы рассмотрим следующий шаг в построении полного цикла DevOps – обеспечение непрерывного развертывания (Continuous Deployment) с помощью новых возможностей настраиваемых шаблонов сборки и публикации проектов в Visual Studio Team Services. Мы будем использовать проект на базе ASP.NET 5 и увидим как для таких проектов обеспечить полный цикл от редактирования кода до автоматической сборки и развертывания в облаке Azure (может быть любым местом).

aspnetcolumngithubСовет! Вы можете попробовать все самостоятельно или загрузив исходный код из GitHub https://github.com/vyunev/VsoCdDemo.

Предварительная настройка


Предполагается, что у вас уже создана учетная запись Visual Studio Team Services. Если это не так, то обратитесь к онлайн-руководству по регистрации.

Для начала со страницы загрузки компонент нового сборщика установите Windows-агент, который позволит собирать проекты Windows, Azure и другие проекты Visual Studio, а так же проекты Java и Android. Для установки вам потребуется перейти по адресу:

https://{your_account}.visualstudio.com/_admin/_AgentPool

и загрузить агент локально. После установки (скажем, в папку C:\Agent) необходимо запустить от имени администратора C:\Agent\ConfigureAgent.cmd. Другие шаги и подробности читайте по ссылке.

Создание проекта Visual Studio Team Services

В Visual Studio Team Services создайте командный проект, в моем случае – VsoCdDemo (рисунок 1).

image

Рис.1. – Создание командного проекта в Visual Studio Team Services

Подключение Visual Studio Team Services в Visual Studio 2015

В Visual Studio 2015 в панели Team Explorer подключитесь к вашему командному проекту (рисунок 2)

image

Рис. 2. – Выбор командного проекта

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

snip_20151118134039

Рис. 3. – Панель Team Explorer в Visual Studio 2015

Создание проекта в Visual Studio 2015

В Visual Studio 2015 создайте проект ASP.NET 5 Web Application, при создании снимите галочку “Host in the cloud” (рисунок 4).

snip_20151118133432

Рис. 4. – Создание проекта ASP.NET 5 Web Application в Visual Studio 2015

Проект будет создан и в фоне автоматически запустится процесс восстановления сборок, от которых он зависит. Запустите проект локально, чтобы убедиться, что сборка проходит нормально. Вы можете сделать первый коммит и отправить код на сервер. Для этого щелкнув правой кнопкой на решении в панели Solution Explorer выберите пункт Commit. Введите описание коммита (рисунок 5) и нажмите в ниспадающем меню действие Commit и Push,

image

Рис. 5. – Выполнение коммита и пуш в репозиторий

После коммита с действием пуш вы можете увидеть ваш код в репозитории Visual Studio Team Services перейдя на вкладку Code (рисунок 6).

image

Рис. 6. – Содержимое репозитория в Visual Studio Team Services

Пришло время настроить процесс непрерывной сборки и публикации в Azure (или любое другое место).

Настройка процесса сборки


В Visual Studio Team Services перейдите на вкладку Build и нажите кнопку Actions (зеленый плюс). В окне выберите Visual Studio в качестве шаблона определения сборки (рисунок 7).

image

Рис. 7. – Шаблоны определения сборки

В следующем окне (рисунок 8) убедитесь что выбран верный тип репозитория, сам репозиторий и перейдя по ссылке Manage убедитесь что у вас правильно настроен Агент сборки. Важно! Укажите галочкой на необходимость включения непрерывной интеграции – тогда после каждого чекина кода будет запускаться наш процесс сборки и публикации.

image

Рис. 8 – Настройка шаблона сборки

В итоге вы получите следующий настроенный порядок сборки вашего проекта (рисунок 9). В нем заранее определены следующие шаги: Visual Studio Build для сборки решения, шаг тестирования для запуска тестов, шаг публикации символьных файлов и шаг публикации результатов сборки.

image

Рис. 9. – Работа с шагами процесса сборки и публикации

Для нас с вами ценность представляет только первый шаг – Visual Studio Build, остальные три шага мы будет настраивать по своему, так что вы можете их удалить или выключить.

Давайте попробуем собрать наш проект, для этого выберите первый шаг и заполните параметры сборки (рисунок 10):

— выберите в качестве решения для сборки файл вашего проекта;

— укажите дополнительные аргументы сборки (учтите имя своего проекта):

/t:Build,FileSystemPublish /p:PublishConfiguration=$(BuildConfiguration) /p:PublishOutputPathNoTrailingSlash=$(Build.SourcesDirectory)\AspNetCdDemo\artifacts\bin\$(BuildConfiguration)\Publish

image

Рис. 10. – Настройка шага сборки

Нажмите на Save и затем на Queue Build для запуска сборки. Вы получите доступ к консоли выполнения команд сборщика, в которой будет происходить сборка. Увы наше решение не сможет собраться и вы увидите следующую ошибку (рисунок 11).

image

Рис. 11. – Результат сборки с ошибками

Ошибка с которой мы столкнулись – необходимость настройки среды DNX перед сборкой проекта. Для этого нам потребуется более тонкая настройка сборки.

Сборка ASP.NET 5


Для сборки проекта ASP.NET 5 необходимо предварительно настроить среду DNX и выполнить некоторые другие шаги, например, загрузить необходимые пакеты Nuget. В связи с этим нам требуется тонкая настройка процесса сборки проекта. Эти шаги можно описать в следующем скрипте PowerShell (учтите название своего проекта):

# bootstrap DNVM into this session. 
&{$Branch='dev';iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))}

# load up the global.json so we can find the DNX version 
$globalJson = Get-Content -Path $PSScriptRoot\global.json -Raw -ErrorAction Ignore | ConvertFrom-Json -ErrorAction Ignore

if($globalJson) 
{ 
    $dnxVersion = $globalJson.sdk.version 
} 
else 
{ 
    Write-Warning "Unable to locate global.json to determine using 'latest'" 
    $dnxVersion = "latest" 
}

# install DNX 
& $env:USERPROFILE\.dnx\bin\dnvm install $dnxVersion -Persistent

# run DNU restore on all project.json files 
& dnu restore $PSScriptRoot\src\AspNetCdDemo\project.json 2>1

Для использования этого скрипта нам необходимо добавить в решение в Visual Studio 2015 новый файл Prebuild.ps1 в папку Solution Items, скопируйте текст скрипта в этот файл.

Благодаря гибким возможностям нового механизма сборки Visual Studio Team Services мы можем добавлять разнообразные шаги в порядок сборщика, в том числе вызывать необходимые скрипты PowerShell. Вернитесь в определение сборки (рисунок 12)

image

Рис. 12. – Редактирование описания шагов сборки

И добавьте новый шаг для сборщика, вызвав окно добавления кнопкой “Add build step”. Просто пробегитесь по списку и убедитесь как много встроенных возможностей существует для определения сборки в Visual Studio Team Services (рисунок 13).

image

Рис. 13. – Галерея возможных шагов сборки

Выберите шаг PowerShell и добавьте его в процесс сборки. Перетащите шаг PowerShell вверх сделав его самым первым для того, чтобы задать очередность выполнения (рисунок 14). В настройках шага PowerShell укажите путь до скрипта: в моем случае это AspNetCdDemo/Prebuild.ps1.

image

Рис. 14. – Редактирование шага сборки PowerShell

Так как мы настраиваем DNX самостоятельно и восстанавливаем пакеты тоже самостоятельно, то в шаге Visual Studio Build снимите галочку “Restore NuGet Packages”.

Сохраните определение сборки.

Из Visual Studio 2015 отправьте добавленный скрипт Prebuild.ps1 коммитом и пушем в репозиторий. Пройдет пара минут и мы увидим как благодаря нашим шагам автоматически развертывает DNX и все зависимости, как загружаются и устанавливаются пакеты NuGet.

Однако сборка все равно завершилась с ошибкой (рисунок 15).

image

Рис. 15. – Сборка выполнилась с ошибкой

Это связано с тем, что сборка ASP.NET содержит задачи Gulp, который только что установился и еще не может быть использован. Просто запустить сборку еще раз, которая пройдет быстрее и уже без ошибок!

image

Рис. 16. – Выполнение сборки без ошибок

Итак мы организовали автоматическую сборку проекта на ASP.NET 5 в Visual Studio Team Services. Теперь давайте сделаем возможной непрерывную публикацию в Azure.

Непрерывная публикация в Azure Web App


Для публикации ASP.NET5-проекта в Azure нам потребуется создать пустой экземпляр сервиса Azure Web App. Я назвал его AzureCdDemo, вы должны будете назвать его по другому, имя должно быть уникальным. Воспользуйтесь новым порталом Azure, чтобы создать свой экземпляр Azure Web App (рисунок 17).

image

Рис. 17. – Создание Azure Web App в новом портале

Для непрерывной публикации приложения ASP.NET 5 в Azure мы напишем еще один скрипт PowerShell.

param($websiteName, $packOutput)

$website = Get-AzureWebsite -Name $websiteName

# get the scm url to use with MSDeploy.  By default this will be the second in the array 
$msdeployurl = $website.EnabledHostNames[1]

$publishProperties = @{'WebPublishMethod'='MSDeploy'; 
                        'MSDeployServiceUrl'=$msdeployurl; 
                        'DeployIisAppPath'=$website.Name; 
                        'Username'=$website.PublishingUsername; 
                        'Password'=$website.PublishingPassword}

$publishScript = "${env:ProgramFiles(x86)}\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Publish\Scripts\default-publish.ps1"

. $publishScript -publishProperties $publishProperties  -packOutput $packOutput

В Visual Studio 2015 добавьте в свой проект в папку Solutions Items новый файл PublishAspNet5Website.ps1 и скопируйте в него содержимое скрипта.

В списке шагов сборки добавьте еще один шаг, на этот раз — Azure PowerShell Script. Вам потребуется настроить параметры вашей подписки Azure для этого перейдите по ссылке Manage и добавьте новый сервис через New Service Endpoint (рисунок 18).

image

Рис. 18. – Ввод параметров подписки Azure

Для заполнения параметров выше вам потребуется информация о ваших подписках, которую можно получить из файла загружаемого по адресу https://manage.windowsazure.com/publishsettings/index.

Вернувшись в настройки шага для скрипта Azure PowerShell выберите добавленную подписку и укажите параметры (рисунок 19):

— путь к скрипту: AspNetCdDemo/PublishAspNet5Website.ps1

— аргументы скрипта (обратите внимание на имя Web App в Azure и название вашего проекта):

-websiteName AzureCdDemo -packOutput $(Build.SourcesDirectory)\AspNetCdDemo\artifacts\bin\$(BuildConfiguration)\Publish

image

Рис. 19. – Настройка шага сборки Azure PowerShell

Из Visual Studio 2015 выполните коммит и пуш вашего нового скрипта.

Запустится очередной процесс сборки, который на этот раз завершится публикацией проекта в Azure Web App (рисунок 20).

image

Рис. 20. -  Сборка и публикация прошла успешно

Если мы перейдем по адресу нашего Azure Web App (в моем случае http://azurecddemo.azurewebsites.net/), то сможем убедиться в его работе (рисунок 21).

image

Рис. 21. – Сайт работающий в Azure

Финальный тест


Перейдите в Visual Studio 2015 и внесите любые изменения. например в файле Views/Shared/_Layout.cshtml измените текст и разметку. Сделайте коммит и пуш этого файла в репозиторий. Отследите автоматический процесс сборки и публикации в Visual Studio Team Services. Обновите сайт и убедитесь что ваши изменения автоматически опубликованы (рисунок 22).

image

Рис. 22. – Сайт в Azure с изменениями от непрерывного процесса сборки и публикации

Заключение


Мы подробно и с нуля рассмотрели организацию процесса непрерывной сборки и публикации веб-приложения на базе ASP.NET 5 с помощью Visual Studio Team Services. В процессе нашей непрерывной сборки происходит публикация кода в Git, развертывание среды DNX, загрузка необходимых сборок и npm, выполнение скриптов Gulp, публикация сайта в Azure Web App. И все это автоматически.

В заключении хочется сказать, что новый функционал сборки Visual Studio Team Services позволяет собирать проекты любого типа с конфигурированием любой сложности, подключаясь к большому числу сторонних приложений, серверов и фреймворков с заранее сконфигурированными шаблонами.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Вы уже начали использовать новую сборку Visual Studio Team Services?

  • +11
  • 10,9k
  • 2
Microsoft
384,00
Microsoft — мировой лидер в области ПО и ИТ-услуг
Поделиться публикацией

Комментарии 2

    0
    А не планируется всю эту магию «само определит и настроить», довести до ума? А то как-то странно выглядит — создали эталонный пустой проект, и уже какие-то ошибки полезли, которые нужно затыкать powershell-скриптами.
      0
      причина ошибок в статье описывается, к проекту они отношения не имеют, это настройка билд сервера. Будет ли шаг «добавить dnx» встроен в будущем — не знаю, может быть

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое