Docker deployment in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run this Dockerfile for an Astro project?

Consider this Dockerfile for an Astro project:

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

What will be the result when you build and run this Docker image?

Astro

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

A The container will start the Astro server and serve the built site correctly.

B The container will crash because node:18-alpine does not support npm.

C The container will fail because the build output is not copied to a static server.

D The container will run but the site will be empty because npm run build is missing.

💡 Hint

Think about what npm run build does and what npm start expects in an Astro project.

In Astro, npm run build creates static files in the 'dist' folder. The default npm start expects a server script, but this Dockerfile does not serve the static files properly. So the container will run but not serve the site correctly.

📝 Syntax

intermediate

Identify the syntax error in this Dockerfile snippet for Astro

Look at this Dockerfile snippet:

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD npm start

What is wrong with this Dockerfile?

Astro

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD npm start

A CMD npm start is invalid syntax; it should be CMD ["npm", "start"]

B COPY package.json package-lock.json ./ is invalid; package-lock.json should be copied separately

C RUN npm run build should be RUN npm build

D WORKDIR /app should be WORKDIR ./app

💡 Hint

Check how CMD expects its arguments in JSON array form or string form.

CMD expects either a JSON array with command and arguments or a single string. Writing CMD npm start without quotes or array causes a syntax error.

🔧 Debug

advanced

Why does this Docker container fail to serve the Astro site?

Given this Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD ["npx", "serve", "dist"]

The container builds successfully but when accessed, the site shows a 404 error. Why?

Astro

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD ["npx", "serve", "dist"]

A The WORKDIR is incorrect; it should be /usr/src/app.

B The 'serve' package is not installed globally or locally, so npx cannot run it.

C The CMD syntax is wrong; it should be CMD npx serve dist without brackets.

D The 'dist' folder is empty because npm run build failed silently.

💡 Hint

Does the Dockerfile install the 'serve' package anywhere?

The Dockerfile does not install 'serve' as a dependency, so npx cannot find it to run. This causes the server to not start properly, leading to 404 errors.

❓ state_output

advanced

What is the size difference between these two Docker images for Astro?

Compare these two Dockerfile snippets:

Image A:

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npx", "serve", "dist"]

Image B:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

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

Which statement about their image sizes is true?

A Image B is larger because it uses two base images increasing size.

B Image A is smaller because it uses a single stage and fewer layers.

C Both images have the same size because they contain the same files.

D Image B is smaller because it only contains the built static files and nginx, not node modules.

💡 Hint

Think about multi-stage builds and what files end up in the final image.

Image B uses a multi-stage build to copy only the static build output into a lightweight nginx image, making it smaller than Image A which includes node and all dependencies.

🧠 Conceptual

expert

Which Docker deployment approach best fits Astro's static site generation?

Astro generates static HTML files after build. Which Docker deployment method is best to serve an Astro site efficiently?

A Use a multi-stage build to create static files, then serve them with a lightweight web server like nginx in the final image.

B Install node and all dependencies in the final image and run npm start to serve the site.

C Run the Astro dev server inside the container to serve files dynamically.

D Use a base image with Apache and copy source files without building inside Docker.

💡 Hint

Consider Astro's static output and Docker image size optimization.

Astro produces static files best served by a simple web server. Multi-stage builds allow building with node then serving with nginx, reducing image size and improving performance.

Practice

1. What is the main purpose of using Docker for deploying an Astro site?

easy

A. To replace the need for HTML and CSS

B. To write the Astro site code faster

C. To package the site so it runs the same anywhere

D. To automatically fix bugs in the Astro code

Solution

1. Step 1: Understand Docker's role

   Docker packages applications with all their dependencies to run consistently on any system.

2. Step 2: Connect to Astro deployment

   Using Docker for Astro ensures the site runs the same on any server or environment.

3. Final Answer:

   To package the site so it runs the same anywhere -> Option C

4. Quick Check:

   Docker packages apps for consistent runs [OK]

Hint: Docker ensures your app runs identically everywhere [OK]

Common Mistakes:

• Thinking Docker speeds up coding
• Believing Docker replaces HTML/CSS
• Assuming Docker fixes code bugs automatically

2. Which line correctly starts a multi-stage Docker build for an Astro project?

easy

A. FROM node:18 AS builder

B. RUN npm install astro

C. COPY . /app

