Docker 及 GitLab CI 在前端工做流上的实践分享（一）

现在前端工程愈来愈复杂，打造一个好用的工做流也显得愈来愈重要。
本文讲分红二个部分，经过简单例子，来介绍上图中那条鱼和狐狸 ：）

part1 : docker 本文的项目代码
part2 : gitlab-ci 点我跳转

ok， 那么如今就开始第一部分

1、什么是 Docker ？

Docker是一个基于轻量级虚拟化技术的容器引擎开源项目，能够轻松的为任何应用建立一个容器。
具体作的就是快速的帮助开发者搭建应用周期里所需的各类环境，快速地部署项目以缩短开发周期。

docker 具有如下几个优点：

1.配置简单
2.可移植
3.独立自给自足
4.轻量级

Docker 的应用场景

1.web应用工做流中的各类环境快速搭建

1. 自动化测试和持续集成、发布

2、安装 docker

首先下载安装包

这里以 mac 为例子

Mac 客户端：https://store.docker.com/edit...
其余版本：https://www.docker.com/get-do...

这时候打开终端，就可使用docker命令了。

性能和网络设置

安装后，最好进行一些基本的性能和网络设置（在 docker app的设置菜单里，快捷键 commond + ，）

设置镜像加速（很重要），这里利用阿里云的加速 https://cr.console.aliyun.com...

3、Docker 的几个核心概念

在使用 docker 以前，有必要先了解 docker 的几个核心概念。

1.镜像 images

Images 镜像是 Docker 容器的模板文件，用来建立和运行Docker容器。

镜像能够从 Docker Hub 下载：
咱们能够先用 docker search 命令来搜索 ubuntu 镜像

而后咱们能够用 docker pull ubuntu 来获取那个 images。

各个选项说明:

• REPOSTITORY：表示镜像的仓库源
• TAG：镜像的标签
• IMAGE ID：镜像ID
• CREATED：镜像建立时间
• SIZE：镜像大小

2.容器 container

Container 容器是 Docker 镜像的一个运行实例，一个实例至关于建立了一个独立的环境，咱们能够在
里面运行操做系统、程序应用、修改文件数据等等。

当你用 docker run 运行 images 的时候，就会建立对应的容器:

docker run -ti ubuntu:latest /bin/bash

-ti参数可让容器保持终端交互 （ 退出在容器内输入 exit ）
ubuntu:latest就是镜像名，/bin/bash 则是运行命令

想查看运行中的容器：docker ps

退出容器：docker stop 或者 docker kill 加上对应容器的ID (通常输入开头3~4个字母就好了)
从新启动容器： docker start加上对应容器的ID
更多容器相关命令，请查看官网文档，或者--help查看命令帮助

3.使用 Dockerfile 和 Docker-compose 定制镜像

Dockerfile 是一个文本格式的配置文件，用于快速方便的建立自定义镜像。
Docker-compose 则是用于组合多个镜像，建立一个模块化的容器集合。

Dockerfile 经常使用有如下指令选项:

- FROM
指定构建镜像的基础源镜像，若是本地没有指定的镜像，则会从 docker hub pull 镜像下来。

FROM ubuntu

- RUN
建立镜像过程当中，用来执行命令，一般用于安装程序（RUN 会被缓存，可使用docker build --no-cache 清除缓存）

RUN apt-get update && apt-get install git

- CMD
CMD可让容器在启动时默认执行一个命令。若是用户启动容器时指定了运行的命令，则会覆盖掉CMD指定的命令。

CMD ["/bin/bash","/etc/php.sh"]

- EXPOSE
容器对外映射的本地端口，须要在 docker run 的时候使用-p或者-P选项生效。

EXPOSE 8080

- ENV
设置环境变量

ENV <key> <value>       # 只能设置一个变量
ENV <key>=<value> ...   # 容许一次设置多个变量

- ADD
- COPY
ADD 和 COPY 都是本地主机文件、目录到容器指定路径中 。，不一样的是，ADD能够复制远程文件 URL，而且支持 Go 的正则模糊匹配，具体规则可参见 Go filepath.Match

