Как запустить приложение Angular в качестве контейнера на виртуальной машине Azure

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

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

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

• Предварительные требования
• Пример проекта
• Настройте виртуальную машину и установите Docker
• Запустить контейнер
• Доступ из браузера
• Резюме
• Заключение

Предпосылки

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

• NodeJS
• Angular CLI
• «Машинопись»
• VSCode
• Azure CLI

Предварительные требования для Azure

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

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

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

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

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

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

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

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

az account list --output table

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

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

// clone the project
git clone https://github.com/bbachi/angular-nodejs-minikube.git
// Run NodeJS server on port 3080
npm install
npm start
// Run Angular code on port 4200
cd my-app
npm install
npm start

Запустить в Docker

Мы используем многоступенчатые сборки для создания эффективных образов докеров. Создание эффективных образов Docker очень важно для более быстрой загрузки и уменьшения поверхностных атак. В этой многоэтапной сборке создание проекта Angular и размещение этих статических ресурсов в папке dist является первым шагом. Второй шаг включает в себя использование этих статических файлов сборки и их обслуживание на сервере узлов.

Давайте создадим образ с помощью Dockerfile. Вот что нам нужно для создания имиджа.

Этап 1

• Начать с базового образа node:10
• Есть два файла package.json: один для сервера nodejs, а другой для пользовательского интерфейса Angular. Нам нужно скопировать их в файловую систему Docker и установить все зависимости.
• Нам нужен этот шаг в первую очередь, чтобы быстрее создавать изображения на случай, если позже в исходный код будет внесено изменение. Мы не хотим повторять установку зависимостей каждый раз при изменении каких-либо исходных файлов.
• Скопируйте все исходные файлы.
• Angular использует Angular / CLI для создания приложения. Итак, устанавливаем CLI и устанавливаем все зависимости.
• Запустите npm run build, чтобы создать приложение Angular, и все ресурсы будут созданы в dist папке в папке my-app.

2 этап

• Начать с базового образа node:10
• Возьмите сборку из этапа 1 и скопируйте все файлы в папку. / my-app / dist.
• Скопируйте nodejs package.json
• Установите все зависимости
• Наконец, скопируйте server.js
• Используйте эту команду node server.js с CMD. Это автоматически запускается, когда мы запускаем изображение.

Вот полный Dockerfile

Давайте создадим образ с помощью следующей команды.

// build the image
docker build -t angular-node-image .
// check the images
docker images

После создания образа Docker. Вы можете запустить образ с помощью следующей команды.

// run the image
docker run -d -p  3080:3080 --name ang-node-ui angular-node-image
// check the container
docker ps

После запуска контейнера вы можете использовать приложение через порт 3080.

Публикация образа Docker

Давайте опубликуем образ Docker в Docker Hub с помощью этой команды docker push <repo name>. Перед этим вам необходимо создать учетную запись Docker Hub, если у вас ее нет. Вот ссылка на это.

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

// login
docker login
// tag the image
docker tag angular-node-image bbachin1/angular-node-webapp
// push the image
docker push bbachin1/angular-node-webapp

Настройте виртуальную машину и установите Docker

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

az account set --subscription <subscription id>

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

az group create --name vm-demo --location eastus

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

Давайте создадим виртуальную машину с помощью следующей команды. Я выбрал изображение ubuntuLTS.

az vm create \
  --resource-group vm-demo \
  --name dockerVM \
  --image UbuntuLTS \
  --admin-username azureuser \
  --generate-ssh-keys

Обратите внимание на свой собственный publicIpAddress в выводе вашей виртуальной машины. Этот адрес используется для доступа к виртуальной машине на следующих шагах. В этом случае общедоступный IP-адрес 40.87.64.208.. Вы можете проверить виртуальную машину, созданную на портале.

По умолчанию при создании виртуальной машины Linux в Azure открываются только SSH-подключения. Используйте az vm open-port, чтобы открыть TCP-порт 80 для веб-трафика.

az vm open-port --port 80 --resource-group vm-demo --name dockerVM

Давайте подключим ssh к виртуальной машине и установим на нее Docker с помощью следующих команд.

// ssh
ssh [email protected]
// install docker
sudo apt-get -y update
// remove any old versions of Docker
sudo apt-get remove docker docker-engine docker.io
// Install Docker
sudo apt install docker.io
// Start the Docker
sudo systemctl start docker
// Enable Docker so that Docker runs on startup
sudo systemctl enable docker
// check the version
docker --version

Запустить контейнер

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

// set the permission
sudo chmod 666 /var/run/docker.sock
// pull the image
docker pull bbachin1/angular-node-webapp

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

docker run -d -p  80:3080 --name ang-node-ui bbachin1/angular-node-webapp

Доступ из браузера

Нам известен общедоступный IP-адрес созданной нами виртуальной машины: 40.87.64.208, а контейнер работает на порту 3080 и сопоставлен с внешним портом 80. Вы можете получить доступ приложение из следующего места.

https://40.87.64.208:80

Резюме

• В настоящее время вы можете запускать свои приложения несколькими способами. Очень часто ваше приложение помещают в контейнер и запускают во время выполнения Docker.
• Если вам нужен полный контроль над базовой архитектурой, вы можете установить Docker на виртуальной машине Azure и запустить на ней свое приложение.
• Перед созданием виртуальной машины необходимо создать группу ресурсов.
• Вы можете создать виртуальную машину с любым из образов, например Windows, Centos, Ubuntu и т. Д.
• Вы можете указать образ Docker либо из реестра контейнеров, либо из Docker Hub.
• По умолчанию весь внешний трафик запрещен.
• Вы должны открыть порт, чтобы вы могли получить доступ к приложению из браузера.
• Вам необходимо установить разрешение на docker.sock, чтобы вы могли вытащить изображение, не получая ошибку отказа в разрешении.
• Вы можете получить доступ к приложению с помощью внешнего IP-адреса, предоставленного экземплярами виртуальных машин, и порта, который приложение прослушивает.

Заключение

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