Back to roadmaps docker-compose Course

Project: Full-Stack Stack with PostgreSQL and pgAdmin

In this project, we will deploy a three-service development environment using Docker Compose: a Next.js application, a PostgreSQL database, and a pgAdmin web interface for database management. All data is stored in a named volume for persistence.


1. Project Structure

fullstack-stack/
  app/
    (Next.js project files)
    Dockerfile
  docker-compose.yml
  .env

2. Environment Variables

Create .env file in the root directory:

# .env
POSTGRES_USER=admin
POSTGRES_PASSWORD=devpassword123
POSTGRES_DB=myapp_db
PGADMIN_EMAIL=admin@example.com
PGADMIN_PASSWORD=adminpass

3. Docker Compose Configuration

Create docker-compose.yml:

services:
  nextjs-app:
    build:
      context: ./app
      dockerfile: Dockerfile
    container_name: nextjs-app
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@postgres-db:5432/${POSTGRES_DB}
    depends_on:
      - postgres-db

  postgres-db:
    image: postgres:16-alpine
    container_name: postgres-db
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
    volumes:
      - postgres-data:/var/lib/postgresql/data

  pgadmin-ui:
    image: dpage/pgadmin4:latest
    container_name: pgadmin-ui
    ports:
      - "5050:80"
    environment:
      PGADMIN_DEFAULT_EMAIL: ${PGADMIN_EMAIL}
      PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_PASSWORD}
    depends_on:
      - postgres-db

volumes:
  postgres-data:

4. Running and Accessing Services

Start all three services:

docker compose up -d

Once running, access each service:

  • Next.js App: http://localhost:3000
  • pgAdmin UI: http://localhost:5050 (log in with your .env credentials)

Inside pgAdmin, add a new server connection pointing to hostname postgres-db (the Docker service name), port 5432, using your configured credentials. This gives you a full visual database management interface alongside your running application.

Published on Last updated: