Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用 Docker 来部署一个 Vue.js 的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。

本文默认已经安装了 Docker，@vue/cli

相关版本：
Docker version 18.09.2, build 6247962
vue cli --version 3.3.0
macOS Mojave Verison 10.14.1

运行环境为macOS，如果与阅读者操作系统之间存在差异，请自行调整。
相关镜像：
nginx:latest
node:latest

具体实现

1、Vue CLI 创建一个 Vue 项目（具体如何创建可以百度）

2、运行命令：yarn serve / npm run serve

3、访问 http://localhost:8081：

 

4、运行命令进行build

yarn build / npm run build

此时工程根目录下多出一个 dist 文件夹，如果将该 dist 目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。接下来就来构建一个这样的静态资源站点。

5、构建 Vue 应用镜像

获取nginx镜像：docker pull nginx

6、创建 Nginx Config配置文件

在项目根目录下创建 Nginx 文件夹，该文件夹下新建文件 default.conf

server {
   listen       80;
   server_name  localhost;

   #charset koi8-r;
   access_log  /var/log/nginx/host.access.log  main;
   error_log  /var/log/nginx/error.log  error;

   location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
   }

   #error_page  404              /404.html;
   # redirect server error pages to the static page /50x.html
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
       root   /usr/share/nginx/html;
   }
}

       7、创建 Dockerfile 文件

        

      8、基于该 Dockerfile 构建 Vue 应用镜像

启动 Vue app 容器

     docker run --name examVue -it -p 8080:80 exam

     docker ps可以查看容器

     可以发现名为 examVue 的容器已经运行起来。此时访问 http://localhost:8080 应该就能访问到该 Vue 应用