Пишем простой docker-compose.yml для контейнеризации приложения (React, Spring Boot, PostgreSQL, pgAdmin)

Всем привет!

В данной статье попробую рассказать как написать docker-compose.yml для контейнеризации простого приложения, которое будет состоять из фронта на React, бэкенда на Spring Boot, также будем использовать базу данных PostgreSQL, а для просмотра данных в базе pgAdmin.

Данная статья будет полезна начинающим разработчиком разобраться для чего нужен docker-compose.yml файл и как начать с ним работать.

Для понимания данной статьи необходимы минимальные знания по докеру, а также для использования примеров необходим установленный Docker у вас на компьютере.

План, что мы хотим сделать:

1. написать бэкенд с использованием Spring Boot (это будет простое приложение по работе с книгами, которое будет выполнять CRUD операции над ними);

2. подключить базу данных PostgreSQL для хранения данных;

3. подключить pgAdmin для просмотра данных в нашей базе PostgreSQL;

4. написать простой фронт на React для отображения, ввода, редактирования и удаления книг;

5. поместить все это в контейнеры и «заставить работать», для чего и будем использовать docker-compose.yml файл.

Начнем немного с теории. Docker-compose используется для управления несколькими контейнерами, входящими в состав одного приложения, это могут быть контейнеры созданные на основе образов нашего приложения (у нас это будут два контейнеры: один с бэкендом, а второй с фронтендом), а также сторонние контейнеры скачанные, например, с docker hub (у нас это будет контейнеры с базой данных и графическим клиентом к ней).

И конечно же логичный вопрос: для чего все это? зачем?

Ответ очень прост, Docker compose нужен для быстрого развертывания приложения, например, перенос приложения на другой сервер займет несколько минут, также в сочетании с kubernetes — дает превосходные результаты по автоматизации развертывания, масштабирования и координации работы нашего приложения в условиях кластера.

Итак приступим. Вначале напишем наш бэкенд, для этого идет на https://start.spring.io/ и создаем проект.

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

Открываем наш проект в среде разработки и вначале немного модифицируем наш pom.xml файл.

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.11</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>my-library-app</artifactId> <version>0.0.1-SNAPSHOT</version> <name>my-library-app</name> <description>Demo project for Spring Boot</description> <properties> <java.version>17</java.version> <org.mapstruct.version>1.4.2.Final</org.mapstruct.version> <lombok-mapstruct-binding.version>0.2.0</lombok-mapstruct-binding.version> <maven.compiler.plugin.version>3.5.1</maven.compiler.plugin.version> </properties> <dependencies> <!--JPA--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <!--WEB--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--LIQUIBASE--> <dependency> <groupId>org.liquibase</groupId> <artifactId>liquibase-core</artifactId> </dependency> <!--DEV-TOOLS--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <!--DATABASE--> <dependency> <groupId>org.postgresql</groupId> <artifactId>postgresql</artifactId> <scope>runtime</scope> </dependency> <!--LOMBOK--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!--MAPPING--> <dependency> <groupId>org.mapstruct</groupId> <artifactId>mapstruct</artifactId> <version>${org.mapstruct.version}</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok-mapstruct-binding</artifactId> <version>${lombok-mapstruct-binding.version}</version> </dependency> <!--TESTING--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>  <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>${maven.compiler.plugin.version}</version> <configuration> <source>17</source> <target>17</target> <annotationProcessorPaths> <path> <groupId>org.mapstruct</groupId> <artifactId>mapstruct-processor</artifactId> <version>${org.mapstruct.version}</version> </path> <path> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>${lombok.version}</version> </path> <path> <groupId>org.projectlombok</groupId> <artifactId>lombok-mapstruct-binding</artifactId> <version>${lombok-mapstruct-binding.version}</version> </path> </annotationProcessorPaths> </configuration> </plugin> </plugins> </build>  </project>

Из основных зависимостей:

postgresql — доступ к базе данных;

liquibase — будет использоваться для «накатывания» таблиц в базе данных и заполнения первоначальными данными.

mapstruct — для маппинга наших сущностей.

lombok — для сокращения шаблонного кода через использование аннотаций.

Начнем с кода нашей сущности, как я упоминал раньше — это будет книга (Book). Поэтому создадим класс Book.

