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

• 7 мин

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

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

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

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

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

   • Если появляется ошибка 404 "Страница не найдена", войдите в GitHub и попробуйте еще раз.

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

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

4. Щелкните Create repository from template (Создание репозитория из шаблона).

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

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

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

2. Для начала клонируйте репозиторий GitHub на компьютер.

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

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

   cd my-static-web-app-authn
   

Локальная настройка CORS

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

Для этого Функции Azure должны разрешать вашему веб-приложению отправлять HTTP-запросы к API на вашем компьютере.

1. Создайте файл с именем api/local.settings.json.

2. Добавьте в этот файл следующее.

   {
     "Host": {
       "CORS": "http://localhost:4200"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:3000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:5000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:8080"
     }
   }
   

Запуск API

Папка api содержит проект Функций Azure с конечными точками HTTP для веб-приложения. Начните с локального запуска API, выполнив приведенные ниже действия.

1. Откройте палитру команд Visual Studio Code, нажав клавишу F1.

2. Введите и выберите Терминал: создать встроенный терминал.

3. Перейдите в папку api.

   cd api
   

4. Запустите приложение Функций Azure локально.

   func start
   

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

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

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

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

   npm install
   

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

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

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

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

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

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

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

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

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

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

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

Установка расширения Статических веб-приложений 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, открыв палитру команд F1, введя Azure: Select Subscriptionsи нажав клавишу ВВОД.

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

   

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

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

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

   

   Примечание.

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

3. Наведите указатель мыши на метку Статические веб-приложения и выберите + (знак "плюс").

   

4. Когда в верхней части редактора откроется палитра команд, выберите Подписка Concierge и нажмите клавишу ВВОД.

   

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

   

6. Выберите ближайший к вам регион и нажмите клавишу ВВОД.

   

7. Выберите соответствующий параметр платформы и нажмите клавишу ВВОД.

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

    

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    

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

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

    

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

Вытягивание изменений из GitHub

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

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

2. Введите и выберите Git: получить, а затем нажмите клавишу ВВОД.

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

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