docker 应用系列（一）--- 一步步搭建虚拟机 docker 环境 附有 vue-cli + nginx 应用

小剧场

测试：裤裆你这页面刷新就白屏啊，怎么了啊，并且你看这 network，怎么这些 js 这么大啊，很耗流量并且加载速度还很慢诶。

我：嗯，大佬说的是，页面刷新白屏是由于没有服务器没有配置找不到资源重定向，js 能够用 CDN 或者启动一下 gzip，这个让后端或者运维小妹妹配一下就行了。

后端：啥，你说啥，我不会，话说，上次那个接口返回 null 的问题我还想找你，为啥我返回 null 就不行，数据库就是 null 啊，你前端作一下判断不就行了！

我：。。。干，我本身来！

前言

以上的小剧场你们当成个段子看看就行了，我相信大部分的前端后端都是挺和谐的，通常来讲协力怼产品才是程序员的第一要务（PM 别打我），关于剧场里提到的是否要返回 null 的问题，建议你们之后直接反手一个连接给后端 一千个不用 null 的理由，深藏功与名。

17年毕业到如今算算也有一年多了，前端的工做愈来愈驾轻就熟，完成平常业务已经没有大问题，前端方面对于一些比较前沿的工具也有了很多心得体会，前段时间手写了一个 webpack 4.x 结合 vue-loader 的脚手架替换掉了公司项目里比较老旧的脚手架，本身写的插件也在项目里面吭哧吭哧的跑的不亦乐乎，也能够带领公司新入职的前端学习更多的姿式了。

可是，总感受还缺乏了什么，之前写过 PHP，对于接口如何实现的也没有那么好奇，无非就是链接数据库写写 sql，再大不了就是建建视图查询，用用 redis 之类的，再深刻一点就是消息队列 MQTT 结合 websocket 的应用了，那还缺乏了什么，没错，就是服务器部署，关于这个，我很好奇！

关于工做初期，个人想法是先要有技术广度的了解，再要技术深度的了解。曾经也有过写脚手架写上瘾的时候，连续一个星期回家写代码写到两三点（大城市的大佬就不要吐槽我了 =3=），各类跑测试，最后出了成果成功运行在线上项目的成就感我至今还记得，可是期间碰到了很多的问题，不少问题在其余领域的人看来甚至都不是问题，只是由于本身知道的太少了，因此被本身限制住了。

想象一下，若是本身可以掌握整个项目从零开始，从第一行代码开始，到发布上线的整个流程，无论是前端后端服务端，本身都可以了解到每一个细节，那和后端理论起来，底气都要足很多，不是么？=3=

废话太多，开始正题，本篇文章能够帮助任何对 docker 有兴趣的人有一个基础的认识，最后会有一个简单的基于 vue-cli 搭建的 nginx 服务器的实战应用。

环境安装

题主的系统环境是 windows win7 64位 系统，因此须要个 linux 系统的虚拟机，而且出于装逼的目的，将不使用桌面版的 linux 系统，全部的操做均在命令行完成。

安装 virtualBox

virtualBox 是一个开源的虚拟机软件，相比较 VMware 他更小，且开源免费，对于本篇文章想要实现的功能，已是很是足够。

首先是安装 virtualBox 虚拟机，属于一直下一步到天亮的操做，但也附上安装操做教程。

virtualBox 下载地址

virtualBox 安装教程

安装 ubuntu-server

ubuntu 是一款 Linux 系统，记住 Debian 这个单词单词能够在某些时候起到提示做用。另外，就我越发深刻了解服务器端，发现公司搭建更多用的是 centos，不过没事儿，说来讲去都是 linux 系统，对于用户而言就是文件目录或者下载工具不太同样而已。

下一步，下载 ubuntu-server 的镜像文件，我用的是 18.04.1 LTS 版本的，过个几年若是这文章还会被人翻出来的话，那时候还请下载本身喜欢的版本。

ubuntu-server 下载地址

ubuntu-server 安装教程

配置

• virtualBox

  • 新建

    • 这个基本上也是一直下一步到天亮的操做，值得一提的就是关于不能安装 64位 系统的 ubuntu 的处理，有的电脑会发现新建的时候没有 ubuntu 64位 的选项，能够的话请参考这篇文章。

      • 开启 BIOS 的虚拟化技术

  • 设置

    • 存储

      • 
      • 如上图，点击那个位置将你下载的 ubuntu-server 镜像载入便可。

    • 网络

      • 
      • 如上图，使用桥接网卡选项，能够设置该虚拟机网络环境为同一局域网下的另外一台设备，方便咱们后续经过主机访问虚拟机搭建的网络。

