Containerizing a Full-Stack Application with Docker Compose

Step 3: Executing the Plan

Now let's implement our containerization plan step by step.

Dockerizing the Frontend

First, let's create a Dockerfile for our React frontend. We'll use a multi-stage build approach to keep our production image small and efficient.

Create a file at frontend/Dockerfile:

# Frontend Dockerfile - frontend/Dockerfile

# Build stage
FROM node:18-alpine AS build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm ci

# Copy application code
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy built files from build stage to nginx
COPY --from=build /app/build /usr/share/nginx/html

# Add nginx configuration if needed
# COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose port 80
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile uses a multi-stage build approach:

1. First stage uses Node.js to build the React application
2. Second stage uses Nginx to serve the static files
3. Only the built assets are copied to the final image, keeping it small

Dockerizing the Backend

Next, let's create a Dockerfile for our Express.js backend API.

Create a file at backend/Dockerfile:

# Backend Dockerfile - backend/Dockerfile

# Base image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm ci

# Copy application code
COPY . .

# Expose API port
EXPOSE 4000

# Start the application
CMD ["npm", "start"]

For the backend, we use a simpler approach since we're not building static assets. We:

1. Use a Node.js Alpine image for a small footprint
2. Copy and install dependencies first (for better caching)
3. Copy the application code
4. Define the default command to start the application

Creating Docker Compose Configuration

Now let's create the Docker Compose file to orchestrate all our services together.

Create a file at the root of the project named docker-compose.yml:

# docker-compose.yml

version: '3.8'

services:
  # Frontend service
  frontend:
    build: 
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:80"  # Map host port 3000 to container port 80
    depends_on:
      - backend
    # For development, we can use a different setup with volume mounts (see below)

  # Backend API service
  backend:
    build: 
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "4000:4000"  # Map host port 4000 to container port 4000
    depends_on:
      - mongo
      - redis
    environment:
      - NODE_ENV=production
      - PORT=4000
      - MONGO_URI=mongodb://mongo:27017/mernapp
      - REDIS_HOST=redis
      - REDIS_PORT=6379
      # Add other environment variables as needed

  # MongoDB service
  mongo:
    image: mongo:6.0
    ports:
      - "27017:27017"  # Map MongoDB port for external tools access
    volumes:
      - mongo-data:/data/db  # Persist MongoDB data
    environment:
      - MONGO_INITDB_DATABASE=mernapp
      # Add authentication if needed
      # - MONGO_INITDB_ROOT_USERNAME=admin
      # - MONGO_INITDB_ROOT_PASSWORD=password

  # Redis service
  redis:
    image: redis:alpine
    ports:
      - "6379:6379"  # Map Redis port for external tools access
    volumes:
      - redis-data:/data  # Persist Redis data

# Define named volumes for data persistence
volumes:
  mongo-data:
  redis-data:

This Docker Compose file:

1. Defines four services: frontend, backend, mongo, and redis
2. Sets up appropriate port mappings to access services from the host
3. Configures dependencies between services
4. Sets environment variables for connecting services together
5. Creates named volumes for database persistence

Development Configuration

For development, we want hot reloading and real-time code updates. Let's create a development-specific Docker Compose file.

Create a file named docker-compose.dev.yml:

# docker-compose.dev.yml

version: '3.8'

services:
  # Development frontend configuration
  frontend:
    build: 
      context: ./frontend
      dockerfile: Dockerfile.dev  # We'll create this next
    ports:
      - "3000:3000"  # React development server port
    volumes:
      - ./frontend:/app  # Mount source code for hot reloading
      - /app/node_modules  # Exclude node_modules from volume mount
    environment:
      - NODE_ENV=development
      - REACT_APP_API_URL=http://localhost:4000  # Point to backend API
    depends_on:
      - backend

  # Development backend configuration
  backend:
    build: 
      context: ./backend
      dockerfile: Dockerfile.dev  # We'll create this next
    ports:
      - "4000:4000"
    volumes:
      - ./backend:/app  # Mount source code for hot reloading
      - /app/node_modules  # Exclude node_modules from volume mount
    environment:
      - NODE_ENV=development
      - PORT=4000
      - MONGO_URI=mongodb://mongo:27017/mernapp
      - REDIS_HOST=redis
      - REDIS_PORT=6379
    depends_on:
      - mongo
      - redis

  # MongoDB service (same as production)
  mongo:
    image: mongo:6.0
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db
    environment:
      - MONGO_INITDB_DATABASE=mernapp

  # Redis service (same as production)
  redis:
    image: redis:alpine
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data

volumes:
  mongo-data:
  redis-data:

Development Dockerfiles

Now let's create development-specific Dockerfiles for the frontend and backend.

Create a file at frontend/Dockerfile.dev:

# Frontend Development Dockerfile - frontend/Dockerfile.dev

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

# No need to copy the source code - we'll mount it as a volume
# COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Create a file at backend/Dockerfile.dev:

# Backend Development Dockerfile - backend/Dockerfile.dev

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

# Install nodemon for hot reloading
RUN npm install -g nodemon

# No need to copy the source code - we'll mount it as a volume
# COPY . .

EXPOSE 4000

CMD ["nodemon", "server.js"]

These development Dockerfiles are optimized for development workflows:

1. They don't copy source code (it will be mounted as a volume)
2. Use standard npm install instead of npm ci for faster iteration
3. The backend uses Nodemon to automatically restart on code changes
4. The frontend uses React's built-in development server with hot module replacement

Environment Variables

For better management of environment variables, let's create .env files for each environment.

Create a file named .env.development:

# .env.development

# Frontend variables
REACT_APP_API_URL=http://localhost:4000

# Backend variables
PORT=4000
MONGO_URI=mongodb://mongo:27017/mernapp
REDIS_HOST=redis
REDIS_PORT=6379
NODE_ENV=development

Create a file named .env.production:

# .env.production

# Frontend variables
REACT_APP_API_URL=/api

# Backend variables
PORT=4000
MONGO_URI=mongodb://mongo:27017/mernapp
REDIS_HOST=redis
REDIS_PORT=6379
NODE_ENV=production

Then update the Docker Compose files to use these environment files:

# Update docker-compose.yml to use production env file
services:
  frontend:
    # ... other config
    env_file:
      - .env.production
  
  backend:
    # ... other config
    env_file:
      - .env.production

# Update docker-compose.dev.yml to use development env file
services:
  frontend:
    # ... other config
    env_file:
      - .env.development
  
  backend:
    # ... other config
    env_file:
      - .env.development