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

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

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

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

• Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
• Организация Azure DevOps

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

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

Без платформы

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Примечание.

Для создания веб-приложения Статическим веб-приложениям Azure требуется по крайней мере один HTML-файл. Репозиторий, созданный на этом шаге, включает один файл index.html.

Angular

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Blazor

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

React

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/react-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Vue

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Щелкните Create repository (Создать репозиторий).

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

В этой статье используется репозиторий 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/vanilla-basic.git

   Angular

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

   Blazor

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

   React

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

   Vue

   https://github.com/staticwebdev/vue-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 в 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 и перейдите в Репозиторий ->Ветвей и выберите "Дополнительные параметры". Затем выберите ветвь, а затем политики ветви, чтобы убедиться, что необходимые политики не включены.

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

Без платформы

1. В раскрывающемся списке предустановок сборки выберите "Настраиваемый".
2. В поле "Расположение приложения" введите ./src.
3. Оставьте поле Расположение API пустым.
4. В поле "Расположение выходных данных" введите ./src.

Angular

1. В раскрывающемся списке предустановок сборки выберите Angular.
2. Оставьте в поле Расположение приложения значение по умолчанию.
3. Оставьте поле Расположение API пустым.
4. В поле "Расположение вывода" введите dist/angular-basic.

Blazor

1. В раскрывающемся списке предустановок сборки выберите Blazor.
2. Сохраните значение клиента по умолчанию в поле "Расположение приложения".
3. Оставьте поле Расположение API пустым.
4. Сохраните значение wwwroot по умолчанию в поле " Расположение выходных данных".

React

1. В раскрывающемся списке предустановок сборки выберите React.
2. Оставьте в поле Расположение приложения значение по умолчанию.
3. Оставьте поле Расположение API пустым.
4. В поле "Расположение выходных данных" введите сборку.

Vue

1. В раскрывающемся списке предустановок сборки выберите Vue.js.
2. Оставьте в поле Расположение приложения значение по умолчанию.
3. Оставьте поле Расположение API пустым.
4. Оставьте в поле Расположение артефакта приложения значение по умолчанию.

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанный контент

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

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

Добавление API