Как запустить и развернуть Vue с серверной частью NodeJS в службах приложений Azure

Пример проекта с Docker Runtime

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

В этом посте мы собираемся развернуть приложение Vue с бэкэндом nodejs в среде выполнения Docker. Во-первых, мы помещаем наше приложение в докер, отправляем этот образ в реестр контейнеров Azure и запускаем это приложение в службах приложений Azure. Вы можете выбрать среду выполнения NodeJS или докеризировать ее и развернуть в среде выполнения Docker. Образы Docker можно получить из Docker Hub, ACR и т. д.

• Необходимые условия
• Пример проекта
• Докеризация проекта
• Запуск API в Docker
• Отправка образа Docker в ACR
• Разверните его в службе приложений
• Демо
• Сводка
• Заключение

Предпосылки

• Если вы новичок в Vue.js, перейдите по ссылке ниже, чтобы узнать, как разрабатывать и создавать проект Vue.js с бэкендом NodeJS.

Как разработать и собрать приложение Vue.js с помощью NodeJS

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

Основы докера

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

• Докер-документы
• Docker — руководство для начинающих по Dockerfile с примером проекта
• Docker — Создание образов и управление ими
• Docker — управление контейнерами с примерами
• Понимание томов Docker на примере

Учетная запись Microsoft Azure

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

• Аккаунт Azure

Вам необходимо создать подписку для своей учетной записи. Наиболее распространенной является подписка Pay As You Go.

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

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

Это простой проект, демонстрирующий разработку и запуск приложения Vue с помощью NodeJS. У нас есть простое приложение, в котором мы можем добавлять пользователей, подсчитывать и отображать их сбоку, а также получать их в любое время.

Если вы хотите попрактиковаться, вот ссылка Github на этот проект. Вы также можете клонировать его и запустить на своем компьютере.

// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-example.git
// strat the api
cd api
npm install
npm run dev
// start the react app
cd my-app
npm install
npm run serve

Докеризация проекта

Служба приложений Azure — это управляемая служба, которая упрощает работу в среде выполнения Docker. Первое, что вам нужно сделать, это докеризировать ваш проект.

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

Вот команды для создания образа и запуска его на движке Docker на вашем локальном компьютере. Если вы новичок в Docker, посмотрите этот подробный пост на эту тему. Убедитесь, что ваш сервер NodeJS работает на порту 80.

// build the image
docker build -t vue-node-ui .
// list the image you just built
docker images

Запуск API в Docker

Теперь у нас есть образ докера, и давайте запустим контейнер, и как только он будет запущен, вы сможете получить доступ к приложению по адресу

// run the container
docker run -d -p 80:3080 --name vue-node-ui vue-node-ui
// list the container
docker ps
// logs
docker logs vue-node-ui
// exec into running container
docker exec -it vue-node-ui /bin/sh

Вы можете видеть, что приложение работает на порту 80.

Отправка образа Docker в ACR

Служба приложений Azure работает с любым реестром Docker, таким как Docker Hub и т. д. Но в этом посте мы увидим, как мы можем использовать реестр контейнеров Azure для хранения наших образов Docker. После настройки учетной записи портала Azure и создания группы ресурсов, как указано выше, вы можете создать реестр контейнеров, как показано ниже.

Убедитесь, что ваше приложение работает на порту 80, прежде чем создавать образ, изменив команду запуска.

Сначала создадим группу ресурсов с именем rg-appservices-demo с помощью следующей команды.

// create a resource group
az group create --name rg-appservices-demo --location westus

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

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

После просмотра и создания вы увидите следующий экран.

Вы можете увидеть главную страницу реестра контейнеров ниже.

Вы можете сделать то же самое с Azure CLI с помощью следующих команд. Перед выполнением приведенных ниже команд убедитесь, что вы вошли в свою учетную запись Azure с помощью CLI с помощью этой команды az login.

// create a resource group
az group create --name rg-appservices-demo --location westus
// create a container registry
az acr create --resource-group rg-appservices-demo \
  --name frontendapp --sku Basic

Пришло время собрать и отправить образ Docker с помощью следующей команды. Клонируйте приведенный выше пример проекта и перейдите в корневую папку, где находится Dockerfile, и выполните эту команду.

az acr build --image appdemo/frontend-app:v1 \
  --registry frontendapp \
  --file Dockerfile .

Вы увидите вывод ниже.

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

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

docker pull frontendapp.azurecr.io/appdemo/frontend-app:v1

Разверните его в службе приложений

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

На следующем экране вам нужно предоставить информацию о Docker. Мы отправили образ Docker в ACR, и нам нужно предоставить эти данные.

Учетная запись администратора по умолчанию отключена, и вам необходимо включить ее с помощью следующей команды.

az acr update -n frontendapp --admin-enabled true

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

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

Нажмите кнопку «Перейти к ресурсу» и найдите URL-адрес ниже.

Демо

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

https://app-frontend1.azurewebsites.net/

Резюме

• Если вы хотите развернуть приложение на управляемой платформе, выбрав среду выполнения, служба приложений — правильный выбор.
• Вы можете выбрать среду выполнения NodeJS или докеризировать ее и развернуть в среде выполнения Docker. Образы Docker можно получить из Docker Hub, ACR и т. д.
• Служба приложений Azure работает с любым реестром Docker, таким как Docker Hub и т. д.
• Перед созданием образа убедитесь, что ваше приложение работает на порту 80.
• Учетная запись администратора по умолчанию отключена, и вам необходимо включить ее для доступа к изображениям ACR из служб приложений.

Вывод

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