Упражнение. Создание экземпляра службы статических веб-приложений Azure

  • 5 мин

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

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

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

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

Активированная песочница Azure позволяет использовать службы Azure бесплатно.

Установка расширения Статических веб-приложений Azure для Visual Studio Code

  1. Откройте Visual Studio Marketplace и установите расширение Статические веб-приложения Azure для Visual Studio Code.

  2. Когда вкладка расширения загружается в Visual Studio Code, нажмите кнопку "Установить ".

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

Вход в Azure из Visual Studio Code

  1. В Visual Studio Code выполните вход в Azure, выбрав Вид>Палитра команд, а затем введите команду Azure: вход.

    Внимание

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

  2. Следуя инструкциям на экране, скопируйте и вставьте указанный в веб-браузере код, который проверяет подлинность сеанса Visual Studio Code.

Выбор подписки

  1. Откройте Visual Studio Code и выберите Файл > Открыть, чтобы открыть в редакторе репозиторий, клонированный на компьютер.

  2. Убедитесь, что вы отфильтровали подписки Azure, чтобы включить подписку Concierge, откройте палитру команд и введите Azure: Select Subscriptionsи нажмите клавишу ВВОД.

  3. Выберите Подписка Concierge и нажмите клавишу ВВОД.

    Снимок экрана: VS Code, показывающий, как фильтровать по подписке.

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

  1. Откройте Visual Studio Code и выберите Файл > Открыть, чтобы открыть в редакторе репозиторий, клонированный на компьютер.

  2. В Visual Studio Code на панели действий выберите логотип Azure, чтобы открыть окно расширений Azure.

    Снимок экрана: логотип Azure в VS Code.

    Примечание.

    Вход в Azure и GitHub является обязательным. Если вы еще не вошли в Azure и на GitHub из Visual Studio Code, расширение предложит вам сделать это в процессе создания.

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

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

  4. Введите my-first-static-web-app и нажмите клавишу ВВОД.

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

  5. Выберите расположение и нажмите клавишу ВВОД.

    Снимок экрана: выбор подписки.

  1. Выберите параметр Angular и нажмите клавишу ВВОД

    Снимок экрана: выбранный параметр angular.

  2. Введите /angular-app в качестве расположения кода приложения и нажмите клавишу ВВОД.

    Снимок экрана: расположение кода, введенного в качестве приложения Angular.

  3. Введите dist/angular-app в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.

    Снимок экрана: ввод расположения выходных данных сборки для Angular.

  1. Выберите параметр React и нажмите клавишу ВВОД

    Снимок экрана: выбранный параметр React.

  2. Введите /react-app в качестве расположения кода приложения и нажмите клавишу ВВОД.

    Снимок экрана: расположение кода, введенное как приложение React.

  3. Введите build в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.

    Снимок экрана: ввод расположения выходных данных сборки для React.

  1. Выберите параметр Svelte и нажмите клавишу ВВОД

    Снимок экрана: выбранный параметр svelte.

  2. Введите /svelte-app в качестве расположения кода приложения и нажмите клавишу ВВОД.

    Снимок экрана: расположение кода, введенного как приложение Svelte.

  3. Введите public в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.

    Снимок экрана: ввод расположения выходных данных сборки для Svelte.

  1. Выберите параметр Vue и нажмите клавишу ВВОД

    Снимок экрана: выбранный параметр vue.

  2. Введите /vue-app в качестве расположения кода приложения и нажмите клавишу ВВОД.

    Снимок экрана: расположение кода, введенного как приложение Vue.

  3. Введите dist в качестве расположения выходных данных сборки, в котором будут созданы файлы для рабочей среды приложения, и нажмите клавишу ВВОД.

    Снимок экрана: ввод расположения выходных данных сборки для Vue

Примечание.

Ваш репозиторий может несколько отличаться от тех, которые вы могли использовать в прошлом. Он содержит четыре различных приложения в четырех разных папках. Каждая папка содержит приложение, созданное на отдельной платформе JavaScript. Обычно есть одно приложение в корневой папке репозитория, а путь к приложению указан после символа /. Это отличный пример того, почему служба статических веб-приложений Azure вообще позволяет настраивать расположения — вы получаете полный контроль над процессом сборки приложения.

  1. После создания приложения в Visual Studio Code отобразится уведомление с подтверждением.

    Снимок экрана: код подтверждения с просьбой пользователя открыть действия в GitHub или View/Edit Configure.

    Во время выполнения развертывания расширение Visual Studio Code сообщает вам о состоянии сборки.

    Снимок экрана: пользовательский интерфейс VS Code с ожиданием развертывания.

  2. Ход развертывания можно просмотреть с помощью пункта "Действия" в GitHub (GitHub Actions), развернув меню Actions (Действия).

    Снимок экрана: проверка хода выполнения с помощью GitHub Actions.

    После завершения развертывания можно перейти напрямую на веб-сайт.

  3. Чтобы просмотреть веб-сайт в браузере, щелкните правой кнопкой мыши проект в расширении "Статические веб-приложения" и выберите Просмотр сайта.

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

Поздравляем! Вы развернули свое первое приложение в службе статических веб-приложений Azure!

Примечание.

Не беспокойтесь, если вы видите веб-страницу с сообщением о том, что приложение еще не собрано и не развернуто. Обновите страницу в браузере через минуту. При создании статических веб-приложений Azure действие GitHub выполняется автоматически. Если отображается страница заставки, значит, приложение еще находится в процессе развертывания.