Full-stack docker compose

This is the payoff for doing both masterclasses. One docker-compose.yml spins up Postgres, Redis, the backend service you built in the backend masterclass, and the Next.js frontend you built here. Every service talks to the others by name inside the Compose network. One command to start the whole stack.

docker-compose.yml
yaml
services:
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: bookstore
      POSTGRES_PASSWORD: bookstore
      POSTGRES_DB: bookstore
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U bookstore"]
      interval: 5s

  redis:
    image: redis:7-alpine
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]

  backend:
    build: ./backend
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_healthy
    environment:
      DATABASE_URL: postgres://bookstore:bookstore@db:5432/bookstore
      REDIS_URL: redis://redis:6379
    ports:
      - "4000:3000"

  frontend:
    build: ./frontend
    depends_on:
      - backend
    environment:
      BACKEND_URL: http://backend:3000
    ports:
      - "3000:3000"

The full stack wired together with health checks.

Notice how the frontend references the backend by its service name, http://backend:3000, not localhost. That is because inside the Compose network, every service is reachable by its name. The browser talking to localhost:3000 hits the frontend. The frontend talking to backend:3000 hits the backend. Two different namespaces, both routed correctly.

Quiz: Quiz

Loading practice…