Docker deployment for Vue apps - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output when running this Dockerfile for a Vue app?

Consider this Dockerfile for a Vue app. What will be the final behavior of the container when started?

Vue

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

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

A The container serves the built Vue app on port 80 using nginx.

B The container serves the Vue app but on port 3000 instead of 80.

C The container fails because npm install is missing in the second stage.

D The container runs the Vue app in development mode with hot reload on port 80.

💡 Hint

Think about what the two stages in the Dockerfile do and what nginx serves.

The first stage builds the Vue app into static files in /app/dist. The second stage copies these files into nginx's default html folder and serves them on port 80.

📝 Syntax

intermediate

Which Dockerfile snippet correctly copies the Vue build output to nginx?

You want to copy the Vue app build output from the build stage to nginx's html folder. Which COPY command is correct?

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

B COPY --from=build /dist /usr/share/nginx/html

C COPY --from=build /app/build /usr/share/nginx/html

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

💡 Hint

Remember the build output folder inside the build stage.

The Vue build output is in /app/dist inside the build stage. The COPY command must specify the source stage and the correct path.

🔧 Debug

advanced

Why does this Docker container fail to serve the Vue app?

Given this Dockerfile snippet, the container starts but shows a 404 error when accessed: FROM node:18-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:stable-alpine COPY --from=build /app /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

A The EXPOSE 80 command is missing, so port 80 is not open.

B The npm install command is missing, so build fails silently.

C The entire /app folder is copied instead of only /app/dist, so nginx serves wrong files.

D The CMD command is incorrect and nginx never starts.

💡 Hint

Check what nginx expects to serve and what files are copied.

Nginx serves static files from /usr/share/nginx/html. Copying the entire /app folder includes source files and node_modules, not just the built static files in /app/dist. This causes nginx to serve wrong content and results in 404 errors.

❓ state_output

advanced

What environment variable should you set to change the base URL in a Vue app Docker build?

You want your Vue app to work correctly behind a subpath like /myapp/. Which environment variable should you set during build to adjust the base URL?

A VUE_APP_PUBLIC_PATH

B BASE_URL

C PUBLIC_PATH

D VUE_APP_BASE_URL

💡 Hint

Check Vue CLI documentation about base URL configuration.

Vue CLI uses the environment variable BASE_URL to set the base path for the app during build. This affects how assets and routing paths are generated.

🧠 Conceptual

expert

Why use a multi-stage Docker build for Vue apps instead of a single stage?

What is the main advantage of using a multi-stage Dockerfile with a build stage and a separate nginx stage for deploying Vue apps?

A It reduces the final image size by excluding development dependencies and build tools.

B It allows running the Vue app in development mode inside the container.

C It enables hot module replacement in production containers.

D It automatically updates the Vue app when source files change.

💡 Hint

Think about what files are needed to run the app versus build it.

Multi-stage builds let you use a full Node environment to build the app, then copy only the static files to a lightweight nginx image. This keeps the final image small and secure.