系统装填成功，开始系统内配置

在此，默认各位已经在虚拟机中安装好了 ubuntu 系统，而且也成功进入了系统，在咱们开始了解 docker 以前，有必要对咱们所处环境的墙作一些处理，你知道的，这墙就是那墙。

ubuntu 默认安装的下载、更新用的软件是 apt，软件安装更新的时候都是从一个存放了大量软件的地方下载的，至于从哪里下载，默认的以下。

$ cat /etc/apt/sources.list

从新设置下载源，这里还备份了一份以防不时之需。sed 指令是替换一个文件中的指定字符串为另外一个字符串，注意中间的竖线分隔符号，前面是被替换的字符串，咱们将地址替换为国内的源地址。

$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
$ sudo sed -i 's|deb.debian.org|mirrors.ustc.edu.cn|g' /etc/apt/sources.list
$ sudo sed -i 's|security.debian.org|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list

更新一下 apt-get 的源的地址，这个操做咱们之后会常常作。

$ sudo apt-get update

安装咱们后续须要的包，里面包括了对 https 地址的解析所用的工具包等。

$ sudo apt-get install apt-transport-https ca-certificates software-properties-common curl

为确保系统里面没有自带的 docker 软件的残留，咱们要清除一下旧版本的 docker，虽然新系统通常都不会有就是了。

$ sudo apt-get remove docker docker-engine docker.io

添加 docker 的 GPG 密钥，并添加 docker-ce 的软件源，这告诉了 apt 去哪里下载 docker-ce。

$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu $(lsb_release -cs) stable"

更新软件包缓存。

$ sudo apt-get update

下载 docker。

$ sudo apt-get install docker-ce

设置开机的时候启动 docker，并启动 docker。

$ sudo systemctl enable docker
$ sudo systemctl start docker

添加当前用户到 docker 的用户组，之后能够不用输入 sudo 直接使用 docker。

$ sudo groupadd docker
$ sudo usermod -aG docker $USER

更改 docker-ce 内部使用的下载镜像的地址源，对于 ubuntu 16.04 + 的系统，咱们只要在 /etc/docker/daemon.json 更改便可，注意，你可能须要 root 的权限才能够对该文件作更改。

# 使用 root 权限
$ sudo -i
$ vim /etc/docker/daemon.json
# 修改 daemon.json 为以下
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"]}
# 重启 docker 服务
$ sudo systemctl restart docker
# 记得退出当前的 root 环境
$ exit or ctrl + d

至此，对于前期环境的配置已经完成的差很少了，咱们已经替换了 apt-get 下载新的软件的源地址为国内地址，也替换了 docker-ce 下载新的镜像时候使用的源地址为国内地址，如今让咱们来测一发 docker。

docker run 为运行一个镜像文件，若是本地没有找到该镜像，会去镜像地址地址下载拉取。若是提示 permission 之类的错误，但你已经作了添加当前用户到 docker 用户组的操做，重启一下虚拟机便可，这是权限不够的意思。

$ docker run hello-world

由于咱们后期会用到 git 到个人 github 上拉取 vue-cli-base 的代码，因此这里能够提早安装一个 git。

$ sudo apt-get install git
# 配置用户名和伊妹儿
$ git config –global user.name "你的用户名"
$ git config –global user.email "你的伊妹儿"

而后既然是用了 vue-cli 那 nodeJs 天然是不能少的，由于咱们会用 webpack 进行打包，那就顺便安装个 nodeJs，我这里选择的 nodeJs 官方长期支持的版本 8.x，须要安装 10.x 版本的把 setup_8.x 改成 setup_10.x 便可。

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs

下载了 nodeJs 那天然是须要对 nodeJs 切换一下国内的源。

$ npm config set registry https://registry.npm.taobao.org

至此，前期准备已经告一段落，接下来就是开始实战部分。

docker 实战

docker 是个啥，我就近期在 linux 系统中使用以后的使用感觉来简单介绍一下。
首先来几个英文单词的解释。

• image

  • 镜像
  • 能够理解成操做系统的镜像，但又不是全部的镜像都是操做系统。

• container

  • 容器
  • docker 跑起来的时候会新建一个容器，该容器里面会运行镜像。

• registry

  • 镜像源；仓库

    • 能够理解成 docker 须要拉取镜像的时候所访问的地方。

