Multi-stage builds for static sites in Nginx - Mini Project: Build & Apply

Multi-stage builds for static sites

📖 Scenario: You want to create a small, efficient Docker image to serve a static website using nginx. To keep the image size small, you will use a multi-stage build. The first stage will build the static site files, and the second stage will use nginx to serve those files.

🎯 Goal: Build a Dockerfile with two stages: one to prepare the static site files and one to serve them with nginx. The final image should only contain the nginx server and the static files.

📋 What You'll Learn

Create a first stage named builder using the alpine image

Add a directory /app in the builder stage and create an index.html file with exact content

Create a second stage using the nginx:alpine image

Copy the index.html file from the builder stage to the /usr/share/nginx/html directory in the second stage

Expose port 80 and set the default command to run nginx

💡 Why This Matters

🌍 Real World

Multi-stage builds are used to optimize Docker images by separating build and runtime environments. This is common in deploying static websites and web applications.

💼 Career

Understanding multi-stage builds helps you create efficient container images, a key skill for DevOps engineers and developers working with Docker and cloud deployments.

1

Create the builder stage with static site files

Create the first stage named builder using the alpine image. Inside this stage, create a directory /app and add a file named index.html with the exact content: <h1>Welcome to My Static Site</h1>.

Nginx

# Create the builder stage with alpine image
# Create /app directory and add index.html with content
# Your code here

Need a hint?

Use FROM alpine AS builder to start the first stage. Use RUN mkdir /app to create the directory. Use RUN echo '...' > /app/index.html to create the file with content.

2

Add the nginx stage and copy static files

Create the second stage using the nginx:alpine image. Copy the index.html file from the /app directory in the builder stage to the /usr/share/nginx/html directory in this stage.

Nginx

FROM alpine AS builder
RUN mkdir /app
RUN echo 'Welcome to My Static Site' > /app/index.html

# Create nginx stage and copy index.html from builder
# Your code here

Need a hint?

Use FROM nginx:alpine to start the second stage. Use COPY --from=builder /app/index.html /usr/share/nginx/html/index.html to copy the file.

3

Expose port 80 and set default command

In the nginx stage, add a line to expose port 80. Then set the default command to run nginx in the foreground using CMD ["nginx", "-g", "daemon off;"].

Nginx

FROM alpine AS builder
RUN mkdir /app
RUN echo 'Welcome to My Static Site' > /app/index.html

FROM nginx:alpine
COPY --from=builder /app/index.html /usr/share/nginx/html/index.html

# Expose port 80 and set CMD to run nginx
# Your code here

Need a hint?

Use EXPOSE 80 to open port 80. Use CMD ["nginx", "-g", "daemon off;"] to run nginx in the foreground.

4

Build and run the multi-stage Docker image

Build the Docker image with the tag static-site using the Dockerfile. Then run a container from this image mapping port 8080 on your machine to port 80 in the container. Finally, print the command to check the container logs.

Nginx

FROM alpine AS builder
RUN mkdir /app
RUN echo 'Welcome to My Static Site' > /app/index.html

FROM nginx:alpine
COPY --from=builder /app/index.html /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build the image, run the container, and print logs command
# Your code here

Need a hint?

Use docker build -t static-site . to build the image. Use docker run -d -p 8080:80 static-site to run the container. Use docker logs <container_id> to check logs.