ADD hom* /mydir/        # adds all files starting with "hom"
ADD hom?.txt /mydir/    # ? is replaced with any single character
COPY <src>... <dest>

- VOLUME
本地目录到容器的映射

VOLUME ["/src","/www"]

- WORKDIR
初始执行命令的路径

WORKDIR /www/server
RUN pwd # 打印/www/server

以上配置 也能够在 Docker-compose 完成，只是关键字和值的写法不太同样，具体能够参考它们的文档：
Dockerfile: https://docs.docker.com/engin...
Docker-compose: https://docs.docker.com/compo...

4、一个简单案例

使用 docker 为一个spa应用起一个开发环境+测试环境

简单说要作的是：

1. 在 docker 里起一个 node 服务热加载项目源码。
2. 用 docker 起一个 nginx 服务，代理项目编译后的 dist 目录。

在这，我用 vue-cli 初始化了一个项目，而后新建了个 docker-compose 文件夹（用来配置docker）以下图:

上图是源码目录，

另外，docker-compose 的目录结构以下

• docker-compose

  • docker-compose.yml

  • nginx

    • Dockerfile
    • nginx.conf

    • sites-enabled

      • www.docker-test.com.conf

  • node

    • Dockerfile
    • start.sh

1. 、node 文件夹下各有一份 Dockerfile 文件，能够建立两个 images 镜像，docker-compose.yml 则用于将两个镜像服务整合使用。

咱们先看 node 文件夹下的
Dockerfile：

# docker-compose/php/Dockerfile

#基于 node 镜像
FROM node  

# 复制宿主机的 start.sh 到 容器 /etc/start.sh
ADD start.sh /etc/start.sh

# 设置初始命令执行目录
WORKDIR /www

# 经过 RUN 能够在容器里执行自定义命令
RUN node -v
RUN pwd

CMD ["/bin/bash","/etc/start.sh"]

start.sh:

#!/bin/bash

# 启动 php 服务
npm run dev

再来看 nginx 下的
Dockerfile:

# docker-compose/nginx/Dockerfile

#基于 nginx 镜像
FROM nginx  

#基于 nginx 相关配置复制到容器
ADD nginx.conf /etc/nginx/nginx.conf
ADD sites-enabled/* /etc/nginx/conf.d/

#建立 nginx log 和用户相关路径
RUN mkdir /opt/htdocs && mkdir /opt/log && mkdir /opt/log/nginx
RUN chown -R www-data.www-data /opt/htdocs /opt/log

这样，两个服务的 Dockerfile 都建立完成了，可是咱们还没暴露端口，也没配置 volumes 映射，这里咱们能够在 docker-compose.yml 中设置：

nginx:
  build: ./nginx
  ports:
    - "80:80" #映射到本地的端口
  volumes: 
    - /Users/mr.yun/docker-test/docker-demo/dist:/www

node:
  build: ./node
  ports: 
    - "8085:8080"   #映射到本地的端口 本地访问8085，即访问容器内的8080
  volumes:
    - /Users/mr.yun/docker-test/docker-demo:/www

注意，上面代码中，volumes 的值，要根据你本身的实际项目目录来配置。

配置完以上变量后，cd 进入 docker-compose 文件目录

直接运行命令

# 启动容器集合，会同时建立两个image，并启动两个容器，也能够加 -d 在后台运行
# 运行后能够经过 docker images,docker ps查看生成的镜像和容器
docker-compose up --biuld

等待下载完成，并自动运行

而后在浏览器输入 127.0.0.1:8050 ,就能看到 vue项目,而且修改源码能热加载。

输入 127.0.0.1，则能够看到静态资源 hash 过的项目。（别忘了在本地先 npm run build）

哦了，以上就是 docker 的基本使用介绍，更多玩法和技巧，到实际项目中探索。我的感受在项目多、协做人数多的状况下，docker 仍是很方便的。