搭建前端开发环境——docker篇

1、解决痛点

1. 免搭建前端静态环境

2. 分支切换，无需从新启动编译（package.json或gulpfile.js文件改变除外）

3. nginx可自行配置，知足不一样项目的需求

2、前端静态搭建思路

基于ubuntu系统环境，利用nginx静态资源服务器通过docker暴露出来的端口进行请求转发，这样后端的开发机上面只须要安装docker就可以访问前端的静态资源，不须要访问前端开发机。

3、具体解决方案

1. 用 Kitematic 客户端实现跨平台运行 Docker

2. 用端口映射预览 Docker 里的文件

3. 用 nginx + 端口映射编辑 Docker 里的文件

4. 配置一个通用的 Image（镜像）

这里面有几个概念须要先解释一下。

首先，Kitematic 是一个 Docker GUI，配置很是方便。

其次，Docker 中最重要的三个概念是 Container（容器）、Image（镜像）和 Volume（卷）。

Image 是静态内容，若是你要把某个 Image 跑起来，那就须要一个 Container。这里面有一点很重要：Container 中所作的改动不会保存到 Image。若是须要保存改动，很简单，执行 docker commit ContainerID TAG 便可，相似于 git 的 commit

若是不想使用commit仍想保存文件，docker 也提供了一个方法：使用 Volume。

Volume 就是专门存放数据的文件夹，启动 Image 时能够挂载一个或多个 Volume，Volume 中的数据独立于 Image，重启不会丢失。

最后说端口映射。前面说过，Docker 能够看作一个虚拟机，你的全部文件都在里面。若是你在 Container 中运行一个服务器，监听 127.0.0.1:8000，从你本身的机器上直接访问 http://127.0.0.1:8000 是不行的，由于 Container 和你的机器是两个不一样的环境。

那怎么办呢？咱们先来看一个你们都熟悉的问题。

平常开发中咱们常常须要让同事预览网页效果，经常使用的方法是监听 0.0.0.0:8000，而后让同事链接同一个局域网，访问 http://你的机器IP:8000 便可。

Container 的问题很是类似，只不过咱们本身变成了“同事”，须要访问 Docker 内部的网页。看起来只要拿到 Container 的 IP 问题就解决了。

幸运的是，Container 确实有 IP。

一般状况下这个 IP 是 192.168.99.100（利用 Kitematic 启动 docker），只能从 Container 的宿主机（也就是运行 Docker 的机器）访问。不过 Container 的状况有些特别，它只关联了 IP，没有关联端口。所以若是想要访问 Container 内部的端口（好比 8000），你须要手动配置端口映射，把 Container 内部的端口映射到 IP 上。

4、动手

1. 下载Docker Toolbox

Docker Toolbox 支持 Windows 和 Mac OS，能够到官网下载安装，耗时较严重，建议找直接找下下好的包。

安装完毕以后打开 Kitematic，注册一个 Docker Hub 帐号，方便以后的操做。

2. 下载Ubuntu镜像

在 Katematic 里面的搜索 Ubuntu

选择第二排第一个，点击 create 按钮。

这里插一句，fuck GFW ，100M的文件能花两个小时下载，也是醉了。

下载完成后，在 Kitematic 左侧的 Container 列表中选择 ubuntu，而后点击上方的“START”按钮执行。点击“EXEC”能够进入系统命令行，输入 su 开启 root 权限。

这个时候，能够点击 Kitematic 右上角的“Settings”，点击“Ports”，你会看到一个 IP 地址，一般状况下是 192.168.99.100。打开本身的电脑的命令行，输入 ping 192.168.99.100，应该是通的。

3. 常规初始化工做

受够了渣下载速度，决定换源。采用的是中科大的源，你也能够尝试阿里云的源，速度都不错~

sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
apt-get update

先安装必要的编辑器以及路径补全：
apt-get install vim bash-completion

其它的工具能够自行添加

4. 安装nginx以及nvm

nvm是一个 node 版本管理器，利用它能够进行多个node版本的管理。

在开启root权限的终端输入：

apt-get update
apt-get install nginx
apt-get install curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
source ~/.bashrc
nvm install node

安装完成不忙作nginx配置，咱们须要等其挂载数据卷以后，再作nginx配置文件修改。

