摘要：如今前端工程越來越復(fù)雜，打造一個(gè)好用的工作流也顯得越來越重要。如果用戶啟動(dòng)容器時(shí)指定了運(yùn)行的命令，則會(huì)覆蓋掉指定的命令。個(gè)人感覺在項(xiàng)目多協(xié)作人數(shù)多的情況下，還是很方便的。

如今前端工程越來越復(fù)雜，打造一個(gè)好用的工作流也顯得越來越重要。
本文講分成二個(gè)部分，通過簡單例子，來介紹上圖中那條魚和狐貍 ：）

part1 : docker 本文的項(xiàng)目代碼
part2 : gitlab-ci 點(diǎn)我跳轉(zhuǎn)

ok， 那么現(xiàn)在就開始第一部分

Docker是一個(gè)基于輕量級(jí)虛擬化技術(shù)的容器引擎開源項(xiàng)目，可以輕松的為任何應(yīng)用創(chuàng)建一個(gè)容器。
具體做的就是快速的幫助開發(fā)者搭建應(yīng)用周期里所需的各種環(huán)境，快速地部署項(xiàng)目以縮短開發(fā)周期。

docker 具備以下幾個(gè)優(yōu)勢(shì)：

1.配置簡單
2.可移植
3.獨(dú)立自給自足
4.輕量級(jí)

Docker 的應(yīng)用場(chǎng)景

1.web應(yīng)用工作流中的各種環(huán)境快速搭建

自動(dòng)化測(cè)試和持續(xù)集成、發(fā)布

首先下載安裝包

這里以 mac 為例子

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

這時(shí)候打開終端，就可以使用docker命令了。

性能和網(wǎng)絡(luò)設(shè)置

安裝后，最好進(jìn)行一些基本的性能和網(wǎng)絡(luò)設(shè)置（在 docker app的設(shè)置菜單里，快捷鍵 commond + ，）

設(shè)置鏡像加速（很重要），這里利用阿里云的加速 https://cr.console.aliyun.com...

在使用 docker 之前，有必要先了解 docker 的幾個(gè)核心概念。

1.鏡像 images

Images 鏡像是 Docker 容器的模板文件，用來創(chuàng)建和運(yùn)行Docker容器。

鏡像可以從 Docker Hub 下載：
我們可以先用 docker search 命令來搜索 ubuntu 鏡像

然后我們可以用 docker pull ubuntu 來獲取那個(gè) images。

各個(gè)選項(xiàng)說明:

REPOSTITORY：表示鏡像的倉庫源

TAG：鏡像的標(biāo)簽

IMAGE ID：鏡像ID

CREATED：鏡像創(chuàng)建時(shí)間

SIZE：鏡像大小

2.容器 container

Container 容器是 Docker 鏡像的一個(gè)運(yùn)行實(shí)例，一個(gè)實(shí)例相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的環(huán)境，我們可以在
里面運(yùn)行操作系統(tǒng)、程序應(yīng)用、修改文件數(shù)據(jù)等等。

當(dāng)你用 docker run 運(yùn)行 images 的時(shí)候，就會(huì)創(chuàng)建對(duì)應(yīng)的容器:

docker run -ti ubuntu:latest /bin/bash

-ti參數(shù)可以讓容器保持終端交互 （ 退出在容器內(nèi)輸入 exit ）
ubuntu:latest就是鏡像名，/bin/bash 則是運(yùn)行命令

想查看運(yùn)行中的容器：docker ps

退出容器：docker stop 或者 docker kill 加上對(duì)應(yīng)容器的ID (一般輸入開頭3~4個(gè)字母就行了)
重新啟動(dòng)容器： docker start加上對(duì)應(yīng)容器的ID
更多容器相關(guān)命令，請(qǐng)查看官網(wǎng)文檔，或者--help查看命令幫助

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

Dockerfile 是一個(gè)文本格式的配置文件，用于快速方便的創(chuàng)建自定義鏡像。
Docker-compose 則是用于組合多個(gè)鏡像，創(chuàng)建一個(gè)模塊化的容器集合。

Dockerfile 常用有以下指令選項(xiàng):

- FROM
指定構(gòu)建鏡像的基礎(chǔ)源鏡像，如果本地沒有指定的鏡像，則會(huì)從 docker hub pull 鏡像下來。

FROM ubuntu

- RUN
創(chuàng)建鏡像過程中，用來執(zhí)行命令，通常用于安裝程序（RUN 會(huì)被緩存，可以使用docker build --no-cache 清除緩存）

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

- CMD
CMD可以讓容器在啟動(dòng)時(shí)默認(rèn)執(zhí)行一個(gè)命令。如果用戶啟動(dòng)容器時(shí)指定了運(yùn)行的命令，則會(huì)覆蓋掉CMD指定的命令。

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

