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

Пример проекта с GitHub Actions и Azure DevOps

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

В этом посте мы увидим, как мы можем разработать приложение Vue.js с помощью этого сервиса, на примере внешних и внутренних вызовов NodeJS API.

Необходимые условия
Пример проекта
С помощью действий GitHub
С Azure DevOps
Сводка
Заключение

Предпосылки

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

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

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

Функции Azure
Расширение функций Azure для Visual Studio Code
Расширение Live Server для Visual Studio Code

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

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

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

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

// clone the project
git clone https://github.com/bbachi/vue-azure-static-web-app.git
// run the api
cd api
npm install
npm start
// run the app
cd todo-app
npm install
npm run serve

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

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

С действиями GitHub

Статические веб-приложения Azure публикуют веб-сайты в рабочей среде, создавая приложения из репозитория GitHub. Если у вас нет учетной записи Github, пришло время ее создать. Я создал репозиторий для проекта под названием vue-azure-static-web-app.

Прежде чем что-либо делать, вам необходимо создать учетную запись Microsoft Azure. После входа в систему вы можете нажать «Создать ресурс» и выбрать «Статическое веб-приложение».

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

Вы можете заметить, что я дал тот же проект, который я создал выше, в учетной записи Github. Вам необходимо предоставить такие сведения, как местоположение приложения, местоположение API и местоположение артефакта. Весь код API находится в папке api, и когда я создаю приложение Vue.js, все созданные файлы помещаются в папку dist.

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

После завершения развертывания развертывание автоматически создает действие рабочего процесса и конвейер CI/CD, как показано ниже.

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

https://github.com/bbachi/vue-azure-static-web-app/blob/master/.github/workflows/azure-static-web-apps-brave-ocean-0a8755b0f.yml

С Azure DevOps

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

Нажмите на репозитории и создайте репозиторий для приложения Vue, как показано ниже.

Возьмите код из приведенного выше примера проекта и поместите его в этот репозиторий.

Вы можете перейти на эту страницу ниже, где указаны все необходимые сведения, такие как группа ресурсов, имя, регион и т. д. Вы должны выбрать вариант «Другое» в «Сведениях о развертывании», кроме репозитория исходного кода.

Нажмите кнопку «Создать», и через некоторое время вы увидите успешное развертывание.

Перейдите к ресурсу и получите доступ к сайту с URL-адресом на странице обзора.

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

Скопируйте его и сохраните где-нибудь. Теперь давайте перейдем к Azure DevOps и настроим сборку репозитория, который мы создали выше.

Выберите начальный конвейер на следующем экране.

Вы должны заменить вышеуказанный файл YAML на этот. Обратите внимание, что мы настраиваем правильные местоположения для app_location, api_location, output_location.

Щелкните вкладку «Переменные» в правом верхнем углу, чтобы настроить токен развертывания.

После завершения настройки вы можете нажать кнопку «Сохранить и запустить».

Вот работает трубопровод.

Резюме

Создание с помощью службы статических веб-приложений Azure — это одна из стратегий развертывания, недавно выпущенная Microsoft Azure, и она находится в режиме предварительного просмотра.
Вам необходимо создать две учетные записи: учетную запись Github для хранения исходного кода и учетную запись Microsoft для развертывания этого кода с помощью службы статического веб-приложения Azure.
Статические веб-приложения Azure публикуют веб-сайты в рабочей среде, создавая приложения из репозитория GitHub. Если у вас нет учетной записи Github, пришло время ее создать.
Прежде чем что-либо делать, вам необходимо создать учетную запись Microsoft Azure. На момент написания статьи служба статических веб-приложений Azure находилась в режиме предварительного просмотра.
Для разработки Vue и API лучше создать отдельную папку.

Вывод

Существует два способа развертывания службы статических веб-приложений Azure: Azure DevOps и Github Actions.