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.