Docker deployment for Vue apps - Mini Project: Build & Apply

Docker deployment for Vue apps

📖 Scenario: You have created a Vue app and want to deploy it using Docker. Docker helps package your app with everything it needs to run anywhere.Imagine you want to share your Vue app easily with friends or deploy it on a server without worrying about setup differences.

🎯 Goal: Build a Docker setup that can containerize a Vue app and serve it using a simple web server.You will create a Dockerfile step-by-step to build and run your Vue app inside a Docker container.

📋 What You'll Learn

Create a basic Vue app folder structure with package.json and src folder

Add a Dockerfile with build and serve stages

Use npm run build to create production files

Serve the built files with a lightweight web server inside Docker

💡 Why This Matters

🌍 Real World

Docker makes it easy to package and deploy Vue apps anywhere, like cloud servers or local machines, without setup issues.

💼 Career

Knowing Docker deployment is valuable for frontend developers working with modern web apps and DevOps teams managing app delivery.

1

DATA SETUP: Create a basic Vue app structure

Create a folder named my-vue-app with a package.json file containing exactly this content:

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "build": "vue-cli-service build"
  }
}

Vue

# Create the folder and add package.json with the exact content
# Your code here

Hint

This package.json tells npm how to build your Vue app for production.

2

CONFIGURATION: Add a Dockerfile base image and working directory

Create a Dockerfile with these two lines at the top: FROM node:18-alpine and WORKDIR /app

Vue

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "build": "vue-cli-service build"
  }
}

# Add Dockerfile base image and working directory
# Your code here

Hint

The FROM line sets the base image with Node.js. WORKDIR sets the folder inside the container.

3

CORE LOGIC: Add commands to copy files, install dependencies, and build the app

In the Dockerfile, add these lines after WORKDIR /app: COPY package.json ., RUN npm install, COPY . ., and RUN npm run build

Vue

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "build": "vue-cli-service build"
  }
}

FROM node:18-alpine
WORKDIR /app

# Copy package.json and install dependencies
# Your code here

Hint

These commands prepare your app inside the container and create production files.

4

COMPLETION: Add a lightweight web server to serve the built files

Complete the Dockerfile by adding these lines at the end: FROM nginx:stable-alpine, COPY --from=0 /app/dist /usr/share/nginx/html, and EXPOSE 80

Vue

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "build": "vue-cli-service build"
  }
}

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

# Add nginx server to serve built files
# Your code here

Hint

This sets up nginx to serve your Vue app's production files on port 80.

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