Пошаговое руководство с примером проекта

В настоящее время существует множество способов создания и развертывания приложений Frontend, таких как бессерверные приложения, контейнеры и т. Д. Создание с помощью службы статических веб-приложений Azure является одним из них, и он недавно выпущен Microsoft Azure и находится в режиме предварительного просмотра.

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

  • Предварительные требования
  • Пример проекта
  • Как настроить при локальной разработке
  • Как настроить в других средах
  • Резюме
  • Заключение

Предпосылки

Если вы хотите разбираться в службе веб-приложений Azure Static, вам необходимо знать множество вещей. Во-первых, вам нужно создать две учетные записи: учетную запись Github для хранения исходного кода и учетную запись Microsoft для развертывания этого кода с помощью службы статических веб-приложений Azure. Давайте создадим эти учетные записи, перейдя по ссылкам ниже. И то, и другое можно запустить бесплатно.

Поскольку мы создаем приложение React, вам необходимо знать React CLI, nodejs и машинописный текст. Сначала вам нужно установить NodeJS, create-response-app, а затем вы можете создать приложение с помощью React CLI.

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

Пример проекта

Вот пример простого приложения todo, которое создает, извлекает, редактирует и удаляет задачи. Обычно мы запускаем API на сервере NodeJS, и вы можете использовать MongoDB для сохранения всех этих задач.

Когда дело доходит до веб-приложений Azure Static, вам необходимо запускать API с функциями Azure. Нам нужно выполнить ряд шагов, чтобы его настроить. Давайте углубимся в эти шаги в следующих разделах.

В приведенном выше примере мы хотим настроить цвет заголовка и цвет текста в качестве переменных среды, чтобы мы могли настройте их во время выполнения или измените, не касаясь кода.

Вы можете клонировать репозиторий и запустить его на своем локальном компьютере. Вы можете получить доступ к приложению на локальном хосте и на порту 3000.

// clone
git clone https://github.com/bbachi/react-azure-static-web-app.git
// Run the app
cd todo-app
npm install
npm start
// Run the API
cd api
npm install
npm start

Как настроить в локальной разработке

Прежде всего, нам нужно понять, как мы можем получить настройки из API, прежде чем загружать приложение React. Для этого вам нужно понимать React Hooks, особенно useEffect () с пустым массивом.

Если вы посмотрите на пример ниже, мы получаем данные в перехватчике реакции. Если мы передаем ловушке пустой массив, он вызывается абсолютно один раз после монтирования компонента.

API

Давайте посмотрим, как мы можем передавать переменные среды при локальной разработке. Когда вы создаете проект NodeJS функций Azure с помощью Azure Core Tools, создается файл с именем local.settings.json, в который вы можете помещать переменные. Например, давайте определим некоторые переменные для тестирования.

Мы определили переменные в настройках JSON. Давайте создадим API для получения этих настроек, а также посмотрим, как их прочитать в коде.

Мы определили функцию и выставили эти настройки на маршруте / settings. Обратите внимание, что мы считываем переменные среды с помощью process.env. Давайте запустим API и протестируем его, как показано ниже.

Давайте нажмем этот URL в браузере и посмотрим, как это работает.

Реагировать

Мы создали API, который считывает переменные среды и предоставляет их как GET REST API. Мы расскажем, как это следует читать, в приложении React. Нам нужно получить эти настройки перед загрузкой приложения, поскольку заголовок загружается в браузере первым. Мы должны использовать хук реакции useEffect, как упоминалось выше.

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

После того, как вы их определите, вам необходимо импортировать это в App.js, как показано ниже. Обратите внимание, что мы вызываем API через службу приложений. Мы определяем переменную состояния для настроек и вызываем API в хуке жизненного цикла useEffect (), как показано ниже. Поскольку мы передаем пустой массив, он вызывается только один раз, и мы устанавливаем переменную состояния appSettings и передаем ее компоненту Header.

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

Мы используем свойство Style для динамического применения этих стилей к заголовку после чтения и установки этих переменных в файле компонента. Вы можете увидеть, как эти стили применены полностью, из локального файла настроек.

Как настроить в других средах

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

После завершения развертывания вы можете увидеть статус на портале Azure, как показано ниже.

Теперь вы можете загрузить приложение в браузере без каких-либо определенных переменных среды. Вы можете заметить, что нет цвета фона и цвета текста заголовка.

Давайте определим эти переменные конфигурации, щелкнув конфигурацию в левой колонке.

Мы определили эти переменные, как показано ниже.

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

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

Резюме

  • Построение с помощью службы статических веб-приложений Azure - одна из них, недавно выпущенная Microsoft Azure и находящаяся в режиме предварительной версии.
  • Обычно мы отделяем некоторые элементы конфигурации от кода, чтобы мы могли настраивать их во время выполнения, иначе было бы проще поддерживать, потому что вам не нужно создавать код для каждой среды отдельно.
  • Вам необходимо понимать, как ловушки жизненного цикла работают в React, поскольку нам нужно получить эти настройки до того, как вы загрузите приложение в браузер.
  • Когда вы создаете проект NodeJS функций Azure с помощью Azure Core Tools, создается файл с именем local.settings.json, в который вы можете помещать переменные.
  • Вам необходимо настроить переменные среды в разделе конфигурации в настройках службы статических веб-приложений Azure.

Заключение

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