Как развернуть программу Blazor на Azure

kak razvernut programmu blazor na azure

Введение

В этой статье мы узнаем, как развернуть программу Blazor, размещенную на ASP.NET Core, на Azure. Мы будем использовать Visual Studio 2017 для публикации программы. Мы создадим сервер базы данных SQL на Azure для обработки сделок с БД.

Предпосылки

  • Отсюда установите пакет SDK .NET Core 2.1 или более поздней версии
  • Установите Visual Studio 2017 версии 15.7 или более новой отсюда
  • Установите расширение ASP.NET Core Blazor Language Services отсюда
  • Учетная запись подписки Azure. Вы можете создать бесплатную учетную запись Azure здесь

Пожалуйста, обратитесь к моей предыдущей статье «Каскадный список DropDownList» в Blazor с помощью EF Core для создания программы, которую мы будем развертывать в этом руководстве.

Создайте группу ресурсов на портале Azure

Мы создадим группу ресурсов на портале Azure, чтобы содержать все наши ресурсы в Azure.

Войдите на портал Azure и нажмите Resource groups в меню слева, а затем нажмите кнопку Добавить. Откроется окно «Группа ресурсов», как показано на рисунке:

20T1IWmzWvOLuzHR1enxqFy0-7bq2BtIKbUf

В этом окне нам нужно заполнить следующие данные:

  • Название группы ресурсов: дайте уникальное имя вашей группе ресурсов Здесь мы будем использовать название BlazorDDLGroup.
  • Подписка: выберите тип подписки из раскрывающегося меню. Здесь мы выбираем подписку «Бесплатная пробная версия».
  • Расположение группы ресурсов: выберите местоположение для группы ресурсов из раскрывающегося меню.

Создание БД SQL и сервера БД в Azure

Мы создадим базу данных SQL и сервер базы данных на портале Azure для обработки наших сделок с БД.

Нажмите на SQL databases в меню слева на портале Azure, а затем нажмите кнопку Добавить. Откроется окно «База данных SQL», как показано на рисунке:

38Z5Qh737F4cvXYy5tmwFw1hIbOozmawjBUX

Здесь нужно заполнить следующие данные:

  • Имя базы данных: Введите имя базы данных. Здесь мы будем использовать DDLDemodb как наше название БД.
  • Подписка: выберите тип подписки из раскрывающегося меню. Здесь мы выбираем подписку «Бесплатная пробная версия».
  • Группа ресурсов: Выберите название группы ресурсов, которое мы создали на предыдущем шаге.
  • Выберите источник: это раскрывающееся меню содержит список баз данных с предварительно определенными данными, предоставленными Azure. Поскольку мы создаем нашу специальную базу данных, выберите Blank database из этого нисходящего меню.
  • Уровень цен: Выберите уровень цен для базы данных.

Перед созданием базы данных необходимо создать сервер базы данных для базы данных SQL. Нажмите кнопку «Сервер настроить необходимые параметры», а затем нажмите Create a new server. Откроется окно «Новый сервер», как показано на рисунке:

r6hMMqOkb0djwPQN42D3UI5nznTp72qdhhou

Здесь нам нужно предоставить следующие детали:

  • Имя сервера: Введите имя для вашего сервера базы данных. Здесь мы будем использовать ddldemoserver. Сервер БД будет создан путем добавления .database.windows.net к имени сервера, предоставленного пользователем. Следовательно, имя сервера будет ddldbserver.database.windows.net в этом случае.
  • Вход администратора сервера: Введите имя администратора для сервера базы данных.
  • Пароль: Введите пароль для входа, который соответствует логину администратора для сервера БД.
  • Местонахождение: выберите местоположение для вашего сервера из раскрывающегося меню.

Установите флажок «Разрешить службам Azure получать доступ к серверу» и нажмите Select чтобы создать сервер БД.

Примечание: Слово «admin» ограничено для имени пользователя администратора сервера базы данных. Используйте другое имя пользователя, кроме «admin».

После создания сервера базы данных вы будете перенаправлены обратно в окно «База данных SQL». Для создания базы данных необходимо нажать кнопку «Создать».

Вот весь процесс разъясняется в gif.

6D4EPQq3NvDVgHHYLyldCYjHAf-rv2aRYlWH

Создание таблиц БД

База данных DDLDemodb не содержат таблицы, которые мы используем в нашей программе. Мы подключимся к базе данных Azure с помощью SQL Server Management Studio (SSMS), чтобы создать наши объекты баз данных.

Откройте SSMS на своем компьютере и введите имя сервера как ddldbserver.database.windows.net. Введите идентификатор пользователя и пароль администратора, которые вы настроили в предыдущем разделе. Затем нажмите «Подключить».

