Упражнение. Создание экземпляра службы статических веб-приложений Azure
В этом упражнении вы создадите экземпляр службы статических веб-приложений Azure, включая действие GitHub, которое будет выполнять сборку и публикацию вашего приложения автоматически.
Создание Статического веб-приложения
Теперь, когда вы создали репозиторий GitHub, вы можете создать экземпляр службы статических веб-приложений на портале Azure.
В этом модуле используется песочница Azure, которая позволяет использовать для выполнения упражнений бесплатную временную подписку Azure. Активируйте песочницу в верхней части этой страницы, прежде чем выполнять эти инструкции.
Активированная песочница Azure позволяет использовать службы Azure бесплатно.
Установка расширения Статических веб-приложений Azure для Visual Studio Code
Откройте Visual Studio Marketplace и установите расширение Статические веб-приложения Azure для Visual Studio Code.
Когда вкладка расширения загружается в Visual Studio Code, нажмите кнопку "Установить ".
После завершения установки нажмите кнопку "Перезапустить", чтобы обновить , если появится запрос.
Вход в Azure из Visual Studio Code
В Visual Studio Code выполните вход в Azure, выбрав Вид>Палитра команд, а затем введите команду Azure: вход.
Важно!
Войдите в Azure с помощью учетной записи, которая была использована для создания песочницы. Песочница предоставляет доступ к центру подписки.
Следуя инструкциям на экране, скопируйте и вставьте указанный в веб-браузере код, который проверяет подлинность сеанса Visual Studio Code.
Выбор подписки
Откройте Visual Studio Code и выберите Файл > Открыть, чтобы открыть в редакторе репозиторий, клонированный на компьютер.
Убедитесь, что вы отфильтровали подписки Azure, чтобы включить подписку Concierge, откройте палитру команд и введите
Azure: Select Subscriptionsи нажмите клавишу ВВОД.Выберите Подписка Concierge и нажмите клавишу ВВОД.
Создание Статического веб-приложения
Откройте Visual Studio Code и выберите Файл > Открыть, чтобы открыть в редакторе репозиторий, клонированный на компьютер.
В Visual Studio Code на панели действий выберите логотип Azure, чтобы открыть окно расширений Azure.
Примечание.
Вход в Azure и GitHub является обязательным. Если вы еще не вошли в Azure и на GitHub из Visual Studio Code, расширение предложит вам сделать это в процессе создания.
Поместите указатель мыши на заголовок Статические веб-приложения, щелкните правой кнопкой мыши и выберите "Создать статическое веб-приложение".
Введите my-first-static-web-app и нажмите клавишу ВВОД.
Выберите расположение и нажмите клавишу ВВОД.
Выберите параметр Настраиваемое и нажмите клавишу ВВОД.
Выберите angular-app в качестве расположения для кода приложения и нажмите клавишу ВВОД.
Введите dist/angular-app в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.
Выберите react-app в качестве расположения для кода приложения и нажмите клавишу ВВОД.
Введите build в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.
Выберите svelte-app в качестве расположения для кода приложения и нажмите клавишу ВВОД.
Введите public в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.
Выберите vue-app в качестве расположения для кода приложения и нажмите клавишу ВВОД.
Введите dist в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.
Примечание.
Ваш репозиторий может несколько отличаться от тех, которые вы могли использовать в прошлом. Он содержит четыре различных приложения в четырех разных папках. Каждая папка содержит приложение, созданное на отдельной платформе JavaScript. Обычно есть одно приложение в корневой папке репозитория, а путь к приложению указан после символа /. Это отличный пример того, почему служба статических веб-приложений Azure вообще позволяет настраивать расположения — вы получаете полный контроль над процессом сборки приложения.
После создания приложения в Visual Studio Code отобразится уведомление с подтверждением.
Во время выполнения развертывания расширение Visual Studio Code сообщает вам о состоянии сборки.
Ход развертывания можно просмотреть с помощью пункта "Действия" в GitHub (GitHub Actions), развернув меню Actions (Действия).
После завершения развертывания можно перейти напрямую на веб-сайт.
Чтобы просмотреть веб-сайт в браузере, щелкните правой кнопкой мыши проект в расширении "Статические веб-приложения" и выберите Просмотр сайта.
Поздравляем! Вы развернули свое первое приложение в службе статических веб-приложений Azure!
Примечание.
Не беспокойтесь, если вы видите веб-страницу с сообщением о том, что приложение еще не собрано и не развернуто. Обновите страницу в браузере через минуту. При создании статических веб-приложений Azure действие GitHub выполняется автоматически. Если отображается страница заставки, значит, приложение еще находится в процессе развертывания.