Azure - развертывание приложения React с серверной частью NodeJS на AKS

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

AKS - это управляемое решение Kubernetes от Microsoft Azure, которое позволяет запускать контейнерные приложения в облаке и управлять ими. Поскольку это управляемая служба Kubernetes, Microsoft заботится о многих вещах за нас, таких как безопасность, обслуживание, масштабируемость и мониторинг. Это заставляет нас быстро развертывать наши приложения в кластере Kubernetes, не беспокоясь о базовых деталях его построения.

В этом посте мы собираемся развернуть приложение React в среде nodejs. Сначала мы закрепляем наше приложение, отправляем этот образ в реестр контейнеров Azure и запускаем это приложение в Azure AKS. Мы увидим, как построить кластер Kubernetes в Azure AKS, получить доступ к кластерам извне, настроить kubectl для работы с кластером AKS и многое другое.

• Пример проекта
• Предварительные требования
• Установите Azure CLI и настройте
• Dockerize проекта
• Отправка образа Docker в реестр контейнеров
• Создание кластера AKS
• Настройте Kuebctl с помощью кластера AKS
• Развертывание объектов Kubernetes в кластере Azure AKS
• Доступ к веб-приложению из браузера
• Резюме
• Заключение

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

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

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

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

Предпосылки

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

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

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

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

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

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

Kubernetes: главное

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

• Документы Kubernetes
• Как начать работу с Kubernetes
• Примеры проектов

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

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

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

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

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

Установите Azure CLI и настройте

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

• Установить Azure CLI
• Войдите в свой аккаунт

Перечислим подписку с помощью следующей команды

az account list

Dockerize проект

Azure AKS - это управляемая служба, которая упрощает запуск Kubernetes в Azure. Первое, что вам нужно сделать, это докеризовать ваш проект.

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

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

Докеризация приложения React с помощью серверной части NodeJS

// build the image
docker build -t react-node-image .
// running on Image
docker run -it -p  3080:3080 --name react-node-ui react-node-image
// list the image you just built
docker images
// list the container
docker ps

Отправка образа Docker в реестр контейнеров

Реестр контейнеров Azure создает, хранит, защищает, сканирует, реплицирует и управляет образами и артефактами контейнеров с помощью полностью управляемого, геореплицируемого экземпляра распределения OCI. Подключайтесь между средами, включая службу Azure Kubernetes и Azure Red Hat OpenShift, а также между службами Azure, такими как служба приложений, машинное обучение и пакетная обработка.

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

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

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

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

// create a resource group
az group create --name k8s-demo --location westus
// create a container registry
az acr create --resource-group k8s-demo \
  --name regfrontend --sku Basic

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

az acr build --image aksdemo/react-nodejs:v1 \
  --registry regfrontend \
  --file Dockerfile .

Вы увидите результат ниже

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

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

docker pull regfrontend.azurecr.io/aksdemo/react-nodejs:v1

Создание кластера AKS

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

az group create --name k8s-demo --location westus

Давайте создадим кластер с помощью следующей команды. Обратите внимание, что мы используем ту же группу ресурсов, которую создали выше. Вы можете увидеть результат в формате JSON через несколько минут.

az aks create --resource-group k8s-demo --name frontend-cluster --node-count 3 --enable-addons monitoring --generate-ssh-keys

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

Настройте Kuebctl с помощью кластера AKS

Kubectl - это утилита командной строки для Kubernetes. Перед настройкой необходимо установить kubectl. Запускайте первую команду только в том случае, если на вашем локальном компьютере нет kubectl.

// install CLI
az aks install-cli
// connect to your cluster
az aks get-credentials --resource-group k8s-demo --name frontend-cluster
// get all the contexts
kubectl config get-contexts
// verify the current context
kubectl config current-context
// get the node
kubectl get nodes

Развертывание объектов Kubernetes в кластере Azure AKS

Теперь мы настроили kubectl для использования Azure AKS с нашего собственного компьютера. Вам необходимо интегрировать реестр контейнеров с AKS. Давайте присоединим реестр контейнеров к кластеру с помощью следующей команды. Вы можете изучить документацию по этому поводу.

az aks update -n frontend-cluster -g k8s-demo --attach-acr regfrontend

Давайте создадим объекты развертывания и обслуживания и будем использовать образ из реестра контейнеров Azure. Вот файл манифеста, который содержит эти объекты.

Если вы клонировали проект из приведенного выше примера и находитесь в корневой папке, просто используйте эту команду для создания объектов kubectl create -f manifest.yml

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

// list the deployment
kubectl get deploy
// list the pods
kubectl get po
// list the service
kubectl get svc

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

Доступ к веб-приложению из браузера

Мы создали сервис с типом LoadBalancer. Вы можете получить внешний IP-адрес от службы и получить доступ ко всему из браузера.

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

http://13.86.186.222:3080

Удалить кластер

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

az group delete --name k8s-demo

Резюме

• AKS - это управляемое решение Kubernetes от Microsoft Azure, которое позволяет запускать контейнерные приложения в облаке и управлять ими.
• Перед тем, как начать, вам нужно иметь docker и Kubernetes Essentials. Если у вас нет этих необходимых вещей, пройдите по ним по предоставленным ссылкам.
• Здесь вам необходимо создать учетную запись Microsoft Azure Account.
• Вам нужна подписка, которая будет связана с вашим клиентом, чтобы вся стоимость была оплачена по этой подписке.
• Вы также можете создать кластер AKS через портал, Azure CLI, REST API.
• Вы можете установить Azure CLI и настроить его для использования с кластером AKS.
• Настройте kubectl для использования кластера AKS.
• Вам необходимо интегрировать реестр контейнеров с AKS, и вам нужно прикрепить реестр контейнеров к кластеру разными способами. Вы можете изучить документацию по этому поводу.
• Создайте развертывание и сервис с помощью Loadbalancer, чтобы вы могли получить к нему доступ извне.
• Вы можете получить доступ к панели управления с помощью Kubeconfig или Token.
• Убедитесь, что вы удалили, если не хотите взимать плату.

Заключение

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