Multi-stage builds for static sites in Nginx - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

Output of multi-stage Docker build for static site

Given this Dockerfile for a static site using multi-stage build, what will be the output of docker images after building?

Nginx

FROM node:18 AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

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

A An image named 'node' with the source code and node_modules installed

B An image named 'nginx' with the static site files in /usr/share/nginx/html

C Two images: one for 'node' builder and one for 'nginx' with static files

D No images created because multi-stage builds do not produce images

💡 Hint

Think about what the final stage in a multi-stage build produces as the image.

Multi-stage builds produce only the final stage as the image. The builder stage is temporary and not saved as an image unless tagged separately.

❓ Configuration

intermediate

Correct COPY command in multi-stage Dockerfile

Which COPY command correctly copies the built static files from the builder stage to the nginx image in a multi-stage Dockerfile?

A COPY --from=nginx /app/dist /usr/share/nginx/html

B COPY /app/dist /usr/share/nginx/html

C COPY --from=builder /app/dist /usr/share/nginx/html

D COPY --from=builder /usr/share/nginx/html /app/dist

💡 Hint

Remember to specify the source stage and correct source and destination paths.

The correct syntax is COPY --from=builder . The source is the build output directory in the builder stage.

🔀 Workflow

advanced

Order of steps in multi-stage Dockerfile for static site

Arrange the following steps in the correct order for a multi-stage Dockerfile that builds a static site and serves it with nginx.

A 4,1,2,3

B 4,2,1,3

C 2,4,1,3

D 1,4,2,3

💡 Hint

Start with the builder stage, then build, then switch to nginx stage and copy files.

First define the builder stage (4), run build commands (1), then define nginx stage (2), and finally copy built files (3).

❓ Troubleshoot

advanced

Why does nginx serve a 404 error after multi-stage build?

You built a static site with a multi-stage Dockerfile but nginx returns 404 for all pages. What is the most likely cause?

A The COPY command copied files to the wrong directory inside nginx image

B The builder stage failed to run npm install

C nginx image does not support static files

D The Dockerfile is missing the EXPOSE 80 instruction

💡 Hint

Check where nginx expects static files to be located.

nginx serves files from /usr/share/nginx/html by default. If files are copied elsewhere, nginx returns 404.

✅ Best Practice

expert

Optimizing multi-stage Dockerfile for smallest image size

Which practice best reduces the final image size when building a static site with multi-stage Dockerfile?

A Run npm install in the final stage instead of builder stage

B Install all build tools in the final nginx image

C Copy node_modules folder to the final image for caching

D Use a minimal base image like nginx:alpine for the final stage

💡 Hint

Think about what is needed in the final image to serve static files only.

Using a minimal base image like nginx:alpine keeps the final image small by excluding build tools and unnecessary files.