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

Развертывание приложения Angular на Статические веб-приложения Azure

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

Необходимые компоненты

Ресурс Примечания.
Подписка Azure. Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
учетная запись GitHub; Если у вас нет учетной записи GitHub, ее можно создать бесплатно.
Ресурс Примечания.
Подписка Azure. Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
Учетная запись Azure DevOps Если у вас нет учетной записи GitHub, ее можно создать.

Создание репозитория

В этой статье для простоты используются шаблон из репозитория GitHub. Шаблон содержит начальное приложение для развертывания в Статические веб-приложения Azure.

  1. Перейдите к следующему расположению, чтобы создать новый репозиторий:

    https://github.com/staticwebdev/angular-basic/generate

  2. Присвойте репозиторию имя my-first-static-web-app

  3. Щелкните Create repository from template (Создание репозитория из шаблона).

    Снимок экрана: создание репозитория с помощью кнопки шаблона.

В этой статье используется репозиторий Azure DevOps, чтобы упростить работу. Репозиторий предоставляет начальное приложение, используемое для развертывания с помощью Статические веб-приложения Azure.

  1. Выполните вход в Azure DevOps.

  2. Выберите новый репозиторий.

  3. В окне "Создание проекта" разверните меню "Дополнительно" и выберите следующие элементы:

    Параметр Значение
    Project Введите my-first-web-static-app.
    Visibility Выберите категорию Частное.
    Управление версиями Выберите Git.
    Процесс рабочих элементов Выберите вариант, подходящий для методов разработки.

  4. Нажмите кнопку создания.

  5. Выберите пункт меню Repos.

  6. Выберите пункт меню "Файлы".

  7. В карточке репозитория импорта выберите "Импорт".

  8. Скопируйте URL-адрес репозитория для выбранной платформы и вставьте его в поле "Клонировать URL-адрес ".

    https://github.com/staticwebdev/angular-basic.git

  9. Выберите "Импорт " и дождитесь завершения процесса импорта.

Создание Статического веб-приложения

Теперь, когда репозиторий создан, можно создать статическое веб-приложение на портале Azure.

  1. Переход на портал Azure.
  2. Выберите Создать ресурс.
  3. Найдите статическое веб-приложение.
  4. Выберите Статическое веб-приложение.
  5. Нажмите кнопку создания.

В разделе Основные сведения настройте новое приложение и свяжите его с репозиторием GitHub.

Снимок экрана: раздел

Параметр Значение
Отток подписок Выберите свою подписку Azure.
Группа ресурсов Выберите ссылку "Создать" и введите статические веб-приложения-test в текстовом поле.
Имя. В текстовом поле введите my-first-static-web-app .
Тип плана Выберите Бесплатно.
Исходный код При необходимости выберите GitHub и войдите в GitHub .

После входа в GitHub введите сведения о репозитории.

Параметр Значение
Организация Выберите свою организацию.
Репозиторий Выберите my-first-web-static-app.
Ветвь Выберите Main.

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

Примечание.

Если репозитории не отображаются:

  • Возможно, вам потребуется авторизовать Статические веб-приложения Azure в GitHub. Перейдите к репозиторию GitHub и перейдите в раздел "Параметры > авторизованных Приложение OAuth">, выберите Статические веб-приложения Azure и выберите "Предоставить".
  • Возможно, вам потребуется авторизовать Статические веб-приложения Azure в организации Azure DevOps. Чтобы предоставить разрешения, необходимо быть владельцем организации. Запрос доступа к сторонним приложениям через OAuth. Дополнительные сведения см. в разделе "Авторизация доступа к REST API" с помощью OAuth 2.0.

Начните с настройки нового приложения и связывания его с репозиторием Azure DevOps.

Параметр Значение
Отток подписок Выберите свою подписку Azure.
Группа ресурсов Выберите ссылку "Создать" и введите статические веб-приложения-test в текстовом поле.
Имя. В текстовом поле введите my-first-static-web-app .
Тип плана Выберите Бесплатно.
Исходный код Выберите DevOps.
Организация Выберите свою организацию.
Project Выберите проект.
Репозиторий Выберите my-first-web-static-app.
Ветвь Выберите Main.

Примечание.

Убедитесь, что используемая ветвь не защищена и у вас есть достаточные разрешения для выполнения push команды. Чтобы проверить, перейдите к репозиторию DevOps и перейдите в Репозиторий ->Ветвей и выберите "Дополнительные параметры". Затем выберите ветвь, а затем политики ветви, чтобы убедиться, что необходимые политики не включены.

В разделе Сведения о сборке добавьте сведения о конфигурации, относящиеся к предпочитаемой интерфейсной платформе.

  1. Выберите Angular в раскрывающемся списке Предустановки сборки.

  2. Оставьте в поле Расположение приложения значение по умолчанию.

  3. Оставьте поле Расположение API пустым.

  4. В поле "Расположение вывода" введите dist/angular-basic.

Примечание.

Если вы используете эти инструкции с собственным кодом и Angular 17 или более поздней версии, значение расположения выходных данных должно заканчиваться с /browser.

Выберите Review + create (Просмотреть и создать).

Снимок экрана: кнопка создания.

Примечание.

Чтобы изменить эти значения после создания приложения, поправьте файл рабочего процесса.

Нажмите кнопку создания.

Снимок экрана: кнопка

Выберите Перейти к ресурсу.

Снимок экрана: кнопка

Просмотр веб-сайта

При развертывании статического приложения следует учитывать два фактора. Сначала создаются базовые ресурсы Azure, составляющие приложение. Второй — это рабочий процесс, который создает и публикует приложение.

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

В окне обзора Статические веб-приложения отображается ряд ссылок, которые помогают взаимодействовать с веб-приложением.

Снимок экрана: окно обзора Статические веб-приложения Azure.

  1. При выборе действия GitHub в обзоре вы перейдете к GitHub Actions, запущенным в репозитории. Перед продолжением убедитесь, что действие развертывания завершено.

  2. После завершения рабочего процесса GitHub Actions можно выбрать ссылку URL-адреса, чтобы открыть веб-сайт на новой вкладке.

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

Очистка ресурсов

Если вы не собираетесь использовать это приложение в дальнейшем, вы можете удалить экземпляр службы "Статические веб-приложения Azure", выполнив следующие действия:

  1. Откройте портал Azure.
  2. Выполните поиск my-first-web-static-app с помощью верхней строки поиска.
  3. Выберите имя приложения.
  4. Выберите команду Удалить.
  5. Нажмите кнопку Да, чтобы подтвердить действие удаления (это действие может занять несколько секунд).

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

Добавление API в приложение

  • Last updated on