有一些比较特殊的概念，能够看着留个印象，docker 里面的镜像是分层的，打个比方，一个操做系统的镜像，里面可能分别安装了 git node，而后加上系统的基础镜像，一共三层，咱们称他为 A镜像，若是这时候还有个 B镜像，他里面有 git node docker，而后加上系统的基础镜像，那 git node 层 AB镜像 就能够共用。

docker nginx 基础操做

相信做为前端，“nginx 作个反代理就行了”，这种话应该看到很多过，实战咱们就直接用 nginx 作个主要例子，期间会对对经常使用的一些 docker 语法作解释。

首先，咱们先拉取 nginx 的镜像文件。

$ docker pull nginx

新建一个用于测试 docker 的文件夹，方便管理。

$ mkdir /home/$USER/docker-demo
$ cd /home/$USER/docker-demo
$ mkdir html

新建一个用于 nginx 的默认展现页，咱们的第一步就是要让这个代码跑在页面上。

$ cd html
$ echo "<html><h1>Hello World</h1></html>" > index.html
$ cd ..

将 docker 跑起来吧，固然在跑起来以前，仍是须要解释一下参数。

• docker run

  • 这将新建一个容器，并在里面跑一个镜像。

• -d

  • 将该容器运行在后台，咱们使用 nginx 那确定是须要持续跑在后台的，又叫守护进程。

• -p

  • 将容器对外曝露的端口映射到宿主机的端口（也就是咱们上面花了半天功夫装的虚拟机）。
  • 说白了就是访问宿主机的 8888 端口就好像访问容器的 80 端口同样。

• --name

  • 给咱们新建的容器起一个名字。

• -v

  • 这是 docker 里面比较特殊的东西，volume，能够这么理解，冒号前面的为宿主机的路径，后面为容器内的路径，这个参数能够将宿主机路径下的东西同步到容器内，由于 /usr/share/nginx/html 这个目录就是 nginx 中默认的对外展现的目录，因此咱们将刚才新建的 html 文件夹同步到默认目录里面，咱们就能够访问该页面了。

• nginx

  • 这里是指向咱们新建容器所须要用到的镜像文件，若是你上面没有作 docker pull 的操做，docker 也会自动到仓库去拉取过来。

$ docker run -d -p 8888:80 --name my-first-nginx -v $PWD/html:/usr/share/nginx/html nginx

ok，不出意外会输出一串字符串，这个就表明了你新建容器的 id，咱们新建的全部的容器都会有一个用做标识的 id，不过咱们不须要记住它，之后能够用 docker ps 来查询。

查看一下咱们新建的容器是否有在好好工做。

$ docker ps

若见到相似以下，那表明咱们的容器有在好好工做，验证一下吧。

在命令行中看看效果。

$ curl localhost:8888

看到以下，那就成功了。

命令行看着不过瘾，咱们到真机上看看效果，不过在这以前，咱们须要知道咱们宿主机的 ip 地址，在上面的步骤中咱们已经将网络改为了桥接网卡，因此如今咱们的虚拟机用是和主机存在同一个局域网下的另外一个 ip。

查看网络接口上分配的 ip 地址，再加个筛选 IPv4 的参数。

$ ip -4 a

找到以下，192.168 开头的，这就是虚拟机的 ip 地址了。

接着，咱们只须要打开主机，访问 192.168.0.200:8888 不要忘记带上端口号便可。

nginx 实际应用

上面那些都是基操，接下来咱们来点不同的，咱们会找一个基于 vue-cli 的 webpack 脚手架，而后依旧是跑在 nginx 容器里面的应用，会有 shell 脚本的书写，方便运维朋友们进行项目一键更新发布。这更加适用于平常咱们的项目发布流程。

在准备阶段咱们安装了 nodeJs，我也准备了一个基础的 vue-cli 项目，用于打包生产项目。

在开始以前，咱们要先中止刚才咱们跑的容器。

# 这是中止容器的指令
# 由于 nginx 是运行在后台的，因此要先中止他才能够移除
# 还记得上面生成的容器惟一 id 么，这里只须要输入前几位便可中止该容器
$ docker stop 5af87

固然，光光中止还不够，出于洁癖的心理，还要把容器移除，减小占用空间。

$ bash rm 5af87

接下来建立一个新的文件夹，用于演示接下来的项目。

$ mkdir /home/$USER/docker-demo-two
$ cd /home/$USER/docker-demo-two

复制 github 上的项目到该文件夹，这是基于最新版的 vue-cli 生成的例子，固然官方尚未用上 webpack 4.x，不过问题不大，演示足矣。

$ git clone https://github.com/jsjzh/vue-cli-base.git

