Разверните приложение React и его серверную часть на Google Kubernetes Engine с помощью Adapt.js

В соавторстве с Маниш Вачхараджани.

С учетом всех разнообразных предложений облачных услуг, решений для хостинга и средств автоматизации определение того, как запустить ваше приложение в облаке, может оказаться непростой задачей. В этой статье я покажу вам, как разместить ваш интерфейс React, серверную часть Node.js и базу данных на Google Cloud Platform (GCP) с помощью одной команды из инструмента с открытым исходным кодом под названием Adapt.js.

неограниченные системы / адаптация
AdaptJS - это система для простого, надежного и повторяемого развертывания ваших полнофункциональных приложений. Адаптировать спецификации смотрите… github.com

Однако, прежде чем мы сможем это сделать, мы должны установить некоторое программное обеспечение и настроить вашу учетную запись Google Cloud, так что приступим!

Установка инструментов

В этом примере мы собираемся выполнить развертывание в кластере Google Kubernetes Engine (GKE) на Google Cloud Platform. Для этого нам понадобится несколько инструментов. Если у вас еще не установлены Google Cloud SDK (команда gcloud) и Docker, вам необходимо сначала установить их вместе с Node.js и Yarn:

Google Cloud SDK (инструкция по установке)
Докер (инструкция по установке)
Node.js и Yarn (инструкция по установке)

Затем установка Adapt - простая часть, просто выполните:

npm install -g @adpt/cli

ПРИМЕЧАНИЕ

Если вы получили EACCES ошибку от npm install, повторите команду от имени администратора (например, sudo npm install -g @adpt/cli).
Или вы можете использовать npx, как описано в нижней части этой страницы.

Настройка вашего проекта

В этой статье я собираюсь создать простой проект Adapt с надписью «Hello World!» Интерфейс React: "Hello World!" Серверная часть Express и база данных Postgres в одном монорепозитории. Чуть позже мы рассмотрим, как настроить эту настройку для вашего приложения.

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

Adapt предоставляет начальный шаблон, который можно использовать для быстрой настройки нового проекта. В этом примере мы будем использовать стартер hello-react-node-postgres. Также есть другие стартеры, или вы можете написать свой, любой git URL будет работать. Чтобы настроить наш стартер, просто введите:

adapt new hello-react-node-postgres ./myapp

Это создаст каталог с именем myapp и настроит его со всеми файлами, необходимыми для запуска нового приложения React (с использованием create-response-app), серверной части Express и проекта Adapt. Приложение React находится в каталоге ./myapp/frontend, серверная часть находится в каталоге ./myapp/backend, а проект Adapt находится в ./myapp/deploy.

Настройка Google Cloud

Во-первых, существует несколько разовых настроек для создания вашего первого кластера Kubernetes на GKE. После создания кластера вы можете развертывать (и повторно развертывать) приложения в нем, не повторяя шаги из этого раздела.

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

1. Создать учетную запись

Если у вас еще нет учетной записи Google Cloud, сначала настройте ее с помощью этих инструкций. При необходимости убедитесь, что вы ввели свою платежную информацию (например, бесплатная пробная версия отсутствует).

2. Войти

Если вы ранее не входили в систему с помощью gcloud CLI, сделайте это сейчас:

gcloud auth login

3. Создать проект

Мы создадим новый проект Google Cloud, чтобы все, что мы создаем в этом руководстве, было легко очистить в конце. На этом этапе вам нужно выбрать идентификатор проекта, уникальный для всего Google Cloud - не уникальный для вашей учетной записи, не уникальный для вашей организации, но уникальный для всей Google Cloud Platform в глобальном масштабе по всему миру.

Выполните следующую команду, которая создаст проект и установит его в качестве нашего проекта по умолчанию. Замените your_project_id выбранным идентификатором проекта.

gcloud projects create --set-as-default your_project_id

СОВЕТ

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

Теперь установите переменную с именем проекта, которое вы выбрали, чтобы мы могли использовать его на более поздних этапах. Снова замените your_project_id на тот, который вы выбрали.

MYPROJECTID=your_project_id

4. Установите зону вычислений и включите Kubernetes Engine API.

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

gcloud config set compute/zone us-central1-b
gcloud services enable container.googleapis.com

СОВЕТ

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

5. Создайте кластер Kubernetes

ВНИМАНИЕ

Здесь Google начнет взимать с вас плату.
Не волнуйтесь, мы все уберем в конце.

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

gcloud container clusters create mycluster \
  --enable-ip-alias \
  --machine-type "g1-small" \
  --disk-size "30" --num-nodes "1" \
  --no-enable-stackdriver-kubernetes

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

6. Получите учетные данные кластера

