前言

近几年来，Docker 技术的应用已经越来越流行，目前已经产生前端工程Docker 化，身为前端开发的我，花了几天时间研究了下 Docker 的知识点，并实现了 Docker 本地部署 Vue 项目。希望可以给有需要的同学一点帮助。

什么是Docker?

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux 机器上，也可以实现虚拟化，容器是完全使用沙箱机制，相互之间不会有任何接口。简言之，就是可以在 Linux 上镜像使用的这么一个容器。点击查看更多可以了解更多Docker知识。

为什么前端需要了解Docker

首先，目前产生前端工程 Docker 化的趋势，学习并且掌握这个技术有利于提高自身竞争力。
其次，前端 Docker化有利于前端开发工程师更专注于开发本身，弱化软件环境，降低项目部署难度。

具体实现！撸它。

Docker安装

brew cask install docker

本人是 mac 电脑，所以介绍下 mac 下的安装方式，windows 或其他系统的同学，可以点击查看更多了解其他安装方式。

在载入 Docker app 后，点击 Next，可能会询问你的 macOS 登陆密码，你输入即可。之后会弹出一个 Docker 运行的提示窗口，状态栏上也有有个小鲸鱼的图标。

启动终端后，通过命令可以检查安装后的 Docker 版本。

$ docker --version
Docker version 19.03.8, build afacb8b

构建vue项目

首先，选择一个创建好的Vue项目（本案例是采用一个前后端分离的单页Vue项目）
接下来，运行 npm run build 命令，生成一个打包的 dist 文件（ps：具体打包命名根据项目配置而定。）你会发现，项目中多了一个 dist 文件夹。

获取Nginx镜像

本案例的Vue 项目是一个前后端分离项目，前端界面在服务器上只需要能被外部访问到即可，所以直接使用 Nginx 的 Docker 来部署就行。

docker pull nginx:alpine

本博主推荐使用 alpine 版本，因为这个体积小，只需要 19.7MB，而 latest 版本需要 127MB。

使用 Dockerfile 定制镜像

首先，在项目根目录中新建一个文件，命名为 Dockerfile

编辑Dockerfile 文件

FROM nginx:alpine

FROM：定制的镜像都是基于 FROM 的镜像，这里的 nginx 就是定制需要的基础镜像。后续的操作都是基于nginx。

打包镜像

docker build -t vuetest:v1 .

意思是当前目录的 Dockerfile 创建了一个镜像，创建镜像的仓库是vuetest, 标签是v1。

查看镜像

docker images

命令执行后，可以查看镜像信息。

运行容器

docker run -P -d vuetest:v1

查看端口信息

docker ps

访问localhost:32770

纳尼？这算哪门子的部署？哈哈哈，小伙伴们莫急，且听我慢慢道来！在 Dockerfile 中我们只是引入了nginx 镜像，我们开发的代码并不在其中。所以在打包镜像时，需要将我们开发的代码也打包其中。

二次编辑Dockerfile 文件

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/

在上次的 Dockerfile 文件中，添加了 COPY 内容，意思是将 dist 文件，复制到 /usr/share/nginx/html/中。其中/usr/share/nginx/html/ 是 Nginx 的默认文件路径。

重新打包镜像，并运行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps

我们看到终端输出的 port 是32782，我们运行 localhost：32782，发现访问ok，但是页面一刷新就提示nginx 404。
这个原因是因为在 Vue 项目中,我们使用了 history 路由模式。这个模式会导致刷新后找不到当前页面。这边打算采用官方推荐的做法，在 Nginx 中添加一些配置。
点击了解更多查看更多解决方案。

新建nginx.conf文件

新建并编辑 nginx.conf 文件内容

server {
    listen       80;
    server_name  localhost;
    # uding gzip
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

解决404 问题主要是 try_files $uri $uri/ /index.html =404;
这段代码的意思是，如果当前访问的地址不存在，就指向index.html
另外，为了解决资源过大问题，这边采用了gzip压缩。减少体积。

三次编辑Dockerfile 文件

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

COPY /nginx.conf/etc/nginx/conf.d/default.conf 命令的意思是将根目录下的 nginx.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 nginx.conf 配置来替换 nginx 镜像里的默认配置。

重新打包镜像，并运行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps

访问终端生成好的端口号，刷新ok。大功告成！！！

Tips

问题1：命令行太多，记不住哇~还有别的方案吗？

答：我们之前下载的 Docker 是具有图形界面的，我们可以配合图形界面来使用，比如：我们可以点击小鲸鱼-Dashboard，查看当前容器的运行状态，还可以一键点击访问配置好的项目页面地址
问题2：运行的容器名称可以自定义吗？我不想使用默认的！！！

答：当然可以。
```
docker run -P -d vuetest:v1
```
将以上命令改为如下就行：
```
docker run --name myproject -P -d vuetest:v1
```
该命令的意思为运行vuetest:v1镜像，并将运行的容器名称设置为myproject，且在后台运行容器，并返回容器ID
问题3: 博主可以提供更多常见的命令吗？或者高阶应用？

答：当然可以，大家可以点击查看更多来学习更多命令。