Multi-stage builds for static sites in Nginx - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the Dockerfile line to use the official Node.js image for building the static site.

Nginx

FROM [1] as builder

Drag options to blanks, or click blank then click option'

Aalpine:latest

Bnginx:latest

Cubuntu:20.04

Dnode:18-alpine

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nginx' image for building which lacks Node.js.

Using a full Ubuntu image which is unnecessarily large.

The node:18-alpine image is a lightweight Node.js image suitable for building static sites.

2fill in blank

medium

Complete the command to copy package files before installing dependencies in the build stage.

Nginx

COPY [1] ./

Drag options to blanks, or click blank then click option'

Apackage*.json

Bsrc/

Cdist/

Dnginx.conf

Attempts:

3 left

💡 Hint

Common Mistakes

Copying source code folder before installing dependencies.

Copying nginx configuration in build stage.

Copying package*.json files allows installing dependencies before copying source code.

3fill in blank

hard

Fix the error in the command that copies the built static files from the builder stage to the nginx image.

Nginx

COPY --from=builder [1] /usr/share/nginx/html

Drag options to blanks, or click blank then click option'

A/app/build/

B/build/

C/src/

D/dist/

Attempts:

3 left

💡 Hint

Common Mistakes

Using source folders instead of build output.

Using wrong paths that cause missing files in nginx.

The build output is usually in the /build/ directory inside the builder stage.

4fill in blank

hard

Fill both blanks to set the working directory in the build stage and expose the default nginx port.

Nginx

WORKDIR [1]
EXPOSE [2]

Drag options to blanks, or click blank then click option'

A/app

B8080

C80

D/usr/share/nginx/html

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing port 8080 which is not default for nginx.

Setting working directory to nginx html folder in build stage.

The build stage uses /app as working directory. Nginx exposes port 80 by default.

5fill in blank

hard

Fill all three blanks to complete the multi-stage Dockerfile that builds and serves a static site with nginx.

Nginx

FROM [1] as builder
WORKDIR [2]
RUN npm install && npm run build
FROM [3]
COPY --from=builder /build/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Drag options to blanks, or click blank then click option'

Anode:18-alpine

B/app

Cnginx:stable-alpine

Dubuntu:20.04

Attempts:

3 left

💡 Hint

Common Mistakes

Using ubuntu image for nginx stage which is unnecessarily large.

Not setting working directory before running npm commands.

The first stage uses Node.js alpine image and sets working directory to /app. The second stage uses nginx stable alpine image to serve the built files.