Предыдущий

Следующая

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

Завершено

Служба статических веб-приложений 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
   

   Примечание.

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

   

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

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

Продолжить