Поделиться через

Быстрый старт: Развертывание веб-приложения ASP.NET

В этом кратком руководстве вы узнаете, как создать и развернуть ваше первое веб-приложение ASP.NET на службе приложений Azure. App Service поддерживает различные версии приложений .NET. Она предлагает веб-хостинг-сервис с высокой масштабируемостью и автоматической установкой обновлений. ASP.NET веб-приложения являются кросс-платформенными и могут размещаться на Linux или Windows. Когда вы закончите, у вас будет группа ресурсов Azure, которая включает в себя план размещения App Service и службы App Service с развернутым веб-приложением.

В качестве альтернативы, вы можете развернуть веб-приложение ASP.NET как часть контейнера Windows или Linux в App Service.

Подсказка

Найдите советы по GitHub Copilot в шагах для Visual Studio, Visual Studio Code и портала Azure.

Предпосылки

Если вы уже установили Visual Studio 2022:

  1. Установите последние обновления в Visual Studio, выбрав Справка>Проверить наличие обновлений.
  2. Чтобы добавить рабочую нагрузку, выберите Инструменты>Получить инструменты и функции.

Перейти к концу

Вы можете быстро развернуть пример приложения ASP.NET Core в этом руководстве с помощью интерфейса командной строки разработчика Azure и просмотреть его в Azure. Просто выполните следующие команды в Azure Cloud Shell и следуйте инструкциям в командной строке:

mkdir dotnetcore-quickstart
cd dotnetcore-quickstart
azd init --template https://github.com/Azure-Samples/quickstart-deploy-aspnet-core-app-service.git
azd up

Чтобы удалить ресурсы, выполните следующие действия.

azd down

Создайте веб-приложение на ASP.NET

  1. Откройте Visual Studio и выберите Создать новый проект.

  2. В Создать новый проект найдите и выберите ASP.NET Core Web App (Razor Pages), затем выберите Далее.

  3. В Настройке вашего нового проекта назовите приложение MyFirstAzureWebApp, а затем выберите Далее.

    Скриншот Visual Studio - Настроить веб-приложение ASP.NET 8.0.

  4. Выберите .NET 8.0 (долгосрочная поддержка).

  5. Убедитесь, что для типа проверки подлинности задано значение None. Нажмите кнопку "Создать".

    Скриншот Visual Studio - Дополнительная информация при выборе .NET 8.0.

  6. В меню Visual Studio выберите Отладка>Запуск без отладки, чтобы запустить веб-приложение локально. Если вы видите сообщение с просьбой доверять самоподписанному сертификату, выберите Да.

    Снимок экрана: Visual Studio — ASP.NET Core 8.0, работающий локально.

Подсказка

Если у вас есть учетная запись GitHub Copilot, попробуйте получить функции GitHub Copilot для Visual Studio.

  1. Откройте окно терминала на вашем компьютере в рабочий каталог. Создайте новое веб-приложение .NET с помощью команды dotnet new webapp, а затем перейдите в каталог созданного приложения.

    dotnet new webapp -n MyFirstAzureWebApp --framework net8.0
cd MyFirstAzureWebApp

  2. Из той же сессии терминала выполните приложение локально с помощью команды dotnet run.

    dotnet run --urls=https://localhost:5001/

  3. Откройте веб-браузер и перейдите к приложению по https://localhost:5001.

    Вы видите шаблон веб-приложения ASP.NET Core 8.0, отображаемый на странице.

    Скриншот Visual Studio Code - ASP.NET Core 8.0 в локальном браузере.

На этом этапе вы создаёте форк демонстрационного проекта для его развертывания.

  1. Перейдите к примеру приложения .NET 8.0.
  2. Нажмите кнопку «Fork» в правом верхнем углу страницы GitHub.
  3. Выберите владельца и оставьте имя репозитория по умолчанию.
  4. Выберите Создать форк.

Опубликуйте своё веб-приложение

