Docker deployment for Vue apps - Step-by-Step Execution

Concept Flow - Docker deployment for Vue apps

Write Vue app code

↓

Create Dockerfile

↓

Build Docker image

↓

Run Docker container

↓

Access Vue app in browser

↓

App serves static files inside container

This flow shows how you write your Vue app, create a Dockerfile to package it, build the image, run it as a container, and then access the app served inside Docker.

Execution Sample

Vue

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile builds the Vue app using Node, then serves the built files with Nginx inside a container.

Execution Table

Step	Action	Details	Result
1	FROM node:18-alpine	Start with Node image for build	Base image ready for building Vue app
2	WORKDIR /app	Set working directory inside container	Commands run inside /app folder
3	COPY package*.json ./	Copy package files for dependencies	Files ready for npm install
4	RUN npm install	Install dependencies	node_modules folder created
5	COPY . .	Copy all source code	Vue app source inside container
6	RUN npm run build	Build Vue app to static files	dist folder with production files created
7	FROM nginx:stable-alpine	Switch to Nginx image to serve files	New base image for serving
8	COPY --from=0 /app/dist /usr/share/nginx/html	Copy built files from build stage	Static files ready for Nginx
9	EXPOSE 80	Open port 80 for HTTP	Container listens on port 80
10	CMD ["nginx", "-g", "daemon off;"]	Start Nginx in foreground	Nginx serves Vue app
11	Run container	docker run -p 8080:80 image	Vue app accessible at localhost:8080
12	Access app in browser	Open http://localhost:8080	Vue app loads and works
13	Exit	Stop container	App no longer accessible

💡 Container stops or user closes app, ending deployment session

Variable Tracker

Variable	Start	After Step 4	After Step 6	After Step 8	Final
node_modules	none	installed	installed	installed	installed
dist folder	none	none	created	copied	served
container port	none	none	none	80 exposed	80 exposed
Nginx running	no	no	no	no	yes

Key Moments - 3 Insights

Why do we use two FROM statements in the Dockerfile?

The first FROM uses Node to build the Vue app, which needs Node and npm. The second FROM uses Nginx to serve the built static files. This multi-stage build keeps the final image small and efficient, as shown in execution_table steps 1 and 7.

What happens if we forget to copy the built files to Nginx?

If the built files are not copied (step 8), Nginx will serve an empty folder and the app won't load. The execution_table shows the importance of copying /app/dist to /usr/share/nginx/html.

Why do we expose port 80 and map it to 8080 when running the container?

Nginx listens on port 80 inside the container (step 9). We map it to 8080 on the host so we can access the app at localhost:8080 in the browser (step 11). This port mapping connects the container to your computer.

Visual Quiz - 3 Questions

Look at the execution_table at step 6. What is created after running 'npm run build'?

A dist folder with production files

B Nginx server started

C node_modules folder

D package.json file

💡 Hint

Check the 'Result' column at step 6 in the execution_table.

At which step does the container start serving the Vue app with Nginx?

A Step 4

B Step 7

C Step 10

D Step 12

💡 Hint

Look for the step where Nginx is started in the execution_table.

If we change the EXPOSE port from 80 to 3000 in the Dockerfile, what else must we change to access the app correctly?

A Nothing, it works automatically

B Change the port mapping in 'docker run' to map 3000

C Change the CMD to start Nginx on port 80

D Rebuild the Vue app

💡 Hint

Refer to the port mapping explained in key_moments about EXPOSE and docker run.

Concept Snapshot

Docker deployment for Vue apps:
- Use multi-stage Dockerfile: build with Node, serve with Nginx
- Build Vue app to static files (npm run build)
- Copy built files to Nginx folder
- Expose port 80 in container
- Map container port to host for browser access
- Run container to serve app

Full Transcript

This visual execution shows how to deploy a Vue app using Docker. First, the Vue app code is written. Then a Dockerfile is created with two stages: the first uses a Node image to install dependencies and build the app into static files. The second stage uses an Nginx image to serve those static files. The Dockerfile copies the built files from the first stage into the Nginx folder. Port 80 is exposed in the container, and when running the container, port 80 is mapped to a host port like 8080. Finally, accessing localhost:8080 in a browser loads the Vue app served by Nginx inside Docker. Key moments include understanding why multi-stage builds are used, the importance of copying built files, and how port mapping works. The execution table traces each Dockerfile step and container run action, showing the state changes of files, ports, and services. This step-by-step trace helps beginners see how Docker packages and serves a Vue app.

Practice

