Dockerizing React, Spring Boot, and MySQL: A Practical Guide

Scenario:

You are tasked with dockerizing a full-stack web application that consists of a React frontend, a Spring Boot backend, and a MySQL database. The goal is to containerize each component of the application and utilize Docker Compose for seamless orchestration. This approach ensures consistency across different environments and simplifies deployment.

Objectives:

1. Containerize the React frontend, Spring Boot backend, and MySQL database.

2. Use Docker Compose to manage the multi-container setup.

3. Ensure communication between the frontend, backend, and database within the Docker network.

4. Allow for easy deployment and scalability of the application.

Step-by-Step Guide:

Step 1: Dockerize the React Frontend

1.1. Create a Dockerfile in the root of the React project.

# Use an official Node runtime as a parent image
FROM node:14

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the app source code
COPY . .

# Expose port 3000 to the outside world
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

Step 2: Dockerize the Spring Boot Backend

2.1. Create a Dockerfile in the root of the Spring Boot project.

# Use an official OpenJDK runtime as a parent image
FROM openjdk:11-jre-slim

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy the JAR file into the container at the specified working directory
COPY target/your-spring-boot-app.jar .

# Expose port 8080 to the outside world
EXPOSE 8080

# Command to run the application
CMD ["java", "-jar", "your-spring-boot-app.jar"]

Step 3: Dockerize the MySQL Database

3.1. Use the official MySQL Docker image. Create a docker-compose.yml file in the project root.

version: '3'
services:
  mysql:
    image: mysql:latest
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: your_database
      MYSQL_USER: your_user
      MYSQL_PASSWORD: your_password

Step 4: Docker Compose Setup

4.1. Create a docker-compose.yml file in the project root.

version: '3'

services:
  mysql:
    image: mysql:latest
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: your_database
      MYSQL_USER: mysql_user
      MYSQL_PASSWORD: mysql_password
    ports:
      - "3306:3306"
    networks:
      - sms_network

  sms-server:
    build:
      context: ./sms-server
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    networks:
      - sms_network
    depends_on:
      - mysql
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/your_database
      SPRING_DATASOURCE_USERNAME: user_name
      SPRING_DATASOURCE_PASSWORD: user_password
    links:
      - mysql

  sms-client:
    build:
      context: ./sms-client
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    networks:
      - sms_network
    depends_on:
      - sms-server

networks:
  sms_network:
    driver: bridge

Step 5: Build and Run the Containers

5.1. In the project root, run the following command:

docker-compose up --build

Conclusion:

You have successfully dockerized your React-Spring Boot-MySQL project. The application is now ready for deployment in a containerized environment, offering better scalability and consistency across different platforms. The use of Docker Compose simplifies the management of multiple containers, making the deployment process more efficient.