Октябрь 2015

Том 30, номер 10

ASP.NET - ASP.NET 5 повсюду благодаря OmniSharp и Yeoman

Саид Ибрагим Хашими и Шейн Бойер | Октябрь 2015

Продукты и технологии:

ASP.NET 5, Visual Studio Code, Node.js, HomeBrew, OmniSharp, Yeoman

В статье рассматриваются:

• подготовка среды разработки под ASP.NET 5 в OS X;
• создание проекта в Yeoman;
• использование редактора Visual Studio Code;
• отладка и развертывание.

По мере того как группы разработки получают все более широкий выбор инструментария, инфраструктуры тоже должны обеспечивать выбор без трения. В ASP.NET 5 включает кросс-платформенную поддержку, в том числе разработки с помощью инструментария с открытым исходным кодом, например OmniSharp, и размещения в Microsoft Azure с применением контейнеров вроде Docker. В этой статье мы покажем, как приступить к работе с ASP.NET 5 на выбранной вами платформе. Мы рассмотрим все, что нужно для начала разработки веб-приложений на основе ASP.NET 5.

Создать и запустить проект может быть делом трудным, так как современный ландшафт разработки веб-приложений пестрит разнообразием инструментария. Как пользователь Visual Studio вы, по-видимому, избалованы преимуществами IDE, встроенными шаблонами и такими средствами, как Web Essentials, помогающими поднимать с нуля новые проекты. Но разработчики, не использующие Windows и богатые IDE вроде Visual Studio, вынуждены в основном полагаться на инструменты командной строки, например Yeoman, Grunt, Gulp или Node.js, чтобы создавать и конструировать веб-приложения. Теперь ASP.NET 5 заново переработана с учетом всех платформ, и в нее заложен подход к инструментарию разработки «выбор правит всем». В настоящее время вы можете использовать ее не только для проектов под Windows, но и под Linux и OS X. В этой статье дается краткое описание подготовки среды и создания проекта ASP.NET 5 из операционной системы, отличной от Windows.

Подготовка среды

Для подготовки и настройки среды вам понадобятся несколько частей, но весь этот процесс хорошо документирован как для OS X, так и для Linux. Пошаговые инструкции вы найдете по ссылке bit.ly/1Ljhj68. В этой статье мы предполагаем, что большинство читателей использует OS X.

Первый шаг — установка инструментов, необходимых нам для создания веб-приложения ASP.NET 5. В ближайшем будущем базовой исполняющей средой для инфраструктуры станет CoreCLR (github.com/dotnet/coreclr), а пока ASP.NET 5 по-прежнему требует исполняющей среды Mono. Чтобы установить Mono, используйте HomeBrew (brew.sh):

$ brew install mono

Далее установите .NET Version Manager (DNVM), набор утилит командной строки, позволяющих обновлять и настраивать исполняющую среду .NET (DNX), которая обеспечивает кросс-платформенную разработку, используя в основном .NET Core 5 (docs.asp.net/beta5/dnx/). Для установки DNVM и DNX с терминала выполните следующие команды:

$ brew tap aspnet/dnx
$ brew update
$ brew install dnvm

Теперь у вас установлены исполняющая среда Mono плюс DNVM и DNX. Чтобы проверить версию DNVM, введите «$ dnvm» с терминала, как показано на рис. 1. Заметьте: если ваша оболочка не распознает команду dnvm, то, возможно, придется выполнить команду «source dnvm.sh» для ее загрузки.

Рис. 1. Проверка версии DNVM

Выбор редактора

Если вы используете Windows, обсуждать особо нечего: вы задействуете какую-либо версию Visual Studio. Однако в OS X или Linux вам предоставляется выбор — от простого текстового редактора вроде TextMate до множества популярных редакторов, таких как Sublime, Atom, Emacs или Vim. Но в списке редакторов для кросс-платформенной разработки появилось новое пополнение: Visual Studio Code (code.visualstudio.com) от Microsoft — и это отличный редактор не только для ASP.NET 5, но и для AngularJS, Node.js и разработки с применением JavaScript в целом (рис. 2).

Рис. 2. Страница Welcome в Visual Studio Code