进入 vue-cli-base 以后就是前端基操了，使用 npm 包管理工具安装项目依赖包，因为咱们这里是要获得生产环境的代码，因此直接执行 npm run build 将项目进行打包。

$ cd vue-cli-base
$ npm install
$ npm run build

项目打包好以后查看一下是否有相关的文件生成。

$ cd dist
$ ls

看到以下目录就没问题了。

完成以后进入到开始新建的目录，进行容器的 volume 挂载操做。

$ cd /home/$USER/docker-demo-two
$ docker run -d -p 8889:80 -v $PWD/vue-cli-base/dist:/usr/share/nginx/html nginx

仍是老样子，命令行会输出该容器的 id，但咱们仍是须要查看一下 nginx 有没有好好的运行在后台。

$ docker ps

查看到容器以后，在主机打开 192.168.0.200:8889 便可看到熟悉的 vue-cli 的界面了。

可是这还没完，总不能让运维小妹妹每次都跑一遍 npm 吧，做为贴心的开发哥哥，天然是要准备脚本供小妹妹使用，新建一个 shell 脚本，并保存内容以下。

提示： vim 编辑器编辑的操做是按 i，编辑完成以后 Esc ---> :x 便可。

$ cd /home/$USER/docker-demo-two
$ vim update-project.sh

# 脚本内容
cd vue-base-cli
git pull
npm install
npm run build

保存好以后，之后项目须要更新的时候，只须要跑一跑脚本就能够完成。

$ cd /home/$USER/docker-demo-two
$ /bin/bash update-project.sh

为看到效果，咱们直接试着更改一下项目内容。

$ cd vue-cli-base/src
$ vim main.js

# 加入如下内容
console.log("file is change!");

退回到上层，执行咱们的脚本。

$ /bin/bash update-project.sh

等运行完以后，在主机打开 192.168.0.200:8889，按 F12 打开控制台，就看到了咱们输入的内容，至此，项目更新已成功。

不过既然说 docker 跑的都是容器，那天然是能够进到容器里面去一探究竟的，咱们进入 nginx 的容器里面看看。

• docker exec

  • 在运行中的容器中执行命令。

• -it

  • 保持终端打开状态。

• /bin/bash

  • 这里就是须要被执行的命令，这个命令是提供一个 bash 环境。

$ docker exec -it 26e52b8c6ffd9 /bin/bash

若是你在命令行看到 root@26e52b8c6ffd9:~# 就表明你进入了这个容器，咱们再去看看 /usr/share/nginx/html 文件夹下有没有 dist 中的文件。

$ cd /usr/share/nginx/html
$ ls

这里能够看到 index.html 文件和 static 文件夹，咱们再去看看刚才的 file is change 在哪里。

$ cd static/js
# 注意 这里的名字是都不同的，你能够先敲个 app 再按 tab 键，会进行自动补全
$ cat app.86602636cb9e13f553fb.js

在底部的小角落咱们看到了刚才输入的代码。

别忘了从容器里面退出来，依然是 $ exit 或者 ctrl + d 退出容器。

docker 一些便捷的指令

# 批量删除容器
$ docker rm `docker ps -a -q`

# 批量删除镜像
$ docker rmi `docker images -q`

#卸载 docker
$ sudo apt-get purge docker-ce
$ sudo rm -rf /var/lib/docker

后语

至此，docker 简单的应用已经结束了，后续还会有关于 docker 的应用教程，想想，若是咱们能够把 static 目录下的文件都传到云空间，利用 CDN 加速，或者再配置一下 nginx 的 gzip 压缩，再来一下反代理，而后了解一下容器新建数据库，跑一个 nodeJs 的接口服务，再用 docker-compose 把前端后端数据库链接起来，实现环境的一键部署，那不是本身一我的就是一个军队？

想一想还有点小兴奋，不过饭要一口口吃，代码天然也是要一行行敲，在日益稀疏的头发中找到代码的真谛，不求闻达于诸侯，只求一方天地宁静。

代码如人生，我甘之如饴。

我在这里 gayhub@jsjzh 欢迎你们来找我玩儿。

大纲

• 环境配置（DONE）

  • virtualBox 下载安装
  • ubuntu-server 下载安装
  • 虚拟机相关配置

• 系统装填成功，开始系统内配置（DONE）

  • 配置 apt-get 下载源
  • 配置 docker 镜像源
  • 下载 git 和 nodeJs

• docker 实战（DONE）

  • 简单的 nginx 应用
  • 结合 vue-cli 的 nginx 应用

• TODO（TODO）[分篇]

  • Dockerfile
  • docker-compose
  • nginx
  • 上传 app.js 等至云空间