- EXPOSE
容器對(duì)外映射的本地端口，需要在 docker run 的時(shí)候使用-p或者-P選項(xiàng)生效。

EXPOSE 8080

- ENV
設(shè)置環(huán)境變量

ENV         # 只能設(shè)置一個(gè)變量
ENV = ...   # 允許一次設(shè)置多個(gè)變量

- ADD
- COPY
ADD 和 COPY 都是本地主機(jī)文件、目錄到容器指定路徑中 。，不同的是，ADD可以復(fù)制遠(yuǎn)程文件 URL，并且支持 Go 的正則模糊匹配，具體規(guī)則可參見 Go filepath.Match

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

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

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

- WORKDIR
初始執(zhí)行命令的路徑

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

以上配置 也可以在 Docker-compose 完成，只是關(guān)鍵字和值的寫法不太一樣，具體可以參考它們的文檔：
Dockerfile: https://docs.docker.com/engin...
Docker-compose: https://docs.docker.com/compo...

使用 docker 為一個(gè)spa應(yīng)用起一個(gè)開發(fā)環(huán)境+測(cè)試環(huán)境

簡單說要做的是：

在 docker 里起一個(gè) node 服務(wù)熱加載項(xiàng)目源碼。

用 docker 起一個(gè) nginx 服務(wù)，代理項(xiàng)目編譯后的 dist 目錄。

在這，我用 vue-cli 初始化了一個(gè)項(xiàng)目，然后新建了個(gè) docker-compose 文件夾（用來配置docker）如下圖:

上圖是源碼目錄，

另外，docker-compose 的目錄結(jié)構(gòu)如下

docker-compose

docker-compose.yml

nginx

Dockerfile

nginx.conf

sites-enabled

www.docker-test.com.conf

node

Dockerfile

start.sh

、node 文件夾下各有一份 Dockerfile 文件，可以創(chuàng)建兩個(gè) images 鏡像，docker-compose.yml 則用于將兩個(gè)鏡像服務(wù)整合使用。

我們先看 node 文件夾下的
Dockerfile：

# docker-compose/php/Dockerfile

#基于 node 鏡像
FROM node  

# 復(fù)制宿主機(jī)的 start.sh 到 容器 /etc/start.sh
ADD start.sh /etc/start.sh

# 設(shè)置初始命令執(zhí)行目錄
WORKDIR /www

# 通過 RUN 可以在容器里執(zhí)行自定義命令
RUN node -v
RUN pwd

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

start.sh:

#!/bin/bash

# 啟動(dòng) php 服務(wù)
npm run dev 

再來看 nginx 下的
Dockerfile:

# docker-compose/nginx/Dockerfile

#基于 nginx 鏡像
FROM nginx  

#基于 nginx 相關(guān)配置復(fù)制到容器
ADD nginx.conf /etc/nginx/nginx.conf
ADD sites-enabled/* /etc/nginx/conf.d/

#創(chuàng)建 nginx log 和用戶相關(guān)路徑
RUN mkdir /opt/htdocs && mkdir /opt/log && mkdir /opt/log/nginx
RUN chown -R www-data.www-data /opt/htdocs /opt/log

這樣，兩個(gè)服務(wù)的 Dockerfile 都創(chuàng)建完成了，但是我們還沒暴露端口，也沒配置 volumes 映射，這里我們可以在 docker-compose.yml 中設(shè)置：

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

node:
  build: ./node
  ports: 
    - "8085:8080"   #映射到本地的端口 本地訪問8085，即訪問容器內(nèi)的8080
  volumes:
    - /Users/mr.yun/docker-test/docker-demo:/www

注意，上面代碼中，volumes 的值，要根據(jù)你自己的實(shí)際項(xiàng)目目錄來配置。

配置完以上變量后，cd 進(jìn)入 docker-compose 文件目錄

直接運(yùn)行命令

# 啟動(dòng)容器集合，會(huì)同時(shí)創(chuàng)建兩個(gè)image，并啟動(dòng)兩個(gè)容器，也可以加 -d 在后臺(tái)運(yùn)行
# 運(yùn)行后可以通過 docker images,docker ps查看生成的鏡像和容器
docker-compose up --biuld

等待下載完成，并自動(dòng)運(yùn)行

然后在瀏覽器輸入 127.0.0.1:8050 ,就能看到 vue項(xiàng)目,并且修改源碼能熱加載。

輸入 127.0.0.1，則可以看到靜態(tài)資源 hash 過的項(xiàng)目。（別忘了在本地先 npm run build）

哦了，以上就是 docker 的基本使用介紹，更多玩法和技巧，到實(shí)際項(xiàng)目中探索。
個(gè)人感覺在項(xiàng)目多、協(xié)作人數(shù)多的情況下，docker 還是很方便的。