Независимо от выбранного редактора ключ к запуску редактора для ASP.NET 5 в OS X и Linux — OmniSharp (omnisharp.net). Visual Studio Code поставляется со встроенным OmniSharp; прочие редакторы имеют репозитарии расширений или надстроек, откуда можно скачать нужный компонент.

Начинаем первый проект

Без богатой среды разработки Visual Studio 2015 вам придется опираться на другой подход к созданию приложения ASP.NET 5 в OS X. Знакомьтесь с Yeoman (yeoman.io) и генератором проектов ASP.NET (bit.ly/1MPe5KY). Yeoman является платформой генерации шаблонов (scaffolding platform), построенной поверх Node.js, которая позволяет создавать генераторы на основе шаблонов для проектов или файлов кода. Это утилита командной строки, и, поскольку она опирается на Node.js, у нее есть несколько зависимостей, о которых следует позаботиться заранее.

Для начала установите Node.js и диспетчер node-пакетов (NPM) либо через HomeBrew, либо напрямую с nodejs.org:

$ brew install node

Далее установите генераторы с помощью npm:

$ npm install -g yo generator-aspnet

Если у вас еще нет Bower, Grunt или Gulp, скачайте и эти инструменты. Вы наверняка захотите ознакомиться с этими инструментами, которые являются частью нового, современного стека разработки (см. статью «Современные средства для веб-разработки: Bower» в этом номере):

$ npm install -g bower grunt-cli gulp-cli

Bower — это диспетчер пакетов для клиентской веб-разработки и репозитарий веб-ресурсов, таких как как JavaScript и CSS. Grunt и Gulp являются библиотеками, выполняющими задачи для процессов сборки, такие как уменьшение размера скриптов и изображений (script and image minification) и транскомпиляция (transpiling) (TypeScript или CoffeeScript).

На этом мы закончим обсуждение подготовки инструментария для разработки, независимой от редактора. Теперь, чтобы начать новый тип проекта, выполните «$ yo aspnet» для инициализации генератора Yeoman и выбора проекта, который вы хотели бы создать. В данном случае выберите Web Application Basic [without Membership and Authorization], как показано на рис. 3, а затем введите имя проекта и нажмите Enter.

Рис. 3. Выбор типа проекта в Yeoman

По завершении работы генератора у вас появится возможность выполнения приложения с использованием кросс-платформенного веб-сервера Kestrel. Но сначала нужно установить зависимости npm, Bower и NuGet, поэтому выполните команду restore для получения этих ресурсов:

$ cd [projectname]
$ dnu restore

Эта команда скачивает все NuGet-пакеты для проекта, на которые есть ссылки в файле project.json.

(Мы также вводили команды «$ npm install» и «$ bower install», чтобы убедиться в актуальности ресурсов JavaScript и UI-компонентов, но это не обязательно.)

Потом введите команду для запуска Kestrel:

$ dnx . kestrel

(Заметьте: когда выйдет ASP.NET 5 Beta 7, эта команда примет более привычный вид — «dnx kestrel».)

Слово «Started» появится в окне терминала, и теперь вы сможете просмотреть веб-сайт, перейдя по адресу http://localhost:5000. К этому моменту вы создали проект, восстановили пакеты и запустили сайт без Windows или Visual Studio. Далее откройте код в Visual Studio Code.

Редактирование для ASP.NET

Как уже отмечалось, Visual Studio Code — отличный редактор для кросс-платформенной разработки. Откройте проект либо обычным способом, либо клавиатурным сокращением «code» из папки проекта. (О том, как настроить сокращение «code», см. по ссылке bit.ly/1LwonPN.)

Открыв папку исходного кода в Visual Studio Code, можно приступать к разработке приложения. На рис. 4 показан результат открытия проекта в Code.

Рис. 4. Открытие проекта в редакторе Visual Studio Code

Как видите, вы получаете полноценное выделение синтаксиса для C#-файлов — в Mac OS X! Если вы посмотрите внимательнее, то заметите значок лампы рядом с курсором в строке 2. Этот значок, как и в Visual Studio, позволяет быстро выполнять контекстно-зависимые операции. В данном случае Visual Studio Code предлагает удаление ненужных выражений using — команду Remove Unnecessary Usings.

