Docker 部署 vue 项目
1.写在前面：
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。
Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。（更多详情请移步docker官网查看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
2.具体实现：
- 用 vue cli 创建一个vue项目，修改一下创建出来的项目，在页面上写一个前端接口请求，构建一版线上资源 ，基于nginx docker镜像构建成一个前端工程镜像，然后基于这个前端工程镜像，启动一个容器 vuenginxcontainer。
- 启动一个基于 node 镜像的容器 nodewebserver，提供后端接口。
- 修改 vuenginxcontainer 的 nginx 配置，使前端页面的接口请求转发到 nodewebserver 上。
- 稍作优化和改进。
3 创建 vue 应用
3.1 vue cli 创建一个vue项目
运行命令
yarn serve / npm run serve
3.2 改写
稍微改写一下页面，在App.vue中 传入HelloWorld 组件中的 msg 改为Hello Docker ; created 生命周期中加入一个接口请求
import axios from 'axios'; …… axios.get('/api/json', { params: {} }).then( res => { console.log(res); } ).catch( error => { console.log(error); } ) ……
这时候会在页面控制台看到一个报错信息:
/api/json 接口 404，当然此时这个接口还不存在，暂时写到这里，一会再调这个接口。
3.3 构建vue项目
运行命令
yarn build / npm run build
此时工程根目录下多出一个dist文件夹
如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。
接下来就来构建一个这样的静态资源站点。
4 构建vue应用镜像
nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。
4.1 获取 nginx 镜像
docker pull nginx
docker镜像（Image）一个特殊的文件系统。Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。
- docker 镜像相关操作有: 搜索镜像
docker search [REPOSITORY[:TAG]]、拉取镜像docker pull [REPOSITORY[:TAG]]、查看镜像列表docker image ls、删除镜像：docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]]等等。
- docker 镜像名称由REPOSITORY和TAG组成
[REPOSITORY[:TAG]]，TAG默认为latest
4.2 创建 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; } }
该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。
