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 仍是很方便的。