Multi-Container App: Build & Push (Practical)

A worked example: a frontend (HTML/JS) plus a backend (Node.js/Express on port 5000), containerised and pushed to Docker Hub.

The full flow (in order)

1. Docker Hub: create a public repository (hub.docker.com → Repositories → Create Repository).
2. Clone the repo and cd into it.
3. Write a Dockerfile in each service folder (backend, frontend).
4. Write docker-compose.yml in the repo root.
5. Push the code to the repo:

git add .
git commit -m "Add Dockerfiles and docker-compose"
git push origin main

6. Build & push the images:

docker login
docker compose build
docker compose push

To run/demo locally: docker compose up, then open the frontend at http://localhost:8080.

The files

backend/Dockerfile

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["npm", "start"]

frontend/Dockerfile (static site via nginx)

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80

docker-compose.yml (repo root)

version: "3.8"
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    image: <dockerhub-username>/<name>-backend:latest
    ports:
      - "5000:5000"
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    image: <dockerhub-username>/<name>-frontend:latest
    ports:
      - "8080:80"
    depends_on:
      - backend

Gotchas (remember these!)

• If the file is named DOCKERFILE (all caps), Docker won't auto-find it — it only looks for Dockerfile. Either rename it, use -f DOCKERFILE, or set dockerfile: DOCKERFILE in Compose.
• Port mapping is HOST:CONTAINER (e.g. 8080:80 → open localhost:8080).
• fetch("http://backend:5000") from the frontend only resolves inside the Docker network — the browser needs http://localhost:5000.
• Run docker login before docker compose push, or you get access denied.

Related: [[docker-compose]], [[docker-hub-push-images]], [[dockerfile-instructions]].