Упражнение. Начало работы

  • 3 мин

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

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

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

  1. Откройте страницу создания из шаблона, чтобы попасть в репозиторий шаблонов. Если вы получите ошибку 404: страница не найдена , войдите в GitHub и повторите попытку.

  2. Выберите одну из учетных записей GitHub в раскрывающемся списке "Владелец ".

  3. Присвойте репозиторию имя my-static-web-app.

  4. Нажмите кнопку "Создать репозиторий ".

Запустите приложение.

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

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

  2. Начните с клонирования репозитория GitHub в нужный каталог на компьютере.

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

  3. Перейдите в папку с исходным кодом.

    cd my-static-web-app

  4. Затем перейдите в папку предпочтительной интерфейсной платформы, как показано ниже.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

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

    npm install

    Примечание.

    Если вы получаете ошибку "Не удается найти ПУТЬ ", убедитесь, что вы установили Node.js из https://nodejs.org. Может потребоваться настроить пользовательскую настройку , которая включает установку параметра Add to PATH .

    Снимок экрана: настраиваемая установка параметров Node.js в мастере.

  6. Наконец, запустите интерфейсное клиентское приложение.

    npm start

    npm start

    npm run dev

    npm run serve

Перейдите к своему приложению.

Теперь посмотрим, как ваше приложение работает в локальном режиме. Все интерфейсные приложения используют разные порты.

Выберите ссылку, чтобы перейти к приложению.

Перейдите в http://localhost:4200.

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

Перейдите в http://localhost:3000.

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

Перейдите в http://localhost:5000.

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

Перейдите в http://localhost:8080.

Снимок экрана: переход в веб-приложение Vue.

Примечание.

В упражнениях этого модуля вы развернете приложение без API. Дополнительные сведения о следующем модуле см. в разделе "Дальнейшие действия" в конце этого модуля, где вы развернете API вместе с приложением.

Теперь закройте свое запущенное приложение, нажав клавиши CTRL+C в окне терминала.

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

Вы создали приложение, и теперь он работает локально в браузере.

Далее вы опубликуете свое приложение в службе статических веб-приложений Azure.