nvm能够采用国内的淘宝源，速度比较快。

5. 导出image

在 mac 平台上面能够直接操做 Katematic 进行端口映射配置，但在 windows 平台上面只能经过 命令行 进行配置。挂载卷目前只能经过命令行进行配置。基于这种状况，咱们统一利用命令行来配置。

首先，commit。点击 Kitematic 左下角 “DOCKER CLI”，执行：

docker ps

相似于以下的输出：

➜  ~ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                                                                                      NAMES
b357a78dc95e        f753707788c5        "/bin/bash"         3 days ago          Up 4 seconds        0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp, 0.0.0.0:8088->8088/tcp   iwjwdocker

copy 出 container id，这里是b357a78dc95e。

而后执行：
docker commit b357a78dc95e username/imagename

接下来，导出Image

docker export b357a78dc95e -o ubuntu.tar

查看你的我的目录。mac上面就是 /Users/你的用户名，就能找到ubuntu.tar文件。

接下来，咱们会新建一个 image，在这个 image 上面进行整个的配置。

6. 配置端口映射以及挂载卷

配置流程：

1. 在 Kitematic 中点击左下角“DOCKER CLI”打开 Docker 命令行

2. 输入命令docker import，从文件夹中直接把 ubuntu 文件拖拽到命令行中（注意 ubuntu 文件路径中不能有中文，若是有，先把文件移动到另外一个纯英文路径的文件夹中）

3. 输入命令docker images，复制出镜像的 IMAGE ID（相似b357a78dc95e）

4. 最重要的一步，输入命令：

docker run -t -i --privileged -p 80:80/tcp \
    -p 443:443/tcp -p 8088:8088/tcp \
    -p 8000:8000/tcp -p 8080:8080/tcp -d --name iwjw \
    -v /Users/aaaa/test:/static \
    -v /Users/aaa/nginxconf:/etc/nginx/sites-enabled \
    -v /Users/aaa/www:/www  IMAGEID \
    /bin/bash

解释一下上面的命令行：

• -p 80:80/tcp:docker基于 TCP 协议暴露 80 端口

• --name iwjw:在 Katematic 显示这个 image 的名称为 iwjw

• -v /Users/aaaa/test:/static:将/Users/aaaa/test这个文件夹挂载到 docker 内Ubuntu系统的/static文件夹。简单说来，就是在docker命令行内 进入 /static文件夹，能访问到宿主机（本人电脑）中的/Users/aaaa/test文件夹。

• 注意：挂载/Users/aaaa/test这个文件夹是用来存放 静态资源代码，挂载/Users/aaa/nginxconf是用来编写nginx配置文件的，挂载/Users/aaa/www能够用来存放一些自动化脚本

若是须要使用80端口，注意须要删除sites-enabled文件夹里面的default文件，default文件里面存在对80端口的默认设置（利用root进行的配置）

7. 根据本身的项目进行个性化配置

个性化配置：

1. nginx

2. 运行脚本编写，能够考虑放在/www文件夹里进行管理。

shell脚本相似以下：

function init() {
  nginx
  npm install gulp -g
  npm install
}
# 打开命令行提示

echo " -aaainit 进入 aaa 文件夹，并初始化aaa项目"
echo " -aaa 进入 aaa 文件夹，并初始化aaa项目"
echo " -h 帮助"

while [ -n "$1" ]
do
    case "$1" in
    "-aaainit")
        echo "进入 aaa 文件夹，并初始化运行 aaa 项目"

        cd /static/aaa
        init
        npm run start

        ;;
    "-aaa")
        echo "进入 aaa 文件夹，并运行 aaa 项目"

        cd /static/aaa
        npm run start

        ;;

    "-h")
        echo " -aaainit 进入 aaa 文件夹，并初始化aaa项目"
        echo " -aaa 进入 aaa 文件夹，并初始化aaa项目"
        echo " -h 帮助"
        ;;
    esac
    shift
done

5、结语

基本上，完成上面的docker配置，后端就能够本身在前端代码的分支进行本身接口的测试了。

引入docker以后，能够大大减小先后端联调的时间，从而加快开发进度。

这篇文章是在基于梁杰的这篇用 Docker 快速配置前端开发环境进行的开发，建议你们首先阅读这篇文章。