Docker Tutorial: From Basics to Building and Deploying a Vue Application

In the modern web era, applications become increasingly complex, making containerization essential for scalable deployment; Docker provides a lightweight bridge between development and production environments.

1. Story Analogy

Building a house repeatedly is likened to creating Docker images, where the house represents the project and the image acts as a portable copy stored in a repository, enabling rapid scaling with "Build once, Run anywhere".

2. Virtual Machines vs. Containers

Virtual machines (VMs) emulate full hardware, requiring more resources and longer startup times, while containers virtualize only the OS layer, offering process‑level isolation, higher resource utilization, and second‑level startup.

Feature

Virtual Machine

Container

Isolation Level

OS

Process

Isolation Strategy

Hypervisor

Cgroups

System Resources

5‑15%

0‑5%

Startup Time

Minutes

Seconds

Image Storage

GB‑TB

KB‑MB

Cluster Scale

Hundreds

Thousands

High‑Availability

Backup, Disaster Recovery, Migration

Elastic, Load Balancing, Dynamic

3. Understanding Docker

Docker is an open‑source container engine that packages applications and their dependencies into portable images, which can be run on any Linux host using namespaces and cgroups.

The three core concepts are Image, Container, and Repository.

4. Core Concepts

Build, Ship, Run

Build once, Run anywhere

Docker creates containers; it is not a container itself.

Docker relies on Linux kernel features (cgroups, namespaces).

5. Installing Docker

On macOS, install via Homebrew Cask: brew cask install docker Check version: docker -v Configure registry mirrors (example JSON):

{
  "registry-mirrors": [
    "http://hub-mirror.c.163.com/",
    "https://registry.docker-cn.com"
  ],
  "insecure-registries": [],
  "experimental": false,
  "debug": true
}

6. Quick Start with a Vue Project

Create a Vue project: vue create docker-demo Build the project to generate the dist folder: yarn build Create a Dockerfile: cd docker-demo && touch Dockerfile Write the following Dockerfile content:

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

Explanation of each line: FROM nginx – base image. COPY dist/ /usr/share/nginx/html/ – copy built static files. COPY default.conf /etc/nginx/conf.d/default.conf – replace Nginx default config.

Build the image: docker build -t jartto-docker-demo . Run the container with port mapping:

docker run -d -p 3000:80 --name docker-vue jartto-docker-demo

Verify with docker ps and access via http://localhost:3000.

7. Publishing the Image

Login to Docker Hub, tag the image, and push:

docker login
docker tag jartto-docker-demo username/repo:tag
docker push username/repo:tag

8. Best Practices

Specify clear image requirements.

Keep Dockerfile steps minimal and ordered.

Use explicit version tags.

Document the build process for reproducibility.

9. Summary

Containerization is a key skill for cloud‑native development; Docker serves as the entry point, and mastering its workflow paves the way to advanced orchestration tools like Kubernetes, Service Mesh, and Istio.