@Data @NoArgsConstructor @AllArgsConstructor @Entity @Table(name = "book") public class Book {      @Id     @Column(name = "id")     @GeneratedValue(strategy = GenerationType.IDENTITY)     private Long id;     @Column(name = "title")     private String title;      @Column(name = "author")     private String author;      @Column(name = "year")     private int year;  } 

Далее интерфейс BookRepository и унаследуем его от JpaRepository — чтобы получить набор стандартных методов JPA для работы с БД.

public interface BookRepository extends JpaRepository<Book, Long> { } 

Создадим класс BookDto, так как уровень сервиса не должен напрямую работать с нашей сущностью Book (может в данном конкретном случае это и не нужно, так как это немного усложняет код).

@Data @NoArgsConstructor @AllArgsConstructor public class BookDto {      private Long id;     private String title;     private String author;     private int year; } 

Создадим интерфейс BookMapper для маппинга наших сущностей из Book и BookDto и обратно, здесь мы и используем mapstruct.

@Mapper(componentModel = "spring") public interface BookMapper {     Book dtoToModel(BookDto bookDto);      BookDto modelToDto(Book book);      List<BookDto> toListDto(List<Book> books); } 

Создадим еще один интерфейс BookService, в котором и напишем основные методы работы с нашими книгами.

public interface BookService {     List<BookDto> findAll ();     BookDto findById( Long id);     BookDto save (BookDto book);     void deleteById (Long id); } 

и реализуем эти методы в классе BookServiceImpl.

@Service @RequiredArgsConstructor @Transactional(readOnly = true) public class BookServiceImpl implements BookService {      private final BookRepository bookRepository;     private final BookMapper bookMapper;      @Override     public List<BookDto> findAll() {         return bookMapper.toListDto(bookRepository.findAll());     }      @Override     public BookDto findById(Long id) {         return Optional.of(getById(id)).map(bookMapper::modelToDto).get();     }      @Override     @Transactional     public BookDto save(BookDto book) {         return bookMapper.modelToDto(bookRepository.save(                 bookMapper.dtoToModel(book)));     }      @Override     @Transactional     public void deleteById(Long id) {         var book = getById(id);         bookRepository.delete(book);     }      private Book getById(Long id) {         return bookRepository.findById(id)                 .orElseThrow(() -> new RuntimeException(                         "Book with id: " + id + " not found"));     } } 

Последний класс, который мы создадим здесь — это будет BooksController — который и будет выдавать наши эндпойнты для просмотра, добавления, редактирования и удаления наших книг.

@RestController @RequestMapping("api/v1") @RequiredArgsConstructor public class BooksController {     private final BookService bookService;      @GetMapping("/books")     public List<BookDto> allBooks() {         return bookService.findAll();     }      @GetMapping("/book/{id}")     @ResponseStatus(HttpStatus.OK)     public ResponseEntity<BookDto> getBook(@PathVariable Long id) {         return ResponseEntity.ok().body(bookService.findById(id));     }      @PostMapping("/book")     public ResponseEntity<BookDto> createBook( @RequestBody BookDto book) throws URISyntaxException {         BookDto result = bookService.save(book);         return ResponseEntity.created(new URI("/api/v1/books/" + result.getId()))                 .body(result);     }      @PutMapping("/book/{id}")     @ResponseStatus(HttpStatus.OK)     public ResponseEntity<BookDto> updateBook( @PathVariable Long id, @RequestBody BookDto book) {         return ResponseEntity.ok().body(bookService.save(book));     }      @DeleteMapping("/book/{id}")     public ResponseEntity<?> deleteBook(@PathVariable Long id) {         bookService.deleteById(id);         return ResponseEntity.ok().build();     }  } 

Сейчас займемся нашим application.properties файлом и пропишем там доступ к нашей базе данных, включим настройки liquibase, настроим порт 8181 — чтобы наш бэкенд поднимался именно на этом порту, а также включим другие настройки.

