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.ymland paths inDockerfile) according to your project structure.
Ensure your Laravel.envfile has the correct MySQL credentials (DB_HOST=mysql, etc.).
Top comments (0)