Docker deployment for Vue apps

Introduction

Docker helps package your Vue app with everything it needs to run. This makes it easy to share and deploy your app anywhere.

You want to run your Vue app on different computers without setup issues.

You need to deploy your Vue app to a cloud server or hosting service.

You want to keep your app environment consistent for all team members.

You want to automate app deployment with containers.

You want to isolate your app from other software on the same machine.

Syntax

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;"]

This Dockerfile uses two stages: one to build the Vue app, one to serve it with Nginx.

Use npm run build to create optimized files in the dist folder.

Examples

This stage installs dependencies and builds the Vue app.

Vue

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

This stage copies the built files and starts the Nginx server to serve the app.

Vue

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

Sample Program

This Dockerfile builds your Vue app and serves it with Nginx. First, it installs dependencies and builds the app. Then it copies the build output to Nginx's web folder and runs Nginx to serve your app on port 80.

Vue

# Dockerfile
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;"]

Important Notes

Make sure your Vue app's package.json and source files are in the same folder as the Dockerfile.

Use docker build -t my-vue-app . to build the image.

Run with docker run -p 80:80 my-vue-app to access the app in your browser.

Summary

Docker packages your Vue app and its environment for easy deployment.

Use a multi-stage Dockerfile: build with Node, serve with Nginx.

Run the container and open your browser to see your Vue app live.