Docker deployment for Vue apps - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the base image for building a Vue app in Docker.

Vue

FROM node:[1]

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

A14

B16

C12

D18

Attempts:

3 left

💡 Hint

Common Mistakes

Using an outdated Node.js version that may not support Vue 3 features.

Choosing a version too new that might cause unexpected issues.

The Dockerfile starts with a Node.js base image. Using version 18 ensures compatibility with Vue 3 and modern tools.

2fill in blank

medium

Complete the code to copy the package.json file into the Docker image.

Vue

COPY [1] ./

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

Apackage.json

Bsrc

Cdist

Dnode_modules

Attempts:

3 left

💡 Hint

Common Mistakes

Copying the entire source folder before installing dependencies.

Copying node_modules folder which should be generated inside the container.

We copy package.json to install dependencies inside the Docker image.

3fill in blank

hard

Fix the error in the Dockerfile command to build the Vue app.

Vue

RUN npm [1]

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

Ainstall

Brun build

Cstart

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Using npm start which runs the dev server, not build.

Using npm install which only installs dependencies.

The command npm run build compiles the Vue app into static files for production.

4fill in blank

hard

Fill both blanks to serve the built Vue app using Nginx in Docker.

Vue

FROM nginx:[1]
COPY [2] /usr/share/nginx/html

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

Aalpine

Bdist

Clatest

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Copying the source folder instead of the built files.

Using a heavy Nginx image unnecessarily increasing image size.

We use the lightweight nginx:alpine image and copy the dist folder with built files to serve the app.

5fill in blank

hard

Fill both blanks to expose port and run the Nginx server in Docker.

Vue

EXPOSE [1]
CMD ["nginx", "-g", "[2]"]

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

A80

Bdaemon off;

C-s

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing the wrong port or none at all.

Running Nginx as a background daemon causing container to exit.

Port 80 is exposed for HTTP traffic. The command runs Nginx in the foreground with daemon off;.