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

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

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

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

Предпосылки

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

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

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

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

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

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

Вот полный подробный пост по этому поводу.

Создание приложения Vue.js с помощью службы статических веб-приложений Azure

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

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

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

API

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

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

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

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

Vue UI

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

Заключение

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