Упражнение. Создание экземпляра службы статических веб-приложений 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 Subscription и нажмите Enter.

    Снимок экрана: 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. Выберите местоположение и нажмите Enter.

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

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

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

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

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

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

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

  1. Выберите параметр React и нажмите Enter

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

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

    Снимок экрана, показывающий расположение кода в приложении React.

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

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

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

    Снимок экрана, на котором выбран параметр «svelte».

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

    Снимок экрана, на котором показано местоположение кода, указанного как приложение Svelte.

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

    Снимок экрана, показывающий, как ввести расположение выходных данных сборки для Svelte.

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

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

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

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

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

    Снимок экрана, демонстрирующий процесс ввода расположения выходных данных сборки для Vue

Примечание.

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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