Краткое руководство. Создание первого статического веб-приложения
Статические веб-приложения Azure публикует веб-сайт в рабочей среде путем создания приложений из репозитория Azure DevOps или GitHub. В этом кратком руководстве показано, как развернуть веб-приложение в Статических веб-приложениях Azure с помощью портала Azure.
Необходимые компоненты
- Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
- Учетная запись GitHub
- Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
- Организация Azure DevOps
Создание репозитория
В этой статье для простоты используются шаблон из репозитория GitHub. Шаблон содержит начальное приложение для развертывания в Статические веб-приложения Azure.
- Перейдите к следующему расположению, чтобы создать новый репозиторий:
- Присвойте репозиторию имя my-first-static-web-app
Примечание.
Для создания веб-приложения Статическим веб-приложениям Azure требуется по крайней мере один HTML-файл. Репозиторий, созданный на этом шаге, включает один файл index.html.
Щелкните Create repository (Создать репозиторий).
Создание репозитория
В этой статье используется репозиторий Azure DevOps, чтобы упростить работу. Репозиторий предоставляет начальное приложение, используемое для развертывания с помощью Статические веб-приложения Azure.
Выполните вход в Azure DevOps.
Выберите новый репозиторий.
В окне "Создание проекта" разверните меню "Дополнительно" и выберите следующие элементы:
Параметр Значение Project Введите my-first-web-static-app. Visibility Выберите категорию Частное. Управление версиями Выберите Git. Процесс рабочих элементов Выберите вариант, подходящий для методов разработки. Нажмите кнопку создания.
Выберите пункт меню Repos.
Выберите пункт меню "Файлы".
В карточке репозитория импорта выберите "Импорт".
Скопируйте URL-адрес репозитория для выбранной платформы и вставьте его в поле "Клонировать URL-адрес ".
Выберите "Импорт " и дождитесь завершения процесса импорта.
Создание Статического веб-приложения
Теперь, когда репозиторий создан, можно создать статическое веб-приложение на портале Azure.
- Переход на портал Azure.
- Выберите Создать ресурс.
- Выполните поиск по запросу Статические веб-приложения.
- Выберите Статические веб-приложения.
- Нажмите кнопку создания.
В разделе Основные сведения настройте новое приложение и свяжите его с репозиторием GitHub.
| Параметр | Значение |
|---|---|
| Отток подписок | Выберите свою подписку Azure. |
| Группа ресурсов | Выберите ссылку "Создать" и введите статические веб-приложения-test в текстовом поле. |
| Имя. | В текстовом поле введите my-first-static-web-app . |
| Тип плана | Выберите Бесплатно. |
| Исходный код | При необходимости выберите GitHub и войдите в GitHub . |
При необходимости войдите с помощью GitHub и введите следующие сведения о репозитории.
| Параметр | Значение |
|---|---|
| Организация | Выберите свою организацию. |
| Репозиторий | Выберите my-first-web-static-app. |
| Ветвь | Выберите Main. |
Примечание.
Если список репозиториев не отображается:
Возможно, вам потребуется авторизовать Статические веб-приложения Azure в GitHub. Перейдите к профилю GitHub и перейдите к разделу "Параметры > авторизованных Приложение OAuth">, выберите Статические веб-приложения Azure и выберите "Предоставить".
Возможно, вам потребуется авторизовать Статические веб-приложения Azure в организации Azure DevOps. Чтобы предоставить разрешения, необходимо быть владельцем организации. Запрос доступа к сторонним приложениям через OAuth. Дополнительные сведения см. в разделе "Авторизация доступа к REST API" с помощью OAuth 2.0.
Начните с настройки нового приложения и связывания его с репозиторием Azure DevOps.
| Параметр | Значение |
|---|---|
| Отток подписок | Выберите свою подписку Azure. |
| Группа ресурсов | Выберите ссылку "Создать" и введите статические веб-приложения-test в текстовом поле. |
| Имя. | В текстовом поле введите my-first-static-web-app . |
| Тип плана | Выберите Бесплатно. |
| Функции Azure и сведения о промежуточном хранении | Выберите ближайший к вам регион. |
| Исходный код | Выберите Azure DevOps. |
| Организация | Выберите свою организацию. |
| Project | Выберите проект. |
| Репозиторий | Выберите my-first-web-static-app. |
| Ветвь | Выберите Main. |
Примечание.
Убедитесь, что используемая ветвь не защищена и у вас есть достаточные разрешения для выполнения push команды. Чтобы проверить, перейдите к репозиторию DevOps и перейдите в Репозиторий ->Ветвей и выберите "Дополнительные параметры". Затем выберите ветвь, а затем политики ветви, чтобы убедиться, что необходимые политики не включены.
В разделе Сведения о сборке добавьте сведения о конфигурации, относящиеся к предпочитаемой интерфейсной платформе.
- В раскрывающемся списке предустановок сборки выберите "Настраиваемый".
- В поле "Расположение приложения" введите ./src.
- Оставьте поле Расположение API пустым.
- В поле "Расположение выходных данных" введите ./src.
Выберите Review + create (Просмотреть и создать).
Нажмите кнопку создания.
Примечание.
Чтобы изменить эти значения после создания приложения, поправьте файл рабочего процесса.
Нажмите кнопку создания.
Выберите Перейти к ресурсу.
Просмотр веб-сайта
При развертывании статического приложения следует учитывать два фактора. Сначала создаются базовые ресурсы Azure, составляющие приложение. Второй — это рабочий процесс, который создает и публикует приложение.
Прежде чем перейти на новый статический сайт, сборка развертывания должна сначала завершить работу.
В окне обзора Статические веб-приложения отображается ряд ссылок, которые помогают взаимодействовать с веб-приложением.
При выборе баннера, который говорится, выберите здесь, чтобы проверить состояние выполнения GitHub Actions, перейдите к GitHub Actions, запущенным в репозитории. После завершения задания развертывания можно перейти на веб-сайт с помощью созданного URL-адреса.
Когда рабочий процесс GitHub Actions завершится, щелкните ссылку на URL-адрес, чтобы открыть веб-сайт на новой вкладке.
После завершения рабочего процесса можно выбрать ссылку URL-адреса, чтобы открыть веб-сайт на новой вкладке.
Очистка ресурсов
Если вы не собираетесь использовать это приложение в дальнейшем, вы можете удалить экземпляр службы "Статические веб-приложения Azure", выполнив следующие действия:
- Откройте портал Azure.
- Выполните поиск my-first-web-static-app с помощью верхней строки поиска.
- Выберите имя приложения.
- Выберите команду Удалить.
- Нажмите кнопку Да, чтобы подтвердить действие удаления (это действие может занять несколько секунд).