Выполните следующие действия, чтобы создать ресурсы App Service и опубликовать ваш проект:

  1. В обозревателе решений щелкните правой кнопкой мыши проект MyFirstAzureWebApp и выберите "Опубликовать".

  2. В Publish выберите Azure, а затем Next.

    Снимок экрана Visual Studio - Публикация веб-приложения и нацеливание на Azure.

  3. Выберите конкретную цель, либо Azure App Service (Linux), либо Azure App Service (Windows). Нажмите кнопку Далее.

    Важно

    При использовании целевого ASP.NET Framework 4.8 используйте Azure App Service (Windows).

  4. Ваши возможности зависят от того, вошли ли вы уже в Azure и связана ли ваша учетная запись Visual Studio с учетной записью Azure. Выберите Добавить учетную запись или Войти, чтобы войти в свою подписку Azure. Если вы уже вошли в систему, выберите нужную учетную запись.

    Снимок экрана Visual Studio - Выберите диалоговое окно входа в Azure.

  5. Справа от экземпляров App Service выберите +.

    Скриншот Visual Studio - диалог нового приложения службы приложений.

  6. Для Подписки примите указанную подписку или выберите новую из раскрывающегося списка.

  7. Для группы ресурсов выберите Создать. Введите myResourceGroup в поле Название новой группы ресурсов и нажмите OK.

  8. Для плана хостинга выберите новый.

  9. В диалоге Hosting Plan: Create new введите значения, указанные в следующей таблице.

    Настройки Рекомендуемое значение Описание
    План размещения MyFirstAzureWebAppPlan Название плана App Service.
    Местоположение Западная Европа Центр обработки данных, где размещено веб-приложение.
    Размер Выберите самый низкий уровень. Уровни ценообразования определяют функции хостинга.

  10. Введите уникальное имя приложения в Имя. Включить только символы a-z, A-Z, 0-9 и -. Вы можете принять автоматически сгенерированное уникальное имя.

  11. Выберите Создать, чтобы создать ресурсы Azure.

    Скриншот Visual Studio - диалог создания ресурсов приложения.

    После завершения процесса для вас создаются ресурсы Azure. Вы готовы опубликовать свой проект ASP.NET Core.

  12. В диалоговом окне Публикация убедитесь, что выбрано ваше новое приложение App Service, затем выберите Готово, затем выберите Закрыть. Visual Studio создаёт для вас публикационный профиль для выбранного приложения App Service.

  13. На странице публикации выберите "Опубликовать". Если вы увидите предупреждающее сообщение, выберите Продолжить.

    Visual Studio собирает, упаковывает и публикует приложение в Azure, а затем запускает его в браузере по умолчанию.

    Вы видите веб-приложение ASP.NET Core 8.0, отображаемое на странице.

    Снимок экрана: веб-приложение Visual Studio — ASP.NET Core 8.0 в Azure.

  1. Откройте Visual Studio Code из корневого каталога вашего проекта.

    code .

  2. Если будет предложено, выберите Да, я доверяю авторам.

    Подсказка

    Если у вас есть учетная запись GitHub Copilot, попробуйте использовать функции GitHub Copilot в Visual Studio Code.

  3. В Visual Studio Code выберите Вид>Палитра команд, чтобы открыть палитру команд.

  4. Найдите и выберите Azure App Service: Create New Web App (Advanced).

  5. Отвечайте на запросы следующим образом:

    1. Если будет предложено, войдите в свою учетную запись Azure.
    2. Выберите вашу подписку.
    3. Выберите Create new Web App... Advanced.
    4. Для введите глобально уникальное имя для нового веб-приложения, используйте имя, которое уникально для всей платформы Azure. Допустимые символы: a-z, 0-9 и -. Хорошим шаблоном является использование комбинации названия вашей компании и идентификатора приложения.
    5. Выберите Создать новую группу ресурсов и укажите имя, например myResourceGroup.
    6. При появлении запроса Выбрать стек выполнения, выберите .NET 8 (LTS).
    7. Выберите операционную систему (Windows или Linux).
    8. Выберите местоположение рядом с вами.
    9. Выберите Создать новый план службы приложений, укажите имя и выберите уровень цен Бесплатный (F1).
    10. Для ресурса Application Insights выберите Пропустить пока для ресурса Application Insights.
    11. При появлении запроса нажмите кнопку "Развернуть".
    12. Выберите MyFirstAzureWebApp в качестве папки для развертывания.
    13. Выберите Add Config, когда будет предложено.

  6. В диалоговом окне Всегда развертывать рабочее пространство "MyFirstAzureWebApp" в <имя-приложения>", выберите Да, чтобы Visual Studio Code всегда разворачивала одно и то же приложение службы приложений, когда вы находитесь в этом рабочем пространстве.

  7. После завершения публикации выберите Просмотреть веб-сайт в уведомлении и нажмите Открыть по запросу.

    Вы видите веб-приложение ASP.NET Core 8.0, отображаемое на странице.

    Снимок экрана: веб-приложение Visual Studio Code — ASP.NET Core 8.0 в Azure.

  1. Войдите в свою учетную запись Azure, используя команду az login и следуя инструкциям.

    az login

  2. Используйте az webapp up, чтобы развернуть код в локальном каталоге MyFirstAzureWebApp.

    az webapp up --sku F1 --name <app-name> --os-type <os>
    • Замените <app-name> на имя, которое уникально по всей Azure. Допустимые символы: a-z, 0-9 и -. Хорошим шаблоном является использование комбинации названия вашей компании и идентификатора приложения.
    • Аргумент --sku F1 создает веб-приложение на бесплатномуровне цен. Опустите этот аргумент, чтобы использовать более быстрый премиум-уровень, за который взимается почасовая оплата.
    • Замените <os> на linux или windows.
    • Вы можете при желании включить аргумент --location <location-name>, где <location-name> является доступным регионом Azure. Чтобы получить список допустимых регионов для вашей учетной записи Azure, выполните команду az account list-locations.

    Команда может занять несколько минут для выполнения. Пока команда выполняется, она предоставляет сообщения о создании группы ресурсов, плана App Service и хостинга приложения, настраивает ведение журнала, а затем выполняет развертывание через ZIP. Затем отображается сообщение с URL-адресом приложения.

  3. Откройте веб-браузер и перейдите по указанному URL. Вы видите веб-приложение ASP.NET Core 8.0, отображаемое на странице.

    Снимок экрана: веб-приложение CLI ASP.NET Core 8.0 в Azure.

Примечание

Мы рекомендуем использовать Azure PowerShell для создания приложений на платформе размещения Windows. Чтобы создавать приложения в Linux, используйте другой инструмент, такой как Azure CLI.

  1. Войдите в свою учетную запись Azure, используя команду Connect-AzAccount и следуйте подсказкам.

    Connect-AzAccount

  2. Создайте новое приложение, используя команду New-AzWebApp:

    New-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -Location westeurope
    • Замените <app-name> на имя, которое уникально по всей Azure. Допустимые символы: a-z, 0-9, и -. Сочетание имени вашей компании и идентификатора приложения — это хороший шаблон.
    • Вы можете по желанию включить параметр -Location <location-name>, где <location-name> — это доступный регион Azure. Чтобы получить список допустимых регионов для вашей учетной записи Azure, выполните команду Get-AzLocation.

    Команда может занять несколько минут для выполнения. Команда создаёт группу ресурсов, план App Service и ресурс App Service.

  3. Из корневой папки приложения выполните команду dotnet publish, чтобы подготовить ваше локальное приложение MyFirstAzureWebApp к развертыванию:

    dotnet publish --configuration Release

  4. Переходите в каталог релиза и создайте zip-архив из содержимого:

    cd bin\Release\net8.0\publish
Compress-Archive -Path * -DestinationPath deploy.zip

  5. Опубликуйте ZIP-файл в приложении Azure с помощью команды Publish-AzWebApp.

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force

    Примечание

    -ArchivePath требуется полный путь к zip-файлу.

  6. Откройте веб-браузер и перейдите по указанному URL. Вы видите веб-приложение ASP.NET Core 8.0, отображаемое на странице.

    Снимок экрана: веб-приложение CLI ASP.NET Core 8.0 в Azure.

  1. Введите app services в поиск. В разделе Службы выберите Службы приложений.

    Снимок экрана поиска портала в Azure портале.

  2. На странице Служба приложений выберите "Создать>веб-приложение".

  3. На вкладке "Основные сведения" :

    • В разделе Группа ресурсов выберите Создать новую. Введите myResourceGroup в качестве имени.
    • В разделе Имя введите уникальное глобальное имя для вашего веб-приложения.
    • В разделе Опубликовать выберите Код.
    • В стеке среды выполнения выберите .NET 8 (LTS).
    • В разделе "Операционная система" выберите Windows. Если вы выберете Linux, вы не сможете настроить развертывание GitHub на следующем шаге, но можете сделать это после создания приложения на странице Deployment Center.
    • Выберите регион, из которого вы хотите обслуживать свое приложение.
    • В разделе App Service Plan выберите Создать новый и введите myAppServicePlan в качестве имени.
    • Под План тарифов выберите Бесплатный F1.

    Снимок экрана нового приложения конфигурации App Service для .NET 8 на портале Azure.

  4. Выберите вкладку Deployment в верхней части страницы

  5. В разделе настроек GitHub Actions установите непрерывное развертывание в положение Включено.

  6. В разделе Сведения о GitHub Actions выполните аутентификацию с вашей учетной записью GitHub и выберите следующие параметры.

    • Для Организация выберите организацию, в которой вы сделали форк демонстрационного проекта.
    • Для Репозиторий выберите проект dotnetcore-docs-hello-world.
    • Для ветви выберите main.

    Скриншот с параметрами развертывания приложения, использующего среду выполнения .NET 8.

  7. Выберите Обзор + создание внизу страницы.

  8. После завершения проверок выберите Создать внизу страницы.

  9. Завершив развертывание, выберите Перейти к ресурсу.

    Скриншот следующего этапа перехода к ресурсу.

  10. Чтобы перейти к созданному приложению, выберите домен по умолчанию на странице обзора . Если вы видите сообщение «Ваше веб-приложение работает и ожидает вашего контента», развертывание на GitHub все еще выполняется. Подождите пару минут и обновите страницу.