1. What is the main purpose of using Docker for deploying a Vue app?

easy

A. To write Vue components faster

B. To replace Vue Router in the app

C. To package the app and its environment for consistent deployment

D. To automatically generate Vue templates

Solution

1. Step 1: Understand Docker's role

   Docker packages an app with all its dependencies and environment to ensure it runs the same everywhere.

2. Step 2: Identify deployment benefits

   This packaging helps avoid issues caused by different environments on different machines.

3. Final Answer:

   To package the app and its environment for consistent deployment -> Option C

4. Quick Check:

   Docker packages environment [OK]

Hint: Docker ensures app runs same everywhere by packaging environment [OK]

Common Mistakes:

• Thinking Docker speeds up coding
• Confusing Docker with Vue features
• Assuming Docker replaces Vue libraries

2. Which Dockerfile snippet correctly uses multi-stage build for a Vue app?

easy

A. FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html

B. FROM nginx:alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

C. FROM node:18
WORKDIR /app
COPY . .
RUN npm run serve

D. FROM alpine
RUN apk add nodejs npm
COPY . .
RUN npm run build

Solution

1. Step 1: Identify multi-stage build pattern

   Multi-stage uses one stage to build (Node) and another to serve (Nginx).

2. Step 2: Check snippet correctness

   FROM node:18 AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html builds with Node, then copies build output to Nginx image, which is correct.

3. Final Answer:

   Multi-stage build with Node for build and Nginx to serve -> Option A

4. Quick Check:

   Multi-stage build [OK]

Hint: Look for two FROM lines: build then serve [OK]

Common Mistakes:

• Using Nginx to build Vue app
• Not copying build output to Nginx
• Running npm serve inside Docker production image

3. Given this Dockerfile snippet, what will happen when you run the container?

FROM node:18 AS build
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

medium

A. The container will expose port 3000 instead of 80

B. The container will fail because npm run build is missing

C. The app will run Node server instead of Nginx

D. The Vue app will be built and served by Nginx on port 80

Solution

1. Step 1: Analyze build stage

   Node image installs dependencies and runs npm run build to create production files in /app/dist.

2. Step 2: Analyze serve stage

   Nginx image copies built files to its html folder and exposes port 80, running Nginx server.

3. Final Answer:

   The Vue app will be built and served by Nginx on port 80 -> Option D

4. Quick Check:

   Build then serve on port 80 [OK]

Hint: Build with Node, serve with Nginx on port 80 [OK]

Common Mistakes:

• Assuming npm run build is missing
• Confusing Node server with Nginx
• Wrong port exposed in container

4. You wrote this Dockerfile but your Vue app shows a blank page when running the container:

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

What is the likely error?

medium

A. Nginx image does not expose port 80

B. Missing multi-stage build alias causing wrong files copied

C. npm install command is incorrect

D. CMD syntax is invalid

Solution

1. Step 1: Check multi-stage build usage

   The Dockerfile lacks a build stage alias, so COPY dist copies from current stage, which is Nginx, not build output.

2. Step 2: Understand impact on app

   Because dist folder is not copied from build stage, Nginx serves empty or missing files, causing blank page.

3. Final Answer:

   Missing multi-stage build alias causing wrong files copied -> Option B

4. Quick Check:

   Missing build alias = blank page [OK]

Hint: Use --from=build to copy correct build files [OK]

Common Mistakes:

• Ignoring multi-stage build alias
• Assuming port exposure causes blank page
• Thinking npm install syntax is wrong

5. You want to optimize your Vue app Docker deployment by reducing image size and improving build speed. Which approach is best?

hard

A. Use a multi-stage Dockerfile with Node build stage and minimal Nginx serve stage

B. Install all dependencies in the Nginx image directly

C. Run npm run serve inside the Node image and expose port 8080

D. Copy source files directly to Nginx image and run npm build there

Solution

1. Step 1: Understand image size and build speed

   Multi-stage builds separate build environment from runtime, keeping final image small and clean.

2. Step 2: Evaluate options

   Use a multi-stage Dockerfile with Node build stage and minimal Nginx serve stage uses Node only for building, then copies only built files to lightweight Nginx image, optimizing size and speed.

3. Final Answer:

   Use a multi-stage Dockerfile with Node build stage and minimal Nginx serve stage -> Option A

4. Quick Check:

   Multi-stage build optimizes size and speed [OK]

Hint: Separate build and serve stages to keep image small [OK]

Common Mistakes:

• Installing dependencies in Nginx image
• Running dev server in production container
• Copying source files without building