Теперь нам нужно настроить учетные данные для кластера Kubernetes и Docker.
Просто выполните следующие команды и ответьте «да», когда вас спросят, можно ли обновить вашу конфигурацию.

gcloud container clusters get-credentials mycluster
gcloud auth configure-docker

Создание развертывания для вашего приложения

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

cd myapp/deploy
export KUBE_DOCKER_REPO=gcr.io/${MYPROJECTID}
adapt run k8s-test --deployID app-test

Это запустит проект Adapt, который создает наше приложение Hello World React и развертывает тестовую версию приложения в кластере.

Вы можете получить доступ к приложению, посмотрев IP-адрес предоставленного сервиса через консоль GCP. Перейдите к Compute > Kubernetes Engine > Clusters в меню. Затем щелкните Services & Ingress на левой панели. В столбце Endpoints один из адресов должен быть интерактивной ссылкой. Щелкните ссылку, и вы должны увидеть "Hello World!" из вашего недавно развернутого приложения React.

Вы также заметите, что мы развернули некоторые дополнительные внутренние службы, включая серверную часть Node.js Express и службу базы данных Postgres, в дополнение к интерфейсу React. Мы скоро увидим, как их использовать.

Написание кода и обновление развертывания

Теперь, когда у нас запущен Hello World, мы можем редактировать код приложения React и легко отправлять изменения в GKE. Например, попробуйте изменить текст Hello World в файле myapp/frontend/src/App.js.

Затем, когда вы будете готовы внести изменения, введите:

# Make sure you are in the myapp/deploy directory first
adapt update app-test

Превращение Hello World в приложение MovieDB с полным стеком

Чтобы расширить наше приложение Hello World, вы можете следовать этим инструкциям, чтобы превратить Hello World в полнофункциональное приложение для поиска по базе данных фильмов, которое использует серверную часть Node.js Express и базу данных Postgres, которую мы развернули. После того, как вы выполнили инструкции и обновили приложение, серверная часть приложения фактически подключается к базе данных Postgres, чтобы предоставить результаты поиска фильмов. Adapt любезно загрузила некоторые образцы данных в развернутую тестовую базу данных, чтобы вы могли увидеть их в действии.

Еще раз, последним шагом будет запуск:

adapt update app-test

Adapt берет на себя тяжелую работу по настройке тестовой базы данных, построению контейнеров Docker, отправке их в реестры, написанию файлов YAML и всем другим утомительным задачам развертывания. Adapt даже позаботится о предоставлении учетных данных для базы данных Postgres серверной части Node.js через общие переменные среды PG*.

Архитектура, развернутая Adapt, полностью настраивается с использованием компонентов, подобных React. Если вы хотите настроить или добавить службы в свое развертывание, посетите https://adaptjs.org.

Отладка в GKE

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

Список запущенных модулей и сервисов:

kubectl get pod
kubectl get svc

Для каждого конкретного модуля вы можете получить подробный статус или журналы:

kubectl describe pod <name of pod>
kubectl logs <name of pod>

Эти журналы модуля будут содержать любые результаты console.log вызовов вашего приложения.

Использование существующей базы данных

В этом примере используется тестовая база данных, предоставленная компонентом <TestPosgres /> Adapt, который отлично подходит для системного и сквозного тестирования. Чтобы иметь постоянную базу данных, которая не будет перезагружаться при перезапуске или сбое, отредактируйте таблицу стилей производственной таблицы стилей (в myapp/deploy/styles.tsx) и поместите IP-адрес и учетные данные существующей базы данных в правило стиля <PostgresProvider />.

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

Убираться

Сначала уничтожьте компоненты приложения, которые Adapt развернул в кластере GKE:

adapt destroy app-test

Затем уничтожьте кластер GKE:

gcloud container clusters delete mycluster  # This will take a while

Вы можете удалить изображения, помещенные в реестр контейнеров Google, в консоли Google Cloud:

В раскрывающемся списке выберите идентификатор проекта, затем перейдите к Tools > Container Registry > Images в меню. Там вы можете удалить все изображения, которые не хотите хранить, чтобы сэкономить на хранении.

Если хотите, вы также можете удалить весь проект с помощью:

gcloud projects delete ${MYPROJECTID}

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

Изначально опубликовано в Адаптированном блоге.

Подписывайтесь на нас в Twitter 🐦 и Facebook 👥 и Instagram 📷 и присоединяйтесь к нашим Facebook и Linkedin Группы 💬 .

Чтобы присоединиться к нашему чату команды Slack в сообществе 🗣️ прочтите наши еженедельные темы о Фавнах 🗞️, и присоединитесь к сообществу 📣 нажмите здесь⬇