Привет всем 😊 👋 Это мой первый пост, так что потерпите меня.
В этой статье я расскажу вам, ребята, как мне удалось автоматизировать тестирование, сборку и развертывание (на GCP APP ENGINE ) моего веб-приложения, написанного на Реагировать и Spring Boot (кодовая база на GitHub) с помощью Google cloud trigger.
Содержание этой статьи
1) Структура каталогов, которую я использовал. 2) Настройка триггера DHCP для прослушивания коммитов репозитория на GitHub. 3) Требуется понимание различных конфигурационных файлов. 4) Развертывание интерфейса и серверной части в качестве разных сервисов для GCP APP Engine 5) Обслуживание внешнего интерфейса и серверной части из двух разных служб в одном домене.
1) Структура каталогов:
Ниже приведена структура каталогов, которую я использую для выполнения своих требований по тестированию, сборке и развертыванию UI и Server в коммите GitHub.
2) Настройка триггера DHCP для прослушивания коммитов репозитория GitHub
- Перейдите к своей консоли GCP
Создайте новый проект с именем web-app, вы можете дать любое имя но здесь я буду использовать веб-приложение
Как только проект будет создан, выберите этот проект и перейдите к триггерам, как указано ниже.
Как только вы окажетесь на странице триггеров, вы увидите Подключение репозитория как показано ниже, это подключит триггер к определенной ветке (в моем случае это была главная ветка) репозитория GitHub, и после подключения он будет прослушивать коммиты GitHub в этой ветке.
На приведенных ниже скриншотах объясняются шаги по подключению ветки из GitHub к вашему триггеру GCP projects.
a)
b)
c) Во-первых, вы должны добавить новую учетную запись , как только учетная запись GitHub будет добавлена, нажмите на Редактировать репозитории на GitHub , который перенаправит вас на GitHub , где он попросит вас выбрать репозитории, для которых триггер будет прослушиваться. d) После создания триггера вы можете просмотреть подробную информацию о триггере. В настоящее время ниже приведена конфигурация моего триггера * Событие: Переход в любую ветку * Статус: Включен * Конфигурация сборки: Автоматическое определение Вы можете редактировать эти конфигурации
Наконец, ваш триггер подключен к вашему репозиторию GitHub, но прежде чем мы что-либо зафиксируем в этом репозитории, нам нужно понять файл конфигурации, необходимый для тестирования, сборки и развертывания нашего приложения в APP Engine .
3) Требуется понимание различных конфигурационных файлов.
Нам нужно создать несколько скриптов, которые будут подхвачены триггерами GCP для создания и развертывания нашего приложения в GPS APP ENGINE
облачная сборка.yaml : Он улавливается и выполняется триггерами GCP при каждой фиксации на GitHub. Он должен присутствовать в корневом каталоге вашего проекта.
приложение.yaml : Это файл, используемый для развертывания вашего веб-приложения в GCP APP ENGINE на основе указанных в нем конфигураций.
4) Развертывание интерфейса и серверной части в качестве разных сервисов для GCP APP Engine
Google рекомендует использовать микросервисы в рамках проекта App engine вместо создания одного монолита, который обслуживает все запросы. Итак, у меня будет интерфейсный сервис, который использует Node.js среда выполнения и серверная служба, использующая среду выполнения Java.
- Развертывание серверной части (Java-приложение Spring Boot) в качестве новой службы
Для развертывания серверного java-приложения мы будем использовать docker. мы будем следовать приведенным ниже шагам a) Сначала создайте образ Docker, используя приведенный ниже dockerfile b) отправьте этот образ в GCP Container Registry c) Развертывание этого образа в GCP APP ENGINE с использованием приведенного ниже файла app.yaml
Ниже приведен мой файл Dockerfile (присутствует в server/Dockerfile)
FROM openjdk:8-alpine VOLUME /tmp ADD target/webapp-0.0.1-SNAPSHOT.jar app.jar ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
файл app.yaml для внутреннего развертывания (присутствует в server/src/main/appengine)
env: flex service: backend instance_class: F1 handlers: - url: /.* script: this field is required, but ignored
- Развертывание интерфейса в качестве нового сервиса: я собираюсь использовать Express.js для размещения моих статических файлов , ниже приведен код для обслуживания статических файлов
const express = require('express');
const path = require('path');
const app = express();
// This code makes sure that every request that matches a static file in the
// build folder, it serves that file.
app.use(express.static(path.join(__dirname, 'build')));
// This code makes sure that any request that does not matches a static file
// in the build folder, will just serve index.html.
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
// Starting the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}`);
});
После этого мы создадим папку пользовательского интерфейса файла app.yaml, как показано ниже, но помните, что package.json, запуск скриптов должен быть node app.js где app.js имеет серверный код для обслуживания статических файлов.
файл app.yaml для развертывания node.js приложение для размещения ваших статических файлов
runtime: nodejs
# new service named default is created where frontend will hosted
service: default
env: flex
instance_class: F1
threadsafe: true
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
5) Обслуживание внешнего интерфейса и серверной части из двух разных сервисов в одном домене.
Чтобы позволить балансировщику нагрузки Google решать, какой микросервис должен обрабатывать какой запрос, вы можете определить dispatch.yaml файл для перезаписи правил маршрутизации App Engine по умолчанию . Это должно быть сделано после запуска всех независимых служб. Моя депеша.файл yaml выглядит следующим образом:
dispatch:
# Route the URLs that point to the java backend to backend service
- url: "*/test/v1/*"
service: backend
# Route all other urls to the React.js frontend
- url: "*/*"
service: default
Ниже приведена окончательная сборка облака.файл yaml (присутствует в корневом каталоге проекта) для интерфейсных и серверных шагов, которые будут выполняться триггером
# below are the spteps executed by trigger
steps:
# frontend deployment
# Step 1: For installing dependencies
- name: "gcr.io/cloud-builders/npm"
dir: 'ui'
args: ["install"]
# Step 2: For creating optinimized build
- name: "gcr.io/cloud-builders/npm"
dir: 'ui'
args: ["run", "build"]
# Step 3: This step will execute app.yaml in your ui folder and deploy your app based on the configuration specified
- name: "gcr.io/cloud-builders/gcloud"
dir: 'ui'
args: ["app", "deploy"]
# timeout specified for this step as deployment may take more that default time(10min)
timeout: "30m0s"
# backend deployment
# Step 4: Running maven tests
- name: maven:3-jdk-8
entrypoint: mvn
dir: 'server'
args: ["test"]
# Step 5: Running **mvn clean install** and skipping test cases
- name: maven:3-jdk-8
entrypoint: mvn
dir: 'server'
args: ["clean", "install", "-Dmaven.test.skip=true"]
# Step 6: Creating docker image using docker file present in server folder
- name: docker
dir: 'server'
args: ["build", "-t", "gcr.io/web-app/webapp3", "."]
# Step 7: pushing docker image to GCP Container Registry
- name: "gcr.io/cloud-builders/docker"
args: ["push", "gcr.io/web-app/webapp3"]
# Step 8: Deploying this image using app.yaml present in **server/src/main/appengine** to GCP **APP ENGINE**
- name: 'gcr.io/cloud-builders/gcloud'
dir: 'server/src/main/appengine'
args: ['app', 'deploy', "--image-url=gcr.io/web-app/webapp3"]
timeout: "30m0s"
# Step 9: This step is make sure that dispatch.yaml file is deployed once all the services are started
# dispatch.yaml deployment
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "dispatch.yaml"]
timeout: "30m0s"
timeout: "100m0s"
images: ["gcr.io/web-app/webapp3"]
как только все службы будут запущены, вы можете перейти к GCP APP ENGINE и посмотрите развернутые службы и проложите маршруты отправки, как показано ниже:
Теперь вы можете продолжить и зафиксировать свой репозиторий GitHub.
Иди к тебе Мог бы построить -> История и вы видите, что можете начать строить.
как только сборка будет успешно завершена, ниже приведен скриншот, который вы можете увидеть.
Ура, вы успешно развернули свое веб-приложение в Google Cloud.
Если вы зашли так далеко, читая эту статью, пожалуйста, оставьте свой ценный комментарий или отзыв, чтобы я мог улучшить его в следующий раз.
Приятного Чтения!!
Оригинал: “https://dev.to/divyanshgothwal/creating-ci-cd-pipeline-using-triggers-of-google-cloud-for-web-app-written-in-spring-boot-java-and-react-js-gj7”