Docker Made Easy: Deploy a Vue App with Nginx in Minutes

Introduction

In the era of rich web applications, deployment, isolation, gray‑release, and dynamic scaling are essential. Containerization bridges the gap between development and production, offering lightweight, portable environments.

Virtual Machine vs. Container

Virtual Machine : Simulates complete hardware, runs a full OS, consumes gigabytes of space, and starts slowly. Examples include VMWare and OpenStack.

Container : Virtualizes the operating‑system layer, packages code, dependencies, and configuration into an image that runs consistently across environments. Containers are lightweight, start quickly, and have high resource utilization.

Containers run anywhere without worrying about version or compatibility issues.

They solve the “build‑once, run‑anywhere” problem.

Core Docker Concepts

Docker is an open‑source container engine. Its three core concepts are:

Image : A read‑only template that includes the code, runtime, libraries, and configuration needed to run an application.

Container : A runtime instance of an image.

Repository : A storage location for images.

Installation

On macOS you can install Docker via Homebrew Cask: brew cask install docker Verify the installation: docker -v Configure a registry mirror (optional):

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

Quick Start with a Vue Project

Create a Vue project using the Vue CLI: vue create docker-demo Build the project: yarn build The compiled static files are placed in the dist directory.

Prepare Dockerfile

Create a Dockerfile in the project root: cd docker-demo && touch Dockerfile Write the following content:

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

This Dockerfile uses the official Nginx image as the base, copies the built static files, and replaces the default Nginx configuration.

Build the Image

Run the build command: docker build -t jartto-docker-demo . The resulting image is about 133 MB.

Run the Container

Start a container with port mapping:

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

Check the container status: docker ps -a Access the application at http://localhost:3000 or via curl -v -i localhost:3000.

Publish the Image

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

docker login
docker tag jartto-docker-demo yourusername/jartto-docker-demo:latest
docker push yourusername/jartto-docker-demo:latest

After publishing, anyone can pull and run the image without rebuilding.

Common Dockerfile Instructions

FROM : Specify the base image.

MAINTAINER : Image author information.

RUN : Execute commands during image build.

ADD : Copy files and automatically extract archives.

COPY : Copy files without extraction.

CMD : Default command when the container starts (can be overridden).

ENTRYPOINT : Command that cannot be overridden.

LABEL : Add metadata.

ENV : Set environment variables.

EXPOSE : Declare listening ports.

VOLUME : Define mount points for persistent data.

WORKDIR : Set the working directory.

USER : Specify the user to run commands.

ARG : Define build‑time variables.

Best Practices

Clearly define required base images.

Keep the number of build steps minimal.

Pin explicit version tags for reproducibility.

Document the entire build process.

Conclusion

Containerization is a core skill for modern cloud environments. Docker provides a lightweight way to package and run applications, and mastering it opens the door to advanced orchestration tools such as Kubernetes, Service Mesh, and Istio.