Пошаговое руководство с примером проекта
В настоящее время вы можете запускать свои приложения несколькими способами. Очень часто ваше приложение помещают в контейнер и запускают во время выполнения 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 и т. Д.
Источник: