Создание и развертывание базового веб-приложения ASP.NET в качестве контейнера Docker с использованием Microsoft Azure, часть 1
Вы часто спрашиваете себя: "Я создал основное веб-приложение ASP.NET, и что теперь? Как мне вывести его на новый уровень с помощью инструментов и платформ, таких как GitHub, Docker, CI/CD и Microsoft Azure, с моим приложением?"
Если да, то вы пришли по адресу.
Введение
Эта статья является первой в серии, в которой мы собираемся создать простое веб-приложение ASP.NET Core, поместить его в контейнер с Docker и запустить на локальном хосте. И мы отправим все на GitHub для дальнейшего использования.
В последующих статьях мы настроим конвейер Microsoft Azure DevOps Build для автоматизации процесса сборки и передачи образа Docker в Docker Hub. Далее мы будем использовать конвейер выпуска Azure DevOps для развертывания нашего приложения в службе веб-приложений Azure в качестве контейнера.
Установите репозиторий GitHub
Первый шаг - настроить репозиторий на GitHub, куда вы собираетесь поместить весь свой код. Это необходимо, поскольку на более позднем этапе вы будете настраивать Azure для запуска сборки и выпуска, каждый раз, когда вы отправляете в свой репозиторий.
Так что войдите в свою учетную запись GitHub и создайте репозиторий.
После того, как вы создали хранилище, пришло время перенести его в вашу локальную систему и начать взламывать. Но прежде чем сделать это, убедитесь, что в вашей системе установлен Git, если нет, зайдите на страницу загрузки Git и настройте его. Это просто!
Теперь на GitHub выберите репозиторий, который вы только что создали. Справа вы должны увидеть кнопку «Clone or download», нажмите на нее, и у вас будет URL для клонирования вашего хранилища.
Откройте терминал или сеанс PowerShell, перейдите в каталог, в котором вы хотите клонировать репозиторий, и выполните команду:
$ git clone <repository-clone-url>
С этим набором мы готовы начать разработку нашего приложения.
Создайте основное веб-приложение ASP.NET
Для создания приложения необходимо установить .NET Core (версия> = 2.0). Перейдите на страницу загрузки .NET Core и установите SDK, совместимый с базовой системой.
Теперь, если вы работаете в Windows, откройте Visual Studio и создайте новый проект основного веб-приложения ASP.NET.
Новый основной проект веб-приложения ASP.NET
На следующей странице выберите шаблон веб-приложения (модель-представление-контроллер) и убедитесь, что флажок «Configure for HTTPS» снят. Просто будь проще. Нажмите ОК.
Если вы работаете в Linux или Mac OS, откройте терминал и перейдите в каталог клонов. Вы можете создать .NET Core MVC Web App, используя следующую команду:
$ dotnet new mvc --name <your-project-name>
После этого вы можете использовать свой любимый редактор для внесения необходимых изменений.
Для дальнейшего изучения или решения проблемы я настоятельно рекомендую вам ознакомиться с моим плейлистом на YouTube о начале работы с .NET Core в Linux или Mac OS.
На этом этапе вы можете придумать идею вашего простого приложения и воплотить его в жизнь. Или вы можете следить за тем, как мы делаем изменения в приложении.
Мы строим простой блог, который отображает список последних статей. Пожалуйста, не стесняйтесь клонировать этот репозиторий GitHub для получения последней версии исходного кода и всех используемых ресурсов.
Добавление ссылки на статьи на панель навигации
Веб-приложение ASP.NET Core поставляется с аккуратным предопределенным шаблоном. Чтобы обновить панель навигации, откройте Views/Shared/_Layout.cshtml. В разделе body> nav добавьте ссылку для статей:
...
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index"
class="navbar-brand">Docker WebApp</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Articles">Articles</a></li>
</ul>
</div>
</div>
</nav>
...
Теперь, когда мы нажимаем на ссылку статей, HTTP-запрос GET будет отправлен действие Articles в контроллере Home, которое еще не обновлено.
Добавление обязательных моделей
В каталоге Models добавьте .cs файл ArticlesViewModel.cs, который будет иметь необходимые классы моделей:
using System;
using System.Collections.Generic;
namespace WebApp.Models
{
public class ArticlesViewModel
{
public List<Article> Articles { get; set; }
public ArticlesViewModel()
{
Articles = new List<Article>();
}
}
public class Article
{
public int Id { get; set; }
public string Title { get; set; }
public string Author { get; set; }
public DateTime PublishedOn { get; set; }
public string Content { get; set; }
}
}
Далее, давайте добавим некоторые статические данные в ваш блог, используя статью Repository.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using WebApp.Models;
namespace WebApp
{
public class ArticleRepository
{
private List<Article> articles = new List<Article>
{
new Article
{
Id = 1,
Title = "What is Lorem Ipsum?",
Author= "Gaurav Gahlot",
PublishedOn = new DateTime(2019, 01, 20),
Content = "Lorem Ipsum is simply dummy text of the printing
and typesetting industry."
},
}
public List<Article> GetLatest()
{
return articles;
}
}
}
Обновление Home Controller
Домашний контроллер должен иметь действие, которое может обрабатывать запросы, поступающие для списка последних статей. Вот новый контроллер с действием Articles для GET-запросов:
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Net.Http;
using WebApp.Models;
namespace WebApp.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Articles()
{
var model = new ArticlesViewModel();
model.Articles = new ArticleRepository().GetLatest();
return View(model);
}
}
}
Последнее, что нам нужно сделать, это добавить представление, которое будет отображать наши данные. Итак, добавьте просмотр статей в Views/Home/ со следующим кодом для отображения последних статей:
@{
ViewData["Title"] = "Articles";
}
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/images/docker.png" alt="Docker" class="img-responsive" />
<div class="carousel-caption" role="option">
<p style="font-size:xx-large; color:darkslategrey">
If you see me swim, your application is up and running in Docker.
</p>
</div>
</div>
</div>
</div>
Вставьте свой код в GitHub
Как только вы закончите вносить изменения в код, пришло время отправить ваш код на GitHub. Откройте терминал и перейдите в каталог проекта.
Вы можете проверить состояние вашего локального репозитория с помощью команды:
$ git status
Вы должны увидеть все файлы и каталоги, которые добавляются или обновляются. Теперь, чтобы выполнить все изменения в вашем хранилище, выполните команду:
$ git add
Давайте зафиксируем изменения коротким значимым сообщением:
$ git commit -m "your-commit-message"
Наконец, отправьте все зафиксированные изменения в удаленную ветку на GitHub:
$ git push origin
Примечание: не рекомендуется фиксировать все изменения в конце. Фактически, вы должны часто фиксировать все изменения, которые могут быть сгруппированы логически.
На данный момент, предполагается, что ваше приложение работает хорошо, и вы готовы контейнировать свое приложение с помощью Docker.
Dockerfile
Согласно документации Docker:
Dockerfile - это текстовый документ, который содержит все команды, которые пользователь может вызвать в командной строке для сборки изображения. Docker может создавать изображения автоматически, читая инструкции из Dockerfile.
Вот Dockerfile для нашего приложения:
# STAGE01 - Build application and its dependencies
FROM microsoft/dotnet:2.1-sdk AS build-env
WORKDIR /app
COPY WebApp/*.csproj ./
COPY . ./
RUN dotnet restore
# STAGE02 - Publish the application
FROM build-env AS publish
RUN dotnet publish -c Release -o /app
# STAGE03 - Create the final image
FROM microsoft/dotnet:2.1-aspnetcore-runtime
WORKDIR /app
LABEL Author="Gaurav Gahlot"
LABEL Maintainer="quickdevnotes"
COPY --from=publish /app .
ENTRYPOINT ["dotnet", "WebApp.dll", "--server.urls", "http://*:80"]
Обратите внимание, что я использую многоэтапную сборку, чтобы конечное изображение было как можно меньше.
На высоком уровне многоэтапная сборка очень похожа на то, что мы обычно делаем при создании и публикации наших проектов. Вот краткая разбивка этапов:
- STAGE01 - На этом этапе мы восстанавливаем пакеты и зависимости, необходимые для построения нашего приложения. Обратите внимание, что создается проект .NET Core SDK, который является нашим базовым образом.
- STAGE02 - После того, как первый этап пройден успешно, мы публикуем наше приложение и сохраняем сгенерированные двоичные файлы в каталоге /app.
- STAGE03 - На этом этапе мы используем .NET Core Runtime в качестве базового уровня и копируем двоичные файлы из каталога / app, сгенерированного на предыдущем этапе.
Это отличная функция, позволяющая минимизировать размер ваших изображений Docker, и вы можете узнать больше об этом из документации.
Поскольку этот Dockerfile относится к моему приложению, вам, возможно, придется внести некоторые изменения, чтобы он работал.
Запуск контейнера
Пришло время создать образ Docker для вашего приложения и раскрутить контейнер. Откройте терминал и перейдите в каталог, в котором сохранен Dockerfile. Теперь создайте образ Docker с помощью команды:
$ docker build -t webapp .
Это создаст образ Docker и сохранит его в нашей локальной системе. Чтобы протестировать наш образ и приложение, мы теперь запустим контейнер с помощью команды:
$ docker run -d -p 5000:80 --rm --name webapp webapp
19c758fdb9bfb608c4b261c9f223d314fce91c6d71d33d972b79860c89dd9f15
Приведенная выше команда создает контейнер и печатает идентификатор контейнера в качестве вывода. Вы можете проверить, что контейнер работает, используя команду docker ps.
$ docker ps
CONTAINER ID IMAGE PORTS NAMES MOUNTS
19c758fdb9bf webapp 0.0.0.0:5000->80/tcp webapp
Теперь откройте браузер и перейдите по URL-адресу http://localhost:5000/. Если все работает нормально, вы должны увидеть домашнюю страницу своего веб-приложения. В нашем случае это выглядит так:
Заключение
В этом мы разработали веб-приложение с использованием ASP.NET Core и поместили его в репозиторий GitHub. Мы также протестировали наше приложение, создав образ Docker и запустив из него контейнер Docker.
Следующим шагом является настройка конвейера сборки в Microsoft Azure DevOps. Этот конвейер соединится с нашим репозиторием GitHub. Мы также установим конвейер так, чтобы он запускал сборку каждый раз, когда выполняется передача в главную ветку в хранилище. Конвейер создаст образ Docker и отправит его в Docker Hub.
Следующим шагом является настройка конвейера сборки в Microsoft Azure DevOps. Этот конвейер соединится с нашим репозиторием GitHub. Мы также установим конвейер так, чтобы он запускал сборку каждый раз, когда выполняется передача в главную ветку в хранилище. Конвейер создаст образ Docker и отправит его в Docker Hub.