Dockerizing a PHP + React + Node.js Fullstack Project: Simplified DevOps for Developers

Dockerizing a fullstack project with PHP, React, and Node.js can simplify development and deployment. This guide walks you through setting up Docker Compose to manage your services, making DevOps accessible for fullstack developers. No complex jargon—just clear, actionable steps.

Prerequisites

• Docker and Docker Compose installed.
• Basic knowledge of PHP, React, and Node.js.
• A project with a PHP backend, React frontend, and Node.js API.

Step 1: Project Structure

Organize your project like this:

project/
├── backend/ # PHP backend
├── frontend/ # React frontend
├── api/ # Node.js API
├── docker-compose.yml
└── .env

Each folder contains its respective app. The docker-compose.yml ties them together.

Step 2: Set Up PHP Backend

Create a Dockerfile for the PHP backend in backend/Dockerfile:

FROM php:8.1-apache
WORKDIR /var/www/html
COPY . .
RUN docker-php-ext-install pdo pdo_mysql
EXPOSE 80

This uses the official PHP Apache image, copies your backend code, and installs MySQL extensions.

Step 3: Set Up React Frontend

Create a Dockerfile for the React frontend in frontend/Dockerfile:

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD ["npm", "start"]
EXPOSE 3000

This builds the React app and serves it using Node.js.

Step 4: Set Up Node.js API

Create a Dockerfile for the Node.js API in api/Dockerfile:

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
CMD ["node", "index.js"]
EXPOSE 4000

This sets up a simple Node.js server.

Step 5: Configure Docker Compose

Create docker-compose.yml in the project root:

version: '3.8'
services:
  php-backend:
    build: ./backend
    ports:
      - '8000:80'
    volumes:
      - ./backend:/var/www/html
    depends_on:
      - db
  react-frontend:
    build: ./frontend
    ports:
      - '3000:3000'
    volumes:
      - ./frontend:/app
  nodejs-api:
    build: ./api
    ports:
      - '4000:4000'
    volumes:
      - ./api:/app
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: app_db
    volumes:
      - db-data:/var/lib/mysql
volumes:
  db-data:

This defines four services: PHP backend, React frontend, Node.js API, and a MySQL database. Ports are mapped for access, and volumes persist data.

Step 6: Environment Variables

Create a .env file for sensitive data:

DB_HOST=db
DB_USER=root
DB_PASS=root
DB_NAME=app_db

Use these in your PHP backend to connect to the database.

Step 7: Run the Project

Run the following command in the project root:

docker-compose up --build

This builds and starts all services. Access them at:

• PHP backend: http://localhost:8000
• React frontend: http://localhost:3000
• Node.js API: http://localhost:4000

Step 8: Testing the Setup

• Check the PHP backend by visiting http://localhost:8000.
• Ensure the React app loads at http://localhost:3000.
• Test the Node.js API with a tool like Postman at http://localhost:4000.

Troubleshooting

• Container crashes? Check logs with docker-compose logs.
• Port conflicts? Change the host ports in docker-compose.yml.
• Database issues? Verify environment variables in .env.

Conclusion

You’ve dockerized a fullstack PHP, React, and Node.js project! Docker Compose simplifies managing multiple services, making DevOps approachable for developers. Scale your setup by adding more services or deploying to a cloud provider.

Happy coding!