Теперь добавим в проект новые файлы. Чтобы добавить новый файл в проект ASP.NET 5, ничего особенного делать не требуется. Просто добавьте файл в каталог, и он будет автоматически включен в проект. В Code можно использовать кнопку Add File в древовидном представлении или комбинацию клавиш Ctrl+N, чтобы включить новый пустой файл. Если вы предпочли бы получить какой-то начальный контент, введите команду «yo aspnet». Чтобы добавить файлы в существующие проекты ASP.NET 5, запускайте субгенератор (sub-generator), используя следующий синтаксис:

$ yo aspnet:<Name> <options>

Для демонстрации давайте добавим в веб-приложение новый MVC-контроллер и View для новой страницы Admin. Сначала добавляем MVC-контроллер. При выполнении команда yo aspnet будет добавлять файлы в текущий рабочий каталог, поэтому вам понадобится заранее сменить текущий каталог командой cd. Чтобы добавить MVC-контроллер, выполните следующую команду в папке Controllers:

yo aspnet:MvcController AdminController

После ее выполнения вы увидите новый файл, Hello.cs, в текущем рабочем каталоге с контентом, показанным на рис. 5.

Рис. 5. Hello.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

// Подробнее о включении MVC для пустых проектов
// см. по ссылке go.microsoft.com/fwlink/?LinkID=397860

namespace MyNamespace
{
  public class AdminController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }
  }
}

Этот файл выглядит так же, как и в случае команды File | New Item в Visual Studio и выбора MVC Controller с тем исключением, что здесь имя пространства имен автоматически не обновляется; вместо этого она «зашито» как MyNamespace. В настоящее время вам потребуется обновить объявление пространства имен, чтобы оно совпадало с ожидаемым, но в будущей версии это неудобство устранят. Субгенератор MvcController — лишь один из множества субгенераторов, доступных в yo aspnet. Чтобы просмотреть их полный список, введите:

$ yo aspnet --help

Субгенераторы в yo aspnet эквивалентны шаблонам элементов в Visual Studio, когда вы выбираете File | Add New Item.

Субгенераторы в yo aspnet эквивалентны шаблонам элементов в Visual Studio, когда вы выбираете File | Add New Item. Представления добавляются субгенератором MvcView. Чтобы добавить представление Admin, выполните следующую команду из папки Views:

$ yo aspnet:MvcView Index

Полученное представление, Index.cshtml, оказывается совсем базовым:

@*
  // Подробнее о включении MVC для пустых проектов
  // см. по ссылке bit.ly/1PBdyKc
*@
@{
  // ViewBag.Title = "Index Page";
}

И вновь контент, генерируемый yo aspnet, эквивалентен таковому при использовании диалога Add New Item в Visual Studio. В файл Index.cshtml можно добавить заголовок, чтобы можно было перейти к этой странице и проверить, что все работает:

<h1>Admin Page</h1>

Теперь посмотрим, что нужно сделать для компиляции и запуска этого приложения.

Ранее мы упоминали, что можно использовать команду «dnx . kestrel» для запуска приложения. Если вы работаете в Code, то можете запустить веб-сервер, используя набор команд (command palette), показанный на рис. 6.

Рис. 6. Запуск веб-сервера в Visual Studio Code

В Code ваш проект будет компилироваться «за кулисами» с помощью OmniSharp всякий раз, когда изменяются файлы исходного кода. Чтобы увидеть любые ошибки и предупреждения в Code (пример приведен на рис. 7), используйте кнопку в строке состояния, выводящую ошибки и предупреждения. Как видите, Code указывает на неправильный код в строке 16.

Рис. 7. Просмотр ошибок и предупреждений в Visual Studio Code

Кроме того, проект можно скомпилировать из командной строки. Допустим, в вашем новом классе AdminController обнаружена ошибка при компиляции. Для сборки приложения в командной строке выполните команду:

$ dnu build

Она должна выдать те же ошибки и предупреждения, что и Code. Теперь, когда вы поняли, как компилировать и запускать свое приложение, кратко обсудим отладку и развертывание.

Отладка

