使用docker搭建nginx+vue

写在开头

开发环境 Mac ，docker对 windows 并不友好，家庭版则直接放弃吧，个人觉得 docker 其实就是运行在本地的一个小型的 Linux 环境，只是它比虚拟机轻太多，反正如果实在懒得去搞清楚 docker 是啥，你需要把它当成操作系统去使用则好

其实需要知道 docker 的镜像和容器之说，好比 class 和 objec 一样。通俗点就是我们要装 windows 系统，需要有系统镜像，同理 docker 要让 Linux 容器跑起来，需要 Linux 镜像。

每一个镜像都有一个唯一 id

最后我们需要知道，每当我们不知怎么办，或者迷路的时候，记得 -h 很有帮助。

安装

万事开头难，windows 更难，Linux 其次，Mac 极其轻松。

docker 常用命令

• 查看镜像列表 docker images
• 查看运行的 docker 容器列表 docker ps
• 运行 docker 容器 docker run

安装 nginx 镜像及启动

假设我们的环境已经ok了，那么我们只需要

$ docker pull linux

• 基本运行

  // 如果我们不把容器端口映射到本地，就算容器跑起来，你也访问不到。
  $ docker run -p [本地端口]:[容器端口] [镜像]

• 后台运行

  //后台运行的时候我们可以做其他的事情
  $ docker run -d ...

• 交互运行并进入命令行模式

  // 交互运行的时候，我们可以进入到容器，干一些事情，比如配置 nginx ，
  $ docker run -t -i container /bin/bash

实例运行

• 在后台运行一次 nginx

$ docker run -d nginx  ||  docker run -d 53f3fd8007f7 (ps: image id,推荐这种写法)

若有一串字母数字返回，那是container id ,说明容器已经跑起来了，再使用 docker ps 查看一下运行中容器，恭喜，可使用 docker stop [container id] 关闭容器

• 启动nginx 并进入命令行

// 进入到 nginx 容器，并打开命令行
$ docker run -it nginx /bin/bash
// 同时输入 nginx -h 查看 nginx 的位置，
我能查看到的信息显示，当前 nginx 的配置文件地址在:
"/etc/nginx/conf.d"
location 地址是:
"/usr/share/nginx/html"

如果需要更改 nginx 配置，或者把要运行的项目放入到 nginx/html 目录 ，可以使用 拷贝命令
例如：把 nginx config 复制到本地的/tmp 中

$ docker cp  96f7f14e99ab:/etc/nginx/conf.d/default.conf /tmp/

至此我们可以使用 cp 把我们要运行的 vue 打包文件 cp 到 /usr/share/nginx/html/，并把 nginx 的 80端口映射到本地的 8080 。大功告成了？确实算是。但是对于我们开发来说太麻烦了，docker 有一项功能，叫数据卷，通俗讲可以实现 vue 打包后的 dist 目录直接映射到 容器 nginx 的 /usr/share/nginx/html/ 中。

$ docker -v 本地目录:容器目录

数据卷

$ docker run -d -p 81:80 -v /usr/local/var/www:/usr/share/nginx/html 53f3fd8007f7

命令说明：

• -p 81:80 把容器的80端口挂在到本地的81
• -v /usr/local/var/www:/usr/share/nginx/html 把自己创建的www目录挂载到容html

此外

在运行容器后，我们还可以使用 exec 进入到容器

$ docker exec -it [CONTAINER ID] /bin/bash

祝，玩得开心