Docker Beginner's Guide: From Installation to Deploying a Vue Project

In the era of rich web applications, deployment becomes increasingly complex, and containerization serves as a crucial bridge between clustering, isolated environments, gray releases, and dynamic scaling.

To illustrate Docker, the article tells a story: building a house, moving it, and using a magical "image" that can be copied and carried in a backpack, analogous to project images stored in a repository that enable instant scaling and deployment.

Virtual Machine vs. Container

A virtual machine (VM) emulates full hardware, requiring gigabytes of space and slower startup, while a container virtualizes only the OS layer, offering megabyte‑level footprints, faster startup, and higher resource utilization.

Docker Overview

Docker is an open‑source application container engine that packages applications and their dependencies into portable containers, using Linux kernel features such as cgroups and namespaces for isolation.

The three core Docker concepts are:

Image – an immutable package containing code, runtime, libraries, and configuration.

Container – a runtime instance of an image.

Repository – a storage location for images.

Installation

On macOS, Docker can be installed via Homebrew Cask: brew cask install docker Verify the installation with: docker -v Configure a registry mirror by editing the Docker daemon configuration:

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

Install the Docker Desktop client for a graphical interface.

Quick Start with a Vue Project

Create a Vue project: vue create docker-demo Build the project: yarn build Generate a Dockerfile in the project root: cd docker-demo && touch Dockerfile Write the following Dockerfile to copy the built dist folder into an Nginx image and replace the default Nginx configuration:

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

Build the Docker image: docker build -t jartto-docker-demo . Run the container, mapping host port 3000 to container port 80:

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

Verify the container is running with docker ps -a and access the application at http://localhost:3000 or via curl -v -i localhost:3000.

Publishing the Image

Log in to Docker Hub, tag the image, and push it:

docker login
docker tag jartto-docker-demo <username>/jartto-docker-demo:latest
docker push <username>/jartto-docker-demo:latest

This allows others to pull and run the image without repeating the build steps.

Common Dockerfile Instructions

Key Dockerfile directives include: FROM – base image. MAINTAINER – image author. RUN – commands executed during build. ADD – copy files and optionally extract archives. COPY – copy files without extraction. CMD – default command when container starts (overridable). ENTRYPOINT – command that cannot be overridden. LABEL – metadata key‑value pairs. ENV – environment variables. EXPOSE – declare container ports. VOLUME – define mount points for persistent data. WORKDIR – set working directory. USER – specify user for subsequent commands. ARG – build‑time variables.

Refer to the official Docker documentation for detailed usage.

Best Practices

Clearly define required base images.

Minimize the number of layers and steps.

Pin explicit version tags.

Provide reproducible build instructions.

Conclusion

Containerization is an essential skill in the cloud era; Docker is just the beginning, leading to orchestration tools like Kubernetes, Service Mesh, and Istio.