Docker Day 13: Containerizing a Front‑End/Back‑End Separated Project

Official Sample Project

The article starts by cloning the official Docker Getting‑Started Todo App repository ( git clone https://github.com/docker/getting-started-todo-app) and shows its directory structure:

getting-started-todo-app/
├── backend/
├── frontend/
└── docs/

Backend Dockerfile (Node.js)

# syntax=docker/dockerfile:1
FROM node:24-alpine AS builder
WORKDIR /app
# Cache dependencies
COPY package*.json ./
RUN npm ci
# Copy source and build
COPY src ./src
RUN npm run build

# Runtime stage
FROM node:24-alpine
WORKDIR /app
COPY --from=builder /app/src ./src
COPY --from=builder /app/node_modules ./node_modules
EXPOSE 3000
CMD ["node", "src/index.js"]

Frontend Dockerfile (Vue/React + Nginx)

# syntax=docker/dockerfile:1
FROM node:24-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN --mount=type=cache,target=/root/.npm npm ci
COPY . .
RUN npm run build

FROM nginxinc/nginx-unprivileged:alpine3.23-perl
# Copy custom Nginx config
COPY nginx.conf /etc/nginx/nginx.conf
# Copy built static files
COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
USER nginx
EXPOSE 8080
ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"]

Nginx Configuration

server {
    listen 8080;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    # Front‑end routing for SPA
    location / {
        try_files $uri $uri/ /index.html;
    }
    # API reverse proxy
    location /api/ {
        proxy_pass http://backend:3000/;
    }
}

docker‑compose.yml

services:
  frontend:
    build: ./frontend
    ports:
      - "8080:8080"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379

  redis:
    image: redis:7-alpine
    volumes:
      - redis_data:/data

volumes:
  redis_data:

Startup Commands

# Build and start containers
docker compose up -d --build
# Check container status
docker compose ps
# View logs
docker compose logs -f
# Stop and remove containers
docker compose down

Docker Scout Scanning

After the images are built, the article demonstrates scanning them for known vulnerabilities:

# Scan backend image
docker scout cves backend:latest
# Scan frontend image
docker scout cves frontend:latest

Day 13 Summary

Official example uses Node.js + Nginx multi‑stage builds. nginxinc/nginx-unprivileged provides a non‑root Nginx image.

Front‑end routing is handled with try_files for SPA support. docker scout cves is used to scan for vulnerabilities.

Next, Day 14 will cover knowledge graphs and interview preparation.