Деплой Blazor-приложения в Timeweb Cloud Apps

Blazor — это UI-фреймворк, разработанный компанией Microsoft и позволяющий разработчикам создавать интерактивные веб приложения, используя C#, HTML и CSS.

Модели работы Blazor

Blazor имеет несколько режимов, или моделей, работы:

• Сервер-сайд рендеринг (SSR, он же Blazor Server)

• Клиент-сайд рендеринг (CSR, он же Blazor Client или Blazor wasm)

• Интерактивный режим

• Гибридный режим (Blazor hybrid)

Blazor Server

Приложение запускается на стороне сервера, а все взаимодействие между браузером и сервером происходит через SignalR — абстракцию, работающую поверх сокетов. То есть когда пользователь заходит на сайт, сервер возвращает статическую страницу, после чего устанавливается соединение между браузером клиента и сервером. При изменении состояния (стейта) сервер возвращает клиенту готовый HTML, и браузер рендерит его. К плюсам этого подхода можно отнести SEO и быструю инициализацию приложения, а к минусам большие объемы трафика и нагрузку на сервер.

Blazor Client

Приложение запускается на стороне клиента, используя технологию WebAssembly — низкоуровневый язык, аналог ассемблерного кода, но только для браузера. Для размещения такого приложения достаточного любого статического хостинга или даже S3-хранилища. К плюсам можно отнести небольшую нагрузку на сервер, а к минусам — довольно большой размер скачиваемого бандла, относительно долгую инициализацию приложения и плохую поддержку SEO.

Интерактивный режим

Приложение, которое берет лучшие стороны от Blazor server и Blazor client, инициализируется в режиме Blazor server, через SignalR устанавливается соединение, и в фоне начинает скачиваться wasm-бандл. После того как бандл был загружен, происходит переинициализация приложения с сохранением текущего состояния, и режим работы меняется на Blazor Client.

Blazor hybrid

Дает возможность запускать Blazor-приложение внутри нативного приложения, используя NET MAUI для Android, iOS, macOS и Windows. К достоинствам данного подхода можно отнести полную интеграцию с целевой платформой и возможность переиспользования UI между веб- и мобильным приложением.

Далее предлагаю вместе создать небольшое веб-приложение и запустить его в интерактивном режиме, используя Timeweb Cloud Apps.

Шаг 1: Настраиваем окружение

Для разработки нам понадобится IDE и DotNet SDK. Для этого установим Visual Studio 2022 Community. Скачиваем установщик с сайта «Майкрософт» по ссылке. 

Запускаем, выбираем рабочую нагрузку «ASP.NET and web development» и жмем «Install».

После того как Visual Studio установлена, можем приступить к следующему шагу.

Шаг 2: Создание тестового приложения

Открываем IDE и создаем новый проект.

В списке шаблонов находим и выбираем «Blazor Web App».

Даем ему название, в нашем случае это будет «BlazorApp».

И конфигурируем наше будущее приложение. Тут нам нужно указать в качестве «Interactive render mode» режим «Auto».

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

BlazorApp — это основное веб-приложение, которое запускается на сервере и будет отдавать отрендеренную страницу при первом обращении, а также будет хостить сборку клиентского приложения.

BlazorApp.Client — это уже клиентская часть приложения, она собирается в wasm-бандл и будет скачиваться браузером после того, как Blazor server отрендерит начальную страницу.

Для демонстрации приложения предлагаю добавить компонент, для этого жмем правой кнопкой мыши на Add → New item.

Выбираем «Razor Component» и даем ему название «RenderMode».

Внутри добавляем следующий код:

@using System.Runtime.InteropServices

<label>Render mode: @renderMode</label>

@code {
    string renderMode = "";
    protected override void OnInitialized()
    {
        renderMode = RuntimeInformation.ProcessArchitecture.ToString();
    }
}

В блоке @code { } обычно пишется код C#. В данном примере мы объявляем переменную renderMode, где записываем архитектуру, на которой выполняется приложение. Для серверного режима это будет x86, для клиентского — wasm. Также стоит обратить внимание на перегруженный метод OnInitialized, он выполняется в момент инициализации компонента. Далее мы эту переменную выводим внутри HTML-тега label: <label>Render mode: @renderMode</label>.

В компоненте Counter.razor изменим режим рендеринга на @(new InteractiveWebAssemblyRenderMode(true)) и добавим компонент RazorMode. Должно получиться так:

Также добавим компонент и в Home.razor:

Настало время запустить проект. Для этого в панели инструментов жмем на «https».

Далее откроется браузер с запущенным приложением. 

Шаг 3: Деплой приложения

Для деплоя приложения переходим в панели Timeweb Cloud в раздел Apps и создаем новое приложение. Далее выбираем тип приложения «Backend» и находим «ASP.NET».

Затем указываем репозиторий, откуда будет склонирован наш проект при деплое. Для этого предварительно нужно закоммитить наш тестовый проект, например, на GitHub.

Выбираем GitHub, авторизуемся, выбираем наш проект и жмем «Install & Authorize».

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

На следующем шаге выбираем минимальную конфигурацию — ее нам хватит, чтобы запустить и протестировать наше приложение.

И, наконец, на заключительном этапе настраиваем наше приложение. Здесь нам понадобится к стандартным командам добавить аргументы запуска приложения, чтобы оно запускалась на 5000 порту и было доступно в Интернет, а также путь к проекту:

dotnet run --project BlazorApp --urls http://0.0.0.0:5000

Жмем кнопку «Запустить деплой», и через пару минут наше приложение будет в облаке и доступно всему миру.

Шаг 4: Демонстрация

После деплоя приложение будет доступно на техническом домене, найти его можно на дашборде.

Открываем этот URL в браузере и попадаем на главную страницу приложения, которая работает в режиме «Render mode: X64».

Переходим на страницу Counter и видим, что изначально режим этой страницы «Render mode: X64», но через пару секунд он меняется на «Render mode: Wasm». 

Как мы писали выше, это происходит потому, что страница инициализируется на сервере, а после того, как в фоне скачается WebAssembly-сборка клиентской версии приложения, оно переключается в режим client side. Если мы повторно откроем страницу Counter, то практически мгновенно режим рендеринга изменится на wasm, потому что сборка уже есть в кэше браузера и заново качать ее нет необходимости.

Заключение

Blazor является частью экосистемы дотнета и отлично подойдет как разработчикам знакомым с языком программирования C#, так и начинающим разработчикам. Как мы могли убедиться выше,  для создания и деплоя простого веб приложения достаточно нескольких несложных шагов, а Visual Studio и Timeweb Cloud Apps делают эти шаги еще проще и приятней.