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
.env2. 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=adminpass3. 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 -dOnce running, access each service:
- Next.js App:
http://localhost:3000 - pgAdmin UI:
http://localhost:5050(log in with your.envcredentials)
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: