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:
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 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):
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 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):
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:
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.).