Обновите приложение и разверните его заново.

Внесите изменения в Index.cshtml и разверните заново, чтобы увидеть изменения. В шаблоне .NET 8.0 он находится в папке Pages. В шаблоне .NET Framework 4.8 это в папке Views/Home. Следуйте этим шагам, чтобы обновить и повторно развернуть ваше веб-приложение:

  1. В Solution Explorer, под вашим проектом, дважды щелкните Pages>Index.cshtml, чтобы открыть.

  2. Замените первый элемент <div> следующим кодом:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Подсказка

    С включенной GitHub Copilot в Visual Studio выполните следующие действия:

    1. Выберите элемент <div> и введите Alt+/.
    2. Попросите Copilot: «Измените на карточку Bootstrap, на которой написано .NET 💜 Azure.»

    Сохраните изменения.

  3. Чтобы повторно развернуть в Azure, щелкните правой кнопкой мыши проект MyFirstAzureWebApp в Обозревателе решений и выберите Публикация.

  4. На странице сводки Публикация выберите Публиковать.

    Когда публикация завершится, Visual Studio запустит браузер по адресу URL веб-приложения.

    На странице отображается обновлённое веб-приложение ASP.NET Core 8.0.

    Скриншот Visual Studio - обновленное веб-приложение ASP.NET Core 8.0 в Azure.

  1. Откройте Pages/Index.cshtml.

  2. Замените первый элемент <div> следующим кодом:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Подсказка

    Попробуйте этот метод с GitHub Copilot:

    1. Выберите весь элемент <div> и выберите .
    2. Попросите Copilot: «Измените на карточку Bootstrap, на которой написано .NET 💜 Azure.»

    Сохраните изменения.

  3. В Visual Studio Code откройте палитру команд: CTRL SHIFT++P.

  4. Найдите и выберите Azure App Service: Deploy to Web App.

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

  6. При появлении запроса нажмите кнопку "Развернуть".

  7. Когда публикация завершится, выберите Просмотр сайта в уведомлении.

    На странице отображается обновлённое веб-приложение ASP.NET Core 8.0.

    Скриншот Visual Studio Code - обновленное веб-приложение ASP.NET Core 8.0 в Azure.