В настоящее время отладка ASP.NET 5 поддерживается только на платформе Windows в сочетании с Visual Studio, а значит, отлаживать приложения ASP.NET 5, выполняемые Mono в OS X или Linux, нельзя. Приложения ASP.NET 5 компилируются с помощью компилятора Roslyn, а не Mono, и никакой отладочной информации не генерируется. Visual Studio Code пока не поддерживает отладку, но вы всегда можете использовать Visual Studio в виртуальной машине на своем компьютере Mac или Linux. Будем надеяться, что группа Visual Studio Code сумеет ввести поддержку отладки после выпуска CoreCLR.

Развертывание

Вы узнали, как локально разрабатывать приложение; теперь кратко рассмотрим варианты хостинга. Подробное изложение этой тематики потребовало бы отдельной статьи, поэтому мы просто дадим высокоуровневый обзор и укажем на некоторые внешние ресурсы. За самой свежей информацией обращайтесь на bit.ly/1fvDQ41.

На самом верхнем уровне варианты публикации для ASP.NET 5 таковы:

• из командной строки, используя утилиту командной строки «dnu publish»;
• в Azure Web Apps через Git;
• в контейнер Docker, выполняемый в Azure.

Команда dnu publish лежит в сердцевине любого метода публикации. Она упаковывает ваше приложение в формат, работающий на веб-серверах. Посмотрим на эту команду чуть ближе.

Для начала, чтобы увидеть список доступных ключей в командной строке, введите:

dnu publish –help

Результат выполнения этой команды показан на рис. 8.

Рис. 8. Получение справки по команде dnu publish

Самый важный ключ — аргумент --out (-o), позволяющий указать папку, в которой должны публиковаться ваши файлы. При желании вы можете исследовать и другие ключи по мере необходимости.

После публикации приложения в папке вам нужно просто скопировать ее в ваш веб-сервер. Если вы осуществляете публикацию на машине с Windows, где работает IIS, то можете настроить свой веб-сайт, как всегда. О том, как сконфигурировать веб-сервер в Linux, см. bit.ly/1E8uebl.

Если вы публикуете в Azure, можно получить некоторую поддержку с ее стороны. Azure поддерживает приложения ASP.NET 5 в Azure Web Apps, а также в контейнерах Docker. Для развертывания в Azure Web Apps с машины под управлением ОС, отличной от Windows, можно использовать FTP или Git. В случае FTP вы публикуете результаты dnu publish. Подробнее см. по ссылке bit.ly/1LnFC2T.

Приложения ASP.NET 5 компилируются с помощью компилятора Roslyn, а не Mono, и никакой отладочной информации не генерируется.

Модель публикации на основе Git проста в применении и поддерживает сценарии постоянного развертывания. Как приступить к публикации в Azure Web Apps с помощью Git, описано по ссылке bit.ly/1hQljS0. Вот и все, что вам нужно знать, что начать разработку и запускать приложения ASP.NET 5 на выбранной платформе.

Заключение

Разработка веб-приложений с помощью ASP.NET требовала использования Windows и Visual Studio. Теперь ASP.NET 5 и связанные утилиты командной строки можно задействовать на любой платформе. И это только начало. Чтобы следить за последними новостями по ASP.NET 5, заходите на github.com/aspnet/Home. Проект yo aspnet полностью управляется сообществом. Если вы заинтересованы помочь, пожалуйста, откройте проблему (issue) на bit.ly/1PvtcGX.

Саид Ибрагим Хашими (Sayed Ibrahim Hashimi) — старший менеджер программ в Microsoft в группе Visual Studio Web. Написал несколько книг по технологиям Microsoft, является автором SideWaffle и TemplateBuilder, а также соавтором OmniSharp. С ним можно связаться через Twitter (@SayedIHashimi) и его блог sedodream.com.

Шейн Бойер (Shayne Boyer) — ASP.NET MVP, архитектор решений в Орландо (Флорида). Занимается разработкой решений на основе технологий Microsoft в течение 20 лет. В последнее десятилетие работал над крупномасштабными веб-приложениями, уделяя особое внимание эффективности труда и производительности. С ним можно связаться через Twitter (@spboyer) и его веб-сайт (tattoocoder.com).

Выражаем благодарность за рецензирование статьи эксперту Microsoft Скотту Ханселмену (Scott Hanselman).