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

2017-10-14 本文已影响0人 ccfnever

如今前端工程越来越复杂，打造一个好用的工作流也显得越来越重要。
本文讲分成二个部分，通过简单例子，来介绍上图中那条鱼和狐狸：）

part1 : docker 本文的项目代码
part2 : gitlab-ci

ok，那么现在就开始第一部分

一、什么是 Docker ？

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

docker 具备以下几个优势：

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

Docker 的应用场景

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

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

二、安装 docker

首先下载安装包

这里以 mac 为例子

Mac 客户端：https://store.docker.com/editions/community/docker-ce-desktop-mac
其他版本：https://www.docker.com/get-docker

上图是源码目录，

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

docker-compose
- docker-compose.yml
- nginx
  - Dockerfile
  - nginx.conf
  - sites-enabled
    - www.docker-test.com.conf
- node
  - Dockerfile
  - start.sh

nginx 、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 还是很方便的。