server.port=8181  spring.datasource.url=jdbc:postgresql://localhost:15432/books_db spring.datasource.username=username spring.datasource.password=password  spring.jpa.hibernate.ddl-auto=none spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect spring.jpa.properties.hibernate.format_sql=true spring.jpa.show-sql=true  spring.mvc.pathmatch.matching-strategy = ANT_PATH_MATCHER  spring.liquibase.enabled=true spring.liquibase.drop-first=false spring.liquibase.change-log=classpath:db/changelog/db.changelog-master.xml spring.liquibase.default-schema=public 

Осталось написать liquibase скрипты для накатывания таблицы базы данных и вставки первоначальной информации.

Вначале создадим структуру папок как на рисунке

То есть в папке resources создаем папку db и в ней папку changelog, в которой находится файл db.changelog-master.xml, путь к нему прописан в нашем файле application.properties. Это будет основной файл, который будет запускать скрипты.

<?xml version="1.0" encoding="UTF-8" ?> <databaseChangeLog         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xmlns="http://www.liquibase.org/xml/ns/dbchangelog"         xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">      <include file="v.1.0.0/cumulative.xml" relativeToChangelogFile="true" />  </databaseChangeLog> 

Далее в папке changelog создаем папку v.1.0.0, где создаем три файла.

2023-05-12-1-create-table-book.xml — накатываем таблицу book

<?xml version="1.0" encoding="UTF-8" ?> <databaseChangeLog         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xmlns="http://www.liquibase.org/xml/ns/dbchangelog"         xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">      <changeSet logicalFilePath="2023-05-12-1-create-table-book"                id="2023-05-12-1-create-table-book" author="s.m">         <createTable tableName="book">             <column name="id" type="serial">                 <constraints nullable="false" primaryKey="true"/>             </column>             <column name="title" type="varchar(100)">                 <constraints nullable="false"/>             </column>             <column name="author" type="varchar(100)">                 <constraints nullable="false"/>             </column>             <column name="year" type="int">                 <constraints nullable="false"/>             </column>         </createTable>     </changeSet>  </databaseChangeLog> 

файл 2023-05-12-2-insert-books.xml — вставляем 6 книг в нашу таблицу

<?xml version="1.0" encoding="UTF-8" ?> <databaseChangeLog         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xmlns="http://www.liquibase.org/xml/ns/dbchangelog"         xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">      <changeSet logicalFilePath="2023-05-12-2-insert-books"                id="2023-05-12-2-insert-books" author="s.m">         <insert tableName="book">             <column  name="title"  value="Effective Java"/>             <column  name="author"  value="Joshua Bloch"/>             <column  name="year"  value="2018"/>         </insert>         <insert tableName="book">             <column  name="title"  value="Java Projects"/>             <column  name="author"  value="Peter Verhas"/>             <column  name="year"  value="2018"/>         </insert>         <insert tableName="book">             <column  name="title"  value="Spring in Action, 5th Edition"/>             <column  name="author"  value="Craig Walls"/>             <column  name="year"  value="2018"/>         </insert>         <insert tableName="book">             <column  name="title"  value="Java Persistence with Hibernate, Second Edition"/>             <column  name="author"  value="Christian Bauer, Gavin King, and Gary Gregory"/>             <column  name="year"  value="2015"/>         </insert>         <insert tableName="book">             <column  name="title"  value="Java: A Beginner's Guide, Eighth Edition"/>             <column  name="author"  value="Herbert Schildt"/>             <column  name="year"  value="2019"/>         </insert>         <insert tableName="book">             <column  name="title"  value="Spring Boot 2 Recipes"/>             <column  name="author"  value="Marten Deinum"/>             <column  name="year"  value="2018"/>         </insert>      </changeSet>  </databaseChangeLog> 

и файл cumulative.xml, где мы аккумулируем все наши файлы со скриптами, которые хотим запустить.

<?xml version="1.0" encoding="UTF-8" ?> <databaseChangeLog         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xmlns="http://www.liquibase.org/xml/ns/dbchangelog"         xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">      <include file="2023-05-12-1-create-table-book.xml" relativeToChangelogFile="true" />     <include file="2023-05-12-2-insert-books.xml" relativeToChangelogFile="true" />  </databaseChangeLog> 

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

Для этого создадим папку infrastructure, а в ней папку db. Должно получиться так.

И уже в папке db создадим файл create_db.sql — здесь мы создаем базу данных books_db.

create database books_db;

