Dockerize Laravel API Backend + React Frontend Application

To Dockerize a Laravel API backend and React frontend application together in your development environment, we'll set up Dockerfiles for each project (Laravel and React) and a Docker Compose file to orchestrate them. Here’s a step-by-step guide:

Step 1: Dockerize the Laravel Backend

Create a Dockerfilein the root of your Laravel project:

# Use the official PHP image with Apache as the base image
FROM php:7.4-apache

# Set the working directory in the container
WORKDIR /var/www/html

# Install dependencies and enable Apache modules
RUN apt-get update && apt-get install -y \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libzip-dev \
    zip \
    unzip \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install gd pdo pdo_mysql zip \
    && a2enmod rewrite

# Copy existing application directory contents to the container
COPY . .

# Expose port 80 to allow outside access to our application
EXPOSE 80

# Apache gets grumpy about PID files pre-existing
RUN rm -f /var/run/apache2/apache2.pid

# Apache configuration (optional): Uncomment if you need custom Apache configurations
# COPY apache-config.conf /etc/apache2/sites-available/000-default.conf

# Start Apache server
CMD ["apache2-foreground"]

In the Laravel project directory, build and run the Docker container:

docker build -t laravel-app .
docker run -p 8000:80 --name laravel-container laravel-app

nsure your Laravel application is configured to usepdo_mysql in .env.

Step 2: Dockerize the React Frontend

Create a Dockerfilein the root of your React project (assuming you're using create-react-app):

# Use the official Node.js image with Yarn as the base image
FROM node:lts

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json if using npm
# COPY package*.json ./

# Install dependencies
RUN npm install -g serve
COPY . .

# Build your React application
RUN npm run build

# Expose port 3000 to allow outside access to our application
EXPOSE 3000

# Serve the React application using serve
CMD ["serve", "-s", "build"]

In the React project directory, build and run the Docker container:

docker build -t react-app .
docker run -p 3000:3000 --name react-container react-app

Step 3: Create a Docker Compose File

Create a docker-compose.yml file in the root directory (outside both projects):

version: '3.8'

services:
  laravel:
    build:
      context: ./path/to/laravel/project
      dockerfile: Dockerfile
    ports:
      - "8000:80"
    depends_on:
      - mysql

  react:
    build:
      context: ./path/to/react/project
      dockerfile: Dockerfile
    ports:
      - "3000:3000"

  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: laravel_database
      MYSQL_USER: root
      MYSQL_PASSWORD: example
      MYSQL_ROOT_PASSWORD: example
    ports:
      - "3306:3306"

Step 4: Start Docker Compose

In the directory where your docker-compose.yml file is located, start Docker Compose:

docker-compose up

This command will start all services defined in the docker-compose.yml file (laravel, react, and mysql).

Notes:

Adjust paths (context in docker-compose.yml and paths in Dockerfile) according to your project structure.
Ensure your Laravel .env file has the correct MySQL credentials (DB_HOST=mysql, etc.).