Dockerize Laravel API Backend + React Frontend Application
Tags: docker, laravel, react, vite
Published: 2024-07-07 02:04:44

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 `Dockerfile `in the root of your Laravel project:

```YML
# 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:

```bash
docker build -t laravel-app .
docker run -p 8000:80 --name laravel-container laravel-app
```
nsure your Laravel application is configured to use` pdo_mysql` in `.env`.

## Step 2: Dockerize the React Frontend
Create a `Dockerfile `in the root of your React project (assuming you're using `create-react-app`):

```YML
# 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:
```bash
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):

```YML
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:
```bash
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.).