Вы получите всплывающее окно для настройки правила брандмауэра для доступа к Azure DB. Войдите, используя учетные данные Azure, и добавьте IP-адрес вашего компьютера Firewall rule. Нажмите OK для подключения к серверу баз данных Azure. Обратитесь к картинке ниже:

3EZsH1Q0JygMDppF3q9vfDrDo4P4FL9sfOiC

После успешного подключения вы можете увидеть DDLDemodb базы данных на сервере Обратитесь к моей предыдущей статье Каскадный нисходящий список в Blazor с помощью EF Core. Выполните команды SQL, чтобы создать и вставить образцы данных в таблицы стран и городов, используемых в нашей программе.

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

После создания объектов базы данных нам нужно заменить строку подключения локальной базы данных в нашем приложении на строку подключения к базе данных Azure.

Откройте портал Azure и нажмите SQL databases в левом меню. Откроется окно со списком всех баз данных, созданных на портале Azure. Нажмите на DDLDemodb базы данных и выберите Connection strings из меню. Выберите ADO.NET вкладку и скопируйте строку подключения. Обратитесь к картинке ниже:

TyolX9Lz7LWJaCjPWslSDToB1sxtKguXBfNp

Вам нужно указать идентификатор пользователя администратора и пароль для сервера базы данных, который вы настроили ранее в эту строку подключения.

Откройте BlazorDDL программы с помощью Visual Studio, перейдите к BlazorDDL.Shared/Models/myTestDBContext.cs и замените локальную строку подключения на новую строку подключения.

Запустите программу Visual Studio для проверки правильности установки новой строки подключения и доступа к базе данных Azure.

Если приложение не работает и вы не можете подключиться к базе данных, проверьте правильность строки подключения. Когда программа заработает правильно на вашей локальной машине, перейдите к следующему разделу, чтобы опубликовать ее в Azure.

Публикация программы Blazor в Azure

Чтобы опубликовать приложение Blazor в Azure, щелкните правой кнопкой мыши проект сервера вашего решения и нажмите опубликовать. В этом случае так и будет BlazorDDL.Server >> Publish.

Это откроет Pick a publish target окно. Выберите App Service с левого меню. Выберите Create New переключатель и нажмите кнопку «Создать профиль». Обратитесь к картинке ниже:

gUBsJCxOAcKBI4MT3gklIr4NAgVeF2UhYCB6

В следующем окне вам будет предложено войти в свой аккаунт Azure, если вы не вошли в систему. После успешного входа Create App Service откроется окно. Обратитесь к картинке ниже:

XhCbINl98SIiBYISo1rWwho10j6RcQSi2VtM

Поля этого окна имеют значение по умолчанию в соответствии с конфигурацией вашей учетной записи Azure. Однако вы можете изменить эти значения в зависимости от ваших требований.

Вы можете заполнить детали, как указано ниже:

  • Название программы: введите название программы для программы. Название программы зависит от наличия. Если указанное название программы уже используется, вам нужно указать новое название программы. Общедоступным URL-адресом веб-сайта будет название приложения, а затем .azurewebsites.net. Здесь мы используем название BlazorDDLDemoследовательно URL-адрес нашего веб-сайта будет выглядеть BlazorDDLDemo.azurewebsites.net.
  • Подписка: выберите тип подписки из раскрывающегося списка.
  • Группа ресурсов: Выберите название группы ресурсов, т.е. BlazorDDLGroup в этом случае.
  • План хостинга: Вы можете использовать существующий план или выбрать новый, нажав на ссылку «Новый…».
  • Приложения Insights: Вы можете выбрать значение из раскрывающегося списка. Это обеспечит аналитику для вашего веб-сайта.

Нажмите кнопку «Создать», чтобы начать развертывание приложения в Azure. Это займет несколько минут в зависимости от скорости вашего интернет-соединения.

После успешного развертывания нажмите кнопку «Опубликовать», чтобы опубликовать приложение в Azure. После успешной публикации программы веб-сайт будет автоматически запущен в обозревателе по умолчанию на вашем компьютере. Вы также можете получить доступ к веб-сайту с помощью URL-адреса BlazorDDLDemo.azurewebsites.net.

Вы можете увидеть приложение в своем браузере, как показано на рисунке ниже:

awDc-mIvjrILWDsq7X4lhTMlA9iAAH9UcJKd

Вывод

В этой статье мы узнали, как развернуть и опубликовать приложение Blazor в Azure. Мы создали базу данных SQL и сервер БД на Azure и использовали их в нашем приложении для обработки операций с БД.

Получите мою книгу Blazor Quick Start Guide, чтобы узнать больше о Blazor.

Вы также можете прочитать другие мои статьи здесь.

Смотрите также

Первоначально опубликовано на

Добавить комментарий

Ваш адрес email не будет опубликован.