Docker Compose for Fullstack Node

Introduction

Docker Compose is a tool that allows you to define and run multi-container Docker applications. It enables you to manage and configure multiple containers as a single service. In this guide, we will explore how Docker Compose can be used for a fullstack Node.js application.

Prerequisites

Before getting started, ensure that you have the following prerequisites installed on your machine:

• Docker: https://docs.docker.com/get-docker/
• Docker Compose: https://docs.docker.com/compose/install/

Project Structure

Let's assume we have a fullstack Node.js application consisting of the following components:

• Backend API server (Node.js)
• Frontend web application (React.js)
• Database (MongoDB)

Our project directory structure will look like this:

project/
├── backend/
│   ├── Dockerfile
│   ├── package.json
│   └── src/
├── frontend/
│   ├── Dockerfile
│   ├── package.json
│   └── src/
└── docker-compose.yml

Dockerfiles

Since we have separate Dockerfiles for the backend and frontend, let's take a look at each of them.

Backend Dockerfile

# Use the official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and lock file to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY ./src ./src

# Expose the port on which the backend server will listen
EXPOSE 3000

# Start the backend server
CMD [ "npm", "start" ]

Frontend Dockerfile

# Use the official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and lock file to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY ./src ./src

# Build the frontend application
RUN npm run build

# Expose the port on which the frontend application will run
EXPOSE 3001

# Start a web server to serve the build files
CMD [ "npx", "serve", "-s", "build" ]

Docker Compose Configuration

Now let's define our Docker Compose configuration in the docker-compose.yml file.

version: '3'
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - '3000:3000'
    depends_on:
      - database

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - '3001:3001'

  database:
    image: mongo:latest
    ports:
      - '27017:27017'

In the Docker Compose file, we define three services: backend, frontend, and database. The build section specifies the build context and Dockerfile for each service. The ports section maps the exposed container ports to the host machine ports. The depends_on section ensures that the backend service starts after the database service.

Running the Application

To run the fullstack Node.js application using Docker Compose, navigate to the project directory and execute the following command:

docker-compose up

This command will build the Docker images for all services, create and start the containers, and print the logs to the console. You should now be able to access the frontend application at http://localhost:3001.

Conclusion

In this guide, we have explored how Docker Compose can be used to manage a fullstack Node.js application consisting of a backend API server, frontend web application, and a database. Docker Compose simplifies the process of running multi-container applications by providing a declarative configuration file.