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

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

В настоящее время вы можете запускать свои приложения несколькими способами. Очень часто ваше приложение помещают в контейнер и запускают во время выполнения Docker. В Google Cloud Platform есть несколько вариантов, таких как App Engine, Cloud Run, GKE и т. Д. Но при использовании этих параметров у вас есть ограниченный контроль над базовой архитектурой. Если вам нужен полный контроль над базовой архитектурой, вы можете установить Docker на виртуальную машину GCP и запустить на ней свое приложение.

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

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

Предпосылки

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

Требования к GCP

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

После всех вышеперечисленных шагов вы можете увидеть панель управления консоли.

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

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

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

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

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

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

Запустить в Docker

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

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

Этап 1

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

2 этап

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

Вот полный Dockerfile

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

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

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

// run the image
docker run -d -p  3080:3080 --name react-node-ui react-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 react-node-image bbachin1/react-node-webapp
// push the image
docker push bbachin1/react-node-webapp

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

Давайте настроим виртуальную машину на GCP. Вам нужно перейти в раздел вычислений и выбрать Compute Engine, как показано ниже.

Выберите экземпляры ВМ и создайте их.

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

Есть еще один способ загрузить образ Docker. Вы можете отправить образ Docker в реестр контейнеров GCP и указать там URL-адрес вместо адреса Docker Hub.

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

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

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

Вам не нужно запускать команду, если вы не хотите открыть порт, отличный от 3080. Я запустил другой контейнер и сопоставил его с другим портом 8080, отличным от 3080.

Я могу получить доступ к приложению на обоих портах, вы можете проверить ниже с помощью команды curl.

curl localhost:3080
curl localhost:8080

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

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

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

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

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

http://34.121.124.55:3080

Резюме

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

Заключение

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