Подсказка

Чтобы увидеть, как Visual Studio Code с GitHub Copilot помогает улучшить ваш опыт веб-разработки, ознакомьтесь с шагами в Visual Studio Code.

В локальном каталоге откройте файл Pages/Index.cshtml. Замените первый элемент <div>.

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

Сохраните изменения, затем вновь разверните приложение, используя команду az webapp up, и замените <os> либо на linux, либо на windows.

az webapp up --os-type <os>

Эта команда использует значения, которые кэшируются локально в файле .azure/config, включая имя приложения, группу ресурсов и план сервиса приложений.

После завершения развертывания вернитесь в окно браузера, которое открылось на этапе Переход к приложению, и обновите его.

На странице отображается обновлённое веб-приложение ASP.NET Core 8.0.

Скриншот CLI - обновленное веб-приложение ASP.NET Core 8.0 в Azure.

  1. В локальном каталоге откройте файл Pages/Index.cshtml. Замените первый элемент <div>.

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

  2. Из корневой папки приложения подготовьте локальное приложение MyFirstAzureWebApp к развертыванию, используя команду dotnet publish.

    dotnet publish --configuration Release

  3. Переходите в каталог релиза и создайте zip-архив из содержимого:

    cd bin\Release\net8.0\publish
Compress-Archive -Path * -DestinationPath deploy.zip -Force

  4. Опубликуйте ZIP-файл в приложении Azure с помощью команды Publish-AzWebApp.

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force

    Примечание

    -ArchivePath требуется полный путь к zip-файлу.

  5. После завершения развертывания вернитесь в окно браузера, которое открылось на этапе Переход к приложению, и обновите его.

    На странице отображается обновлённое веб-приложение ASP.NET Core 8.0.

    Скриншот CLI - обновленное веб-приложение ASP.NET Core 8.0 в Azure.

  1. Перейдите к вашему форку исходного кода на GitHub.

  2. На странице репозитория создайте пространство кода, выбрав Код>Создать пространство кода в main.

    Скриншот, показывающий, как создать кодовое пространство в форкнутом репозитории GitHub dotnetcore-docs-hello-world.

  3. Откройте Index.cshtml.

    Файл Index.cshtml находится в папке Pages.

    Скриншот окна Проводника из Visual Studio Code в браузере, показывающего Index.cshtml в репозитории dotnetcore-docs-hello-world.

  4. Замените первый элемент <div> следующим кодом:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Изменения сохраняются автоматически.

    Подсказка

    Попробуйте этот метод с GitHub Copilot:

    1. Выберите весь элемент <div> и выберите .
    2. Попросите Copilot: «Измените на карточку Bootstrap, на которой написано .NET 💜 Azure.»

  5. Из меню Управление версиями введите сообщение коммита, такое как Modify homepage. Затем выберите Commit и подтвердите подготовку изменений, выбрав Да.

    Снимок экрана Visual Studio Code в браузере, панель управления версиями с коммит-сообщением 'We love Azure' и выделенной кнопкой Commit и Push.

  6. Выберите Sync changes 1, затем подтвердите, выбрав OK.

  7. Развертывание занимает несколько минут. Чтобы просмотреть прогресс, перейдите к https://github.com/<your-github-alias>/dotnetcore-docs-hello-world/actions.

  8. Вернитесь в окно браузера, которое открылось на этапе Переход к приложению, и обновите страницу.

    На странице отображается обновлённое веб-приложение ASP.NET Core 8.0.

    Скриншот CLI - обновленное веб-приложение ASP.NET Core 8.0 в Azure.

Управляйте приложением Azure

Чтобы управлять своим веб-приложением, зайдите в Azure портал и найдите и выберите App Services.

Снимок экрана портала Azure - Выберите опцию службы приложений.

На странице App Services выберите имя вашего веб-приложения.

Скриншот портала Azure - страница служб приложений с выбранным примером веб-приложения.

Страница Обзор вашего веб-приложения содержит варианты для базового управления, такие как просмотр, остановка, запуск, перезапуск и удаление. Левое меню предоставляет дополнительные страницы для настройки вашего приложения.

Скриншот портала Azure - страница обзора App Service.

Очистить ресурсы

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

  1. На странице Обзор вашего веб-приложения в портале Azure выберите ссылку myResourceGroup под Группа ресурсов.
  2. На странице группы ресурсов убедитесь, что перечисленные ресурсы — именно те, которые вы хотите удалить.
  3. Выберите Удалить группу ресурсов, введите myResourceGroup в текстовое поле, а затем выберите Удалить.
  4. Подтвердите еще раз, нажав кнопку "Удалить".

Очистить ресурсы

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

  1. На странице Обзор вашего веб-приложения в портале Azure выберите ссылку myResourceGroup под Группа ресурсов.
  2. На странице группы ресурсов убедитесь, что перечисленные ресурсы — именно те, которые вы хотите удалить.
  3. Выберите Удалить группу ресурсов, введите myResourceGroup в текстовое поле, а затем выберите Удалить.
  4. Подтвердите еще раз, нажав кнопку "Удалить".

На предыдущих этапах вы создали ресурсы Azure в группе ресурсов. Если вы не ожидаете, что эти ресурсы понадобятся вам в будущем, удалите группу ресурсов, выполнив следующую команду в Cloud Shell.

az group delete

Для вашего удобства команда az webapp up, которую вы запускали ранее в этом проекте, сохраняет имя группы ресурсов в качестве значения по умолчанию всякий раз, когда вы выполняете команды az из этого проекта.

Очистить ресурсы

На предыдущих этапах вы создали ресурсы Azure в группе ресурсов. Если вы не ожидаете, что эти ресурсы понадобятся вам в будущем, удалите группу ресурсов, выполнив следующую команду PowerShell:

Remove-AzResourceGroup -Name myResourceGroup

Эта команда может занять минуту на выполнение.

Очистить ресурсы

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

  1. На странице Обзор вашего веб-приложения в портале Azure выберите ссылку myResourceGroup под Группа ресурсов.
  2. На странице группы ресурсов убедитесь, что перечисленные ресурсы — именно те, которые вы хотите удалить.
  3. Выберите Удалить группу ресурсов, введите myResourceGroup в текстовое поле, а затем выберите Удалить.
  4. Подтвердите еще раз, нажав кнопку "Удалить".

Следующие шаги

Перейдите к следующей статье, чтобы узнать, как создать приложение на .NET Core и подключить его к базе данных SQL.

Учебное пособие: приложение ASP.NET Core с базой данных SQL

Шаблон приложения: приложение ASP.NET Core с базой данных SQL и App Insights, развернут с использованием CI/CD GitHub Actions

Настройка приложения ASP.NET Core