Сейчас в корне нашего проекта создаем Dockerfile

FROM maven:3.8.4-openjdk-17 as builder WORKDIR /app COPY . /app/. RUN mvn -f /app/pom.xml clean package -Dmaven.test.skip=true  FROM eclipse-temurin:17-jre-alpine WORKDIR /app COPY --from=builder /app/target/*.jar /app/*.jar EXPOSE 8181 ENTRYPOINT ["java", "-jar", "/app/*.jar"]

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

Здесь мы используем многоэтапную сборку, на первом этапе мы получаем jar-ник нашего проекта, а на втором мы его уже запускаем.

Пройдемся по Dockerfile

FROM maven:3.8.4-openjdk-17 as builder — указываем на основании какого образа, который докер стянет с docker hub мы будем билдить наш проект, as builder — это название, которое мы присвоили, для того чтобы обратиться с другого слоя образа для получения данных.

WORKDIR /app — создаем директорию app внутри слоя образа.

COPY . /app/. — копируем все наши папки с текущего проекта в папку app в слое образа.

RUN mvn -f /app/pom.xml clean package -Dmaven.test.skip=true — запускаем maven, который билдит наш проект и получаем jar-ник.

FROM eclipse-temurin:17-jre-alpine — снова указываем на основании какого образа, мы будем запускать наш проект, здесь уже мы не используем jdk, а только jre — так как нам не нужны инструменты разработчика.

WORKDIR /app — создаем директорию app в новом слое образа.

COPY —from=builder /app/target/.jar /app/.jar — копируем с предыдущего слоя с папки target наш jar-ник в папку app.

EXPOSE 8181 — указываем на каком порту должен работать наш контейнер.

ENTRYPOINT [«java», «-jar», «/app/*.jar»] — запускаем наше приложение в контейнере.

Пришло время написать сам docker-compose.yml файл.

Снова в корне нашего проекта создаем файл docker-compose.yml.

version: '3.8' services:   client-backend:     image: client:0.0.1     build:       context: .       dockerfile: Dockerfile     ports:       - "8181:8181"     depends_on:       - service-db     environment:       - SERVER_PORT= 8181       - SPRING_DATASOURCE_URL=jdbc:postgresql://service-db/books_db    service-db:     image: postgres:14.7-alpine     environment:       POSTGRES_USER: username       POSTGRES_PASSWORD: password     ports:       - "15432:5432"     volumes:       - ./infrastructure/db/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql       - db-data:/var/lib/postgresql/data     restart: unless-stopped    pgadmin     container_name: pgadmin4_container     image: dpage/pgadmin4:7     restart: always     environment:       PGADMIN_DEFAULT_EMAIL: admin@admin.com       PGADMIN_DEFAULT_PASSWORD: root     ports:       - "5050:80"     volumes:       - pgadmin-data:/var/lib/pgadmin  volumes:   db-data:   pgadmin-data:

Пройдемся немного по Dockerfile.

version: ‘3.8’ — указываем версию docker compose

services: — указываем какие контейнеры нам нужно будет поднять.

client-backend: — название первого контейнера с нашим бэкендом.

image: client:0.0.1 — указываем название контейнера и его тэг (можно без тэга, тогда будет автоматически присвоен latest).

build: — указываем, что мы хотим его получить не скачивая с докер хаба, а будем «строить» на основании Dockerfile.

context: . — указываем расположение Dockerfile, он у нас располагается в той же папке, что и docker-compose.yml

dockerfile: Dockerfile — указываем наименование Dockerfile

    ports:       - "8181:8181"

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

    depends_on:       - service-db

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

    environment:       - SERVER_PORT= 8181       - SPRING_DATASOURCE_URL=jdbc:postgresql://service-db/books_db

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

 service-db:     image: postgres:14.7-alpine

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

    environment:       POSTGRES_USER: username       POSTGRES_PASSWORD: password

указываем username и password, они должны совпадать с теми, что мы указали в application.properties.

    ports:       - "15432:5432"

указываем порты.

    volumes:       - ./infrastructure/db/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql       - db-data:/var/lib/postgresql/data

здесь мы указываем, чтобы выполнился наш скрипт, который мы написали ранее и который расположен в папке infrastructure/db по созданию базы данных books_db.

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

С контейнером pgadmin вроде все понятно, остановлюсь только на

    environment:       PGADMIN_DEFAULT_EMAIL: admin@admin.com       PGADMIN_DEFAULT_PASSWORD: root

это данные для входа в pgadmin по умолчанию.

Написали много кода, теперь его надо протестить, вначале протестим его без фронта, но потом еще добавил и его.

Итак, переходим в терминал, в папку с проектом и выполняем команду docker-compose up

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

В конце, в консоли вы должны будете увидеть запуск нашего бэкенда.

И если мы зайдем в Docker Desktop, то должны увидеть все три наши работающие контейнеры.

Давайте протестим как работает наш бэкенд. Для этого через Postman выполним команду http://localhost:8181/api/v1/books

и мы получим 6 наших книг, которые мы записали с помощью liquibase.

Зайдем в браузере на http://localhost:5050 и введем username: admin@admin.com и пароль: root

Мы должны зайти на pgAdmin

Здесь мы должны создать подключение к нашей базе данных. Для этого нажимаем Add New Server.

Name задаем любое.

Во вкладке Connection указываем

Host name — наименование, которое мы указали для контейнера с нашей БД (service-db).

Port — внутренний порт контейнера БД (5432).

Maintenance database — наименование нашей базы данных (books_db).

Username — тот юзернайм, который мы указали в docker-compose.yml для подключения к БД (username).

Password- тот пароль, который мы указали в docker-compose.yml для подключения к БД (password).

Далее если мы найдем нашу таблицу book и выполним в ней SELECT * FROM book мы увидим 6 наших книг.

Давайте добавим еще одну книгу. Для этого идем в Postman и отправим POST запрос на адрес http://localhost:8181/api/v1/book с JSON книги, которую мы хотим добавить.

Идем обратно в pgAdmin и смотрим какие книги у нас есть.

Последняя книга также появилась.

Сейчас остановим все наши контейнеры и удалим их, это можно сделать или через Docker Desktop или командами в терминале. Я это сделаю через Docker Desktop.

И снова их поднимем с помощью команды docker-compose up.

И зайдя снова на pgAdmin мы увидим 7 нашим книг, в том числе с последней, которую мы добавили.

Сейчас осталась последняя часть нашей работы — написать фронтэнд на React.

Для этого у вас на компьютере должен быть установлен Node.js и npm.

Чтобы проверить какие версии у вас установлены или вообще есть ли у вас Node.js и npm, можно воспользоваться командами node —version и npm —version.

Переходим в терминал и в корне нашего проекта выполняем команду npx create-react-app@5 frontend

Данной командой мы создадим React проект в папке frontend (папка появиться автоматически) в нашем основном проекте.

Командой cd frontend зайдем в папку frontend.

И выполним команду npm i bootstrap@5 react-cookie@4 react-router-dom@6 reactstrap@9 , данной командой мы установим Bootstrap , поддержку файлов cookie для React, React Router и Reactstrap.

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

Данный проект c фронтом можно делать и отдельно в другой директории (не в проекте с бэкендом), тогда надо будет поменять путь к Dockerfile к фронту в docker-compose.yml

В файл index.js добавим следующий импорт import 'bootstrap/dist/css/bootstrap.min.css';

Также в файл package.json добавим строку «proxy»: «http://host.docker.internal:8181» — для общения нашего фронта с бэкендом на порту 8181 через контейнер.

Добавим файл BookEdit.js для редактирования книг.

import React, { useEffect, useState } from 'react'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap'; import AppNavbar from './AppNavbar';  const BookEdit = () => {     const initialFormState = {         title: '',         author: '',         year: ''     };     const [book, setBook] = useState(initialFormState);     const navigate = useNavigate();     const { id } = useParams();      useEffect(() => {         if (id !== 'new') {             fetch(`/api/v1/book/${id}`)                 .then(response => response.json())                 .then(data => setBook(data));         }     }, [id, setBook]);      const handleChange = (event) => {         const { name, value } = event.target          setBook({ ...book, [name]: value })     }      const handleSubmit = async (event) => {         event.preventDefault();          await fetch(`/api/v1/book${book.id ? `/${book.id}` : ''}`, {             method: (book.id) ? 'PUT' : 'POST',             headers: {                 'Accept': 'application/json',                 'Content-Type': 'application/json'             },             body: JSON.stringify(book)         });         setBook(initialFormState);         navigate('/books');     }      const title = <h2>{book.id ? 'Edit Book' : 'Add Book'}</h2>;      return (<div>             <AppNavbar/>             <Container>                 {title}                 <Form onSubmit={handleSubmit}>                     <FormGroup>                         <Label for="title">Title</Label>                         <Input type="text" name="title" id="title" value={book.title || ''}                                onChange={handleChange} autoComplete="name"/>                     </FormGroup>                     <FormGroup>                         <Label for="author">Author</Label>                         <Input type="text" name="author" id="author" value={book.author || ''}                                onChange={handleChange} autoComplete="address-level1"/>                     </FormGroup>                     <FormGroup>                         <Label for="author">Year</Label>                         <Input type="text" name="year" id="year" value={book.year || ''}                                onChange={handleChange} autoComplete="address-level1"/>                     </FormGroup>                      <FormGroup>                         <Button color="primary" type="submit">Save</Button>{' '}                         <Button color="secondary" tag={Link} to="/books">Cancel</Button>                     </FormGroup>                 </Form>             </Container>         </div>     ) };  export default BookEdit;

Добавим также файл BookList.js для отображения книг.

import React, { useEffect, useState } from 'react'; import { Button, ButtonGroup, Container, Table } from 'reactstrap'; import AppNavbar from './AppNavbar'; import { Link } from 'react-router-dom';  const BookList = () => {      const [books, setBooks] = useState([]);     const [loading, setLoading] = useState(false);      useEffect(() => {         setLoading(true);          fetch('/api/v1/books')             .then(response => response.json())             .then(data => {                 setBooks(data);                 setLoading(false);             })     }, []);      const remove = async (id) => {         await fetch(`/api/v1/book/${id}`, {             method: 'DELETE',             headers: {                 'Accept': 'application/json',                 'Content-Type': 'application/json'             }         }).then(() => {             let updatedBooks = [...books].filter(i => i.id !== id);             setBooks(updatedBooks);         });     }      if (loading) {         return <p>Loading...</p>;     }      const bookList = books.map(book => {         return <tr key={book.id}>             <td style={{whiteSpace: 'nowrap'}}>{book.title}</td>             <td> {book.author || ''} </td>             <td> {book.year || ''} </td>             <td>                 <ButtonGroup>                     <Button size="sm" color="primary" tag={Link} to={"/books/" + book.id}>Edit</Button>                     <Button size="sm" color="danger" onClick={() => remove(book.id)}>Delete</Button>                 </ButtonGroup>             </td>         </tr>     });      return (         <div>             <AppNavbar/>             <tr></tr>             <Container fluid>                 <div className="float-end" >                     <Button color="success" tag={Link} to="/books/new">Add Book</Button>                 </div>                 <h3>My Books</h3>                 <Table className="mt-4">                     <thead>                     <tr>                         <th width="20%">Title</th>                         <th width="20%">Author</th>                         <th width="20%">Year</th>                         <th width="10%">Actions</th>                     </tr>                     </thead>                     <tbody>                     {bookList}                     </tbody>                 </Table>             </Container>         </div>     ); };  export default BookList;

Файл App.js исправим следующим содержанием.

import React from 'react'; import './App.css'; import Home from './Home'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import BookList from "./BookList"; import BookEdit from "./BookEdit";   const App = () => {   return (       <Router>         <Routes>           <Route exact path="/" element={<Home/>}/>           <Route path='/books' exact={true} element={<BookList/>}/>           <Route path='/books/:id' element={<BookEdit/>}/>         </Routes>       </Router>   ) }  export default App;

Добавим файл Home.js — это будет наша стартовая страница.

import React from 'react'; import './App.css'; import AppNavbar from './AppNavbar'; import { Link } from 'react-router-dom'; import { Button, Container } from 'reactstrap';  const Home = () => {     return (         <div>             <AppNavbar/>             <Container fluid>                 <Button color="link"><Link to="/books">Manage My Books</Link></Button>             </Container>         </div>     ); }  export default Home;

Добавим файл AppNavbar.js

import React, { useState } from 'react'; import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler} from 'reactstrap'; import { Link } from 'react-router-dom';  const AppNavbar = () => {      const [isOpen, setIsOpen] = useState(false);      return (         <Navbar color="info" dark expand="md">             <NavbarBrand tag={Link} to="/">Home</NavbarBrand>             <NavbarToggler onClick={() => { setIsOpen(!isOpen) }}/>             <Collapse isOpen={isOpen} navbar>                 <Nav className="justify-content-end" style={{width: "100%"}} navbar>                  </Nav>             </Collapse>         </Navbar>     ); };  export default AppNavbar;

Наш фронт готов. Теперь напишем Dockerfile для того, чтобы сделать на его основе образ.

В корне папки frontend создаем файл Dockerfile следующего содержания.

FROM node:18-alpine  WORKDIR /app  EXPOSE 3000  COPY ["package.json", "package-lock.json*", "./"]  RUN npm install  COPY . .  CMD ["npm", "start"]

FROM node:18-alpine — указываем на основании какого образа мы будем запускать наше приложение с фронтом. У нас будет образ внутри которого будет node и npm.

WORKDIR /app — как всегда внутри образа создаем папку app, в которой мы и будем сохранять наше приложение.

EXPOSE 3000 — на каком порту будет работать наш фронт.

COPY [«package.json», «package-lock.json*», «./»] — копируем файлы package.json и package-lock.json в наш образ, содержащие зависимости.

RUN npm install —  команда, устанавливающая пакеты, то есть она скачает пакет в папку проекта node_modules в соответствии с конфигурацией в файле package.json, обновив версию пакета везде, где это возможно (и, в свою очередь, обновив package-lock.json)

COPY . . — копируем исходный код в образ.

CMD [«npm», «start»] — запускаем проект.

Осталось добавить в наш docker-copmose.yml файл, информацию чтобы он автоматически создавал образ с нашим фронтом.

Теперь docker-compose будет выглядеть так.

version: '3.8' services:   client-frontend:     image: frontend:0.0.1     build: ./frontend     restart: always     ports:       - '3000:3000'     volumes:       - /app/node_modules       - ./frontend:/app          client-backend:     image: client:0.0.1     build:       context: .       dockerfile: Dockerfile     ports:       - "8181:8181"     depends_on:       - service-db     environment:       - SERVER_PORT= 8181       - SPRING_DATASOURCE_URL=jdbc:postgresql://service-db/books_db    service-db:     image: postgres:14.7-alpine     environment:       POSTGRES_USER: username       POSTGRES_PASSWORD: password     ports:       - "15432:5432"     volumes:       - ./infrastructure/db/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql       - db-data:/var/lib/postgresql/data     restart: unless-stopped    pgadmin:     container_name: pgadmin4_container     image: dpage/pgadmin4:7     restart: always     environment:       PGADMIN_DEFAULT_EMAIL: admin@admin.com       PGADMIN_DEFAULT_PASSWORD: root     ports:       - "5050:80"     volumes:       - pgadmin-data:/var/lib/pgadmin  volumes:   db-data:   pgadmin-data:

Мы добавили новый сервис — то есть новый образ на основании которого запустится контейнер.

  client-frontend:     image: frontend:0.0.1

 build: ./frontend

здесь мы указали, что хотим чтобы docker сбилдил контейнер на основании образа, полученного на основании Dockerfile расположенного в папке frontend.

    ports:       - '3000:3000'

запускаем наш фронт на порту 3000.

Файл docker-compose полностью готов. Запускаем.

Снова входим в терминал в папку с нашим проектом и запускаем команду docker-compose up

Все наши контейнеры должны работать.

Переходим в браузер и заходим на адрес http://localhost:3000/

Нажимаем на Manage My Books и мы должны получить все наши книги.

Также протестируем добавление книги.

Удаление книги.

И изменение книги

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

Вот и мы подошли к концу с написанием нашего небольшого приложения по сохранению книг и использовали при этом docker-compose файла.

Данная статья получилась очень большой. Поэтому особенно всем СПАСИБО, кто дочитал до конца.

Всем пока!!!

P.S.

Вот ссылки на проект на гитхабе: бэкенд и фронтэнд.