D. CMD npm start

Solution

1. Step 1: Identify multi-stage build syntax

   Multi-stage builds start with a FROM line naming a base image and stage alias.

2. Step 2: Check options for correct FROM usage

   Only 'FROM node:18 AS builder' correctly defines a build stage.

3. Final Answer:

   FROM node:18 AS builder -> Option A

4. Quick Check:

   Multi-stage build starts with FROM ... AS ... [OK]

Hint: Multi-stage builds start with FROM ... AS ... [OK]

Common Mistakes:

• Using RUN or COPY as first line
• Missing AS keyword for stage naming
• Confusing CMD with build stage start

3. Given this Dockerfile snippet for Astro, what will be the final image size behavior?

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

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

medium

A. The final image is large because node_modules is copied

B. The final image is small because only built files are copied

C. The final image contains source code and build tools

D. The final image will fail to build due to syntax error

Solution

1. Step 1: Analyze multi-stage build copying

   The final stage copies only the built /app/dist folder, not node_modules or source files.

2. Step 2: Understand image size impact

   Copying only built static files keeps the final image small and efficient.

3. Final Answer:

   The final image is small because only built files are copied -> Option B

4. Quick Check:

   Multi-stage builds reduce image size by copying only needed files [OK]

Hint: Final image size small if only build output copied [OK]

Common Mistakes:

• Assuming node_modules is copied to final image
• Thinking source code is included in final image
• Believing syntax error exists in given Dockerfile

4. You wrote this Dockerfile but get an error when running the built image:

FROM node:18
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

What is the likely cause?

medium

A. npm start may not serve built files; need a server like nginx

B. CMD should be CMD npm start without brackets

C. Missing multi-stage build causes large image but no error

D. COPY commands are in wrong order causing build failure

Solution

1. Step 1: Review CMD usage

   CMD syntax with brackets is correct JSON array form, so no syntax error here.

2. Step 2: Understand npm start role

   npm start often runs a dev server, not a production static server; built files may not be served properly.

3. Final Answer:

   npm start may not serve built files; need a server like nginx -> Option A

4. Quick Check:

   npm start may not serve production build [OK]

Hint: npm start often runs dev server, not production static server [OK]

Common Mistakes:

• Thinking CMD syntax is wrong
• Assuming COPY order causes build error
• Ignoring need for static file server in production

5. You want to optimize your Astro Docker deployment by using multi-stage builds and environment variables. Which Dockerfile snippet correctly sets a build argument and uses it to install dependencies only in the build stage?

hard

A. FROM node:18 AS builder
WORKDIR /app
COPY package.json .
RUN npm install --only=$NODE_ENV
ARG NODE_ENV=production
COPY . .
RUN npm run build

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

B. FROM node:18
ENV NODE_ENV=production
WORKDIR /app
COPY package.json .
RUN npm install --only=production
COPY . .
RUN npm run build
CMD ["npm", "start"]

C. FROM node:18 AS builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
ENV NODE_ENV=production

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

D. FROM node:18 AS builder
WORKDIR /app
COPY package.json .
ARG NODE_ENV=production
RUN npm install --only=$NODE_ENV
COPY . .
RUN npm run build

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

Solution

1. Step 1: Identify correct ARG usage

   ARG must be declared before RUN to use in that command; FROM node:18 AS builder WORKDIR /app COPY package.json . ARG NODE_ENV=production RUN npm install --only=$NODE_ENV COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html declares ARG before RUN.

2. Step 2: Check multi-stage build correctness

   FROM node:18 AS builder WORKDIR /app COPY package.json . ARG NODE_ENV=production RUN npm install --only=$NODE_ENV COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html uses multi-stage build with builder stage and copies only built files to nginx stage.

3. Step 3: Verify environment variable usage

   Using ARG NODE_ENV=production and npm install --only=$NODE_ENV correctly installs production dependencies only during build.

4. Final Answer:

   ARG NODE_ENV=production declared after COPY package.json . before RUN npm install --only=$NODE_ENV -> Option D

5. Quick Check:

   ARG after COPY package.json before RUN $NODE_ENV (optimal layer caching) [OK]

Hint: Declare ARG before RUN to use it in build commands [OK]

Common Mistakes:

• Declaring ARG after RUN command
• Setting ENV instead of ARG for build-time variables
• Not using multi-stage build causing large images