Docker 及 GitLab CI 在前端工作流上的實踐分享（一）

wyk1184 發布于2019-06-28 16:01 / 3037人閱讀

摘要：如今前端工程越來越復雜，打造一個好用的工作流也顯得越來越重要。如果用戶啟動容器時指定了運行的命令，則會覆蓋掉指定的命令。個人感覺在項目多協作人數多的情況下，還是很方便的。

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

part1 : docker 本文的項目代碼
part2 : gitlab-ci 點我跳轉

ok，那么現在就開始第一部分

一、什么是 Docker ？

Docker是一個基于輕量級虛擬化技術的容器引擎開源項目，可以輕松的為任何應用創建一個容器。
具體做的就是快速的幫助開發者搭建應用周期里所需的各種環境，快速地部署項目以縮短開發周期。

docker 具備以下幾個優勢：

1.配置簡單
2.可移植
3.獨立自給自足
4.輕量級

Docker 的應用場景

1.web應用工作流中的各種環境快速搭建

自動化測試和持續集成、發布

二、安裝 docker

首先下載安裝包

這里以 mac 為例子

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

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

性能和網絡設置

安裝后，最好進行一些基本的性能和網絡設置（在 docker app的設置菜單里，快捷鍵 commond + ，）

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

三、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         # 只能設置一個變量
ENV = ...   # 允許一次設置多個變量

- 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 ...

- 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...

四、一個簡單案例

使用 docker 為一個spa應用起一個開發環境+測試環境

簡單說要做的是：

在 docker 里起一個 node 服務熱加載項目源碼。

用 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

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

GPU云服務器云服務器 Gitlab CI gitlab-ci-runner 云主機在我們工作中的應用在前端的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/27058.html

Docker 及 GitLab CI 在前端工作流上的實踐分享（一）

摘要：如今前端工程越來越復雜，打造一個好用的工作流也顯得越來越重要。如果用戶啟動容器時指定了運行的命令，則會覆蓋掉指定的命令。個人感覺在項目多協作人數多的情況下，還是很方便的。 showImg(https://segmentfault.com/img/remote/1460000011553749?w=1100&h=225); 如今前端工程越來越復雜，打造一個好用的工作流也顯得越來越重要。本...

godruoyi 2019-08-21 17:02 評論0 收藏0
CI Weekly #6 | 再談 Docker / CI / CD 實踐經驗

摘要：阿里云效平臺基于理念的私有平臺實踐本文將系統的從個方面，分享互娛運維團隊對于運維平臺實踐經驗及未來展望，希望對大家有一些參考意義。 CI Weekly 圍繞『軟件工程效率提升』進行一系列技術內容分享，包括國內外持續集成、持續交付，持續部署、自動化測試、 DevOps 等實踐教程、工具與資源，以及一些工程師文化相關的程序員 Tips 。同步于 flow.ci Blog、微信公眾號、官...

justCoding 2019-06-28 17:49 評論0 收藏0
CI Weekly #19 | 關于軟件開發模型的思考，以及最新 CI/CD 實踐分享

摘要：以上是的所有技術分享，如有問題，請聯系我們圍繞軟件工程效率提升進行一系列技術內容分享，包括國內外持續集成持續交付，持續部署自動化測試等實踐教程工具與資源，以及一些工程師文化相關的程序員。五月一來，夏天便悄然而至。flow.ci 也帶來了幾個新的變化，幫你進一步優化開發工作流。一起來看看這幾個重點功能：支持 iOS 項目 Xcode8.3 構建 iOSer 們重點來了，flow....

CoderBear 2019-06-28 15:48 評論0 收藏0
2018 小回顧

摘要：不過今兒與往年不同的是昨晚突然發高燒，今兒都沒能去上班，感謝我的小可愛在照顧我。尤其要感謝小可愛，給了我很多支持。在這一年里小可愛的廚藝越來越棒，美滋滋，嘿嘿。年底了，慣例做個小回顧，對這一年做個總結，也對下一年大致做個規劃。不過今兒與往年不同的是昨晚突然發高燒，今兒都沒能去上班，感謝我的小可愛在照顧我。這篇文章也是躺在床上用手機編輯的。還是按照慣例從工作，生活兩方面來說。先聊聊...

BaronZhang 2019-06-28 16:55 評論0 收藏0
2018 小回顧

摘要：不過今兒與往年不同的是昨晚突然發高燒，今兒都沒能去上班，感謝我的小可愛在照顧我。尤其要感謝小可愛，給了我很多支持。在這一年里小可愛的廚藝越來越棒，美滋滋，嘿嘿。年底了，慣例做個小回顧，對這一年做個總結，也對下一年大致做個規劃。不過今兒與往年不同的是昨晚突然發高燒，今兒都沒能去上班，感謝我的小可愛在照顧我。這篇文章也是躺在床上用手機編輯的。還是按照慣例從工作，生活兩方面來說。先聊聊...

HelKyle 2019-07-01 16:58 評論0 收藏0