Упражнение - Приступайте

  • 7 мин

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

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

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

Для начала создайте репозиторий с помощью шаблона GitHub. Доступны ряд шаблонов репозитория, которые содержат начальное приложение, реализованное в различных интерфейсных платформах.

  1. Перейдите на страницу создания из шаблона GitHub.

  2. Если появится запрос на владельца, выберите одну из учетных записей GitHub.

  3. В поле "Имя репозитория" введите my-static-web-app-and-api.

  4. Выберите Создать репозиторий.

    При создании проекта из шаблона GitHub создает репозиторий в фоновом режиме.

Локальное выполнение приложения

Теперь у вас есть репозиторий GitHub с именем my-static-web-app-and-api в учетной записи GitHub. Затем клонируйте репозиторий GitHub и запустите код локально на компьютере.

  1. Откройте окно терминала на компьютере.

    Если вы находитесь в Windows, вы можете ввести cmd в поле поиска области системы.

  2. Чтобы клонировать репозиторий на компьютер, вставьте следующий код в окно командной строки.

    Обязательно замените <YOUR_GITHUB_USERNAME> именем пользователя GitHub.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api.git

    Заметка

    Если у вас возникли проблемы с копированием в терминал командной строки, щелкните правой кнопкой мыши значок в строке заголовка и на вкладке "Свойства ", убедитесь, что установлен флажок "Копировать и вставка" с помощью клавиш CTRL+SHIFT+C/V .

  3. Перейдите в каталог для клонированного исходного кода.

    cd my-static-web-app-and-api

  4. Перейдите в каталог для предпочтённого фреймворка для фронтенда.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Установите зависимости приложения.

    npm install

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

    npm audit fix

  7. Запустите клиентское приложение переднего плана.

    npm start

    npm start

    npm run dev

    npm run serve

Перейдите к приложению

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

Локальный хост для Angular — http://localhost:4200.

Снимок экрана локального хоста вашего веб-приложения Angular.

Локальный узел для React — http://localhost:3000.

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

Локальный узел для Svelte - это http://localhost:5000.

Снимок экрана локального хоста для вашего веб-приложения Svelte.

Локальный хост для Vue http://localhost:8080.

Снимок экрана вашего локального хоста для веб-приложения Vue.

Ваше приложение должно показывать Загрузка данных ..., так как данных или API пока нет. Вы добавите API для веб-приложения далее на этом занятии.

В терминале нажмите клавиши CTRL+C , чтобы остановить пакетное задание.

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

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

Вы создали собственный репозиторий GitHub. Теперь вы можете создать собственное статическое веб-приложение с помощью расширения статических веб-приложений Azure для Visual Studio Code.

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

  1. Откройте Visual Studio Code.

  2. В верхнем меню выберите "Просмотреть>расширения" и введите статические веб-приложения Azure в поле поиска.

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

Открытие папки приложения

  1. Выберите F1 , чтобы открыть палитру команд Visual Studio Code.

  2. Введите файл: открыть папку....

  3. Выберите папку my-static-web-app-and-api .

  4. Выберите "Открыть ", чтобы открыть папку в Visual Studio Code.

Вход в Azure через Visual Studio Code

  1. Выберите F1 , чтобы открыть палитру команд Visual Studio Code.

  2. Введите Azure: войдите и следуйте инструкциям по проверке подлинности.

    Важный

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

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

  1. Выберите F1 , чтобы открыть палитру команд Visual Studio Code.

  2. Откройте Azure: выберите Подписки и снимите все выделения, кроме Подписки Консьерж.

    Снимок экрана, на котором выбрана подписка

Зафиксировать изменения

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

  1. Выберите F1 , чтобы открыть палитру команд Visual Studio Code.

  2. Введите и выберите Git Commit All.

  3. Введите начальный коммит в верхнюю часть файла.

  4. Сохраните и закройте файл с коммитом Git.

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

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

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

  1. Выберите F1 , чтобы открыть палитру команд Visual Studio Code.

  1. Введите и выберите статические веб-приложения Azure: создание статического веб-приложения....

    Введите следующие значения для остальных строк палитры команд.

    Подсказка Ценность
    Подписка Выберите подписку «Concierge»
    Имя Введите my-static-web-app-and-api
    Область Выберите ближайший к вам регион
    Предустановка Выберите Angular
    Расположение кода приложения Введите angular-app
    Расположение выходных данных Введите dist/angular-app

  1. Введите и выберите статические веб-приложения Azure: создание статического веб-приложения....

    Введите следующие значения для остальных строк палитры команд.

    Подсказка Ценность
    Подписка Выберите подписку «Concierge»
    Имя Введите my-static-web-app-and-api
    Область Выберите ближайший к вам регион
    Предустановка Выбор React
    Расположение кода приложения Введите react-app
    Расположение выходных данных Введите dist

  1. Введите и выберите статические веб-приложения Azure: создание статического веб-приложения....

    Введите следующие значения для остальных строк палитры команд.

    Подсказка Ценность
    Подписка Выберите подписку «Concierge»
    Имя Введите my-static-web-app-and-api
    Область Выберите ближайший к вам регион
    Предустановка Выберите Svelte
    Расположение кода приложения Введите svelte-app
    Расположение выходных данных Введите общедоступные

  1. Введите и выберите статические веб-приложения Azure: создание статического веб-приложения....

    Введите следующие значения для остальных строк палитры команд.

    Подсказка Ценность
    Подписка Выберите подписку «Concierge»
    Имя Введите my-static-web-app-and-api
    Область Выберите ближайший к вам регион
    Предустановка Выберите Vue
    Расположение кода приложения Введите vue-app
    Расположение выходных данных Введите dist

Заметка

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

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

    Снимки экрана открытых действий в GitHub или всплывающего окна просмотра/изменения конфигурации.

    При настройке сборки Visual Studio Code сообщает о состоянии сборки.

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

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

    Снимок экрана: просмотр GitHub Actions.

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

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

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

    Ваше приложение должно показывать Загрузка данных ..., так как данных или API пока нет. Вы добавите API для веб-приложения позже в этом модуле.

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

Заметка

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

Извлечение изменений из GitHub

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

  1. Откройте палитру команд, нажав клавиши CTRL+SHIFT+P.

  2. Введите и выберите Git: Pull.

  3. Нажмите клавишу ВВОД.

Дальнейшие действия

Затем вы узнаете, как создать и запустить API с помощью проекта Функций Azure.