Github + Jenkins + Docker 實現自動化部署

本文首發於：github.com/mcuking/blo…

實踐項目：github.com/mcuking/mob…

首先聲明下，本文並不是原創，而是筆者最近在研究前端部署方面的知識，看了一些掘金上的文章，並根據文章實操實現了 Github + Jenkins + Docker 自動化部署，並想把整個過程記錄下來，其中會摘抄下面文章的部份內容。

寫給前端的 Docker 實戰教程

[手把手系列之]Docker 部署 vue 項目

[手把手系列之] Jenkins+Docker 自動化部署 vue 項目

從零搭建 docker+jenkins+node.js 自動化部署環境

Jenkins 和 Docker 的具體用途就再也不這裏贅述了，若是想了解相關知識，也能夠閱讀上面推薦的幾篇文章。

筆者以 CentOS 7.6 系統爲基礎，介紹如何使用 Github + Jenkins + Docker 實現項目的自動化打包部署。

Docker 安裝

1.安裝 Docker 並啓動 Docker

// 更新軟件庫
yum update -y

// 安裝 docker
yum install docker -y

// 啓動 docker 服務
service docker start

// 重啓docker 服務
service docker restart

// 中止 docker 服務
service docker stop
複製代碼

2.安裝 Docker-Compose 插件用於編排鏡像

// 下載並安裝 docker-compose (當前最新版本爲 1.24.1，讀者能夠根據實際狀況修改最新版本)
curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

// 設置權限
chmod +x /usr/local/bin/docker-compose

// 安裝完查看版本
docker-compose -version
複製代碼

Jenkins 安裝和配置

1.搜索 Jenkins

docker search jenkins
複製代碼

注意：雖然上圖中第一個是 Docker 官方維護的版本，但它很長時間沒有更新了，是一個過期的版本。因此這裏咱們要安裝第二個，這個是 Jenkins 官方維護的。

2.安裝 Jenkins

sudo docker run -d -u 0 --privileged --name jenkins -p 49003:8080 -v /root/jenkins_home:/var/jenkins_home jenkins/jenkins:latest
複製代碼

其中: -d 指的是在後臺運行； -u 0 指的是傳入 root 帳號 ID，覆蓋容器中內置的帳號； -v /root/jenkins_home:/var/jenkins_home 指的是將 docker 容器內的目錄 /var/jenkins_home 映射到宿主機 /root/jenkins_home 目錄上； --name jenkins 指的是將 docker 容器內的目錄 /var/jenkins_home 映射到宿主機 /root/jenkins_home 目錄上； -p 49003:8080 指的是將容器的 8080 端口映射到宿主機的 49003 端口； --privileged 指的是賦予最高權限。

整條命令的意思就是： 運行一個鏡像爲 jenkins/jenkins:latest 的容器，命名爲 jenkins_home，使用 root 帳號覆蓋容器中的帳號，賦予最高權限，將容器的 /var/jenkins_home 映射到宿主機的 /root/jenkins_home 目錄下，映射容器中 8080 端口到宿主機 49003 端口

執行完成後，等待幾十秒，等待 Jenkins 容器啓動初始化。到瀏覽器中輸入 http://your ip:49003 查看 Jenkins 是否啓動成功

看到以下界面說明啓動成功：

經過以下命令獲取密碼，複製到上圖輸入框中

cat /root/jenkins_home/secrets/initialAdminPassword
複製代碼

進入到下個頁面，選擇【安裝推薦的插件】。

因爲牆的問題，須要修改 Jenkins 的默認下載地址。能夠在瀏覽器另起一個 tab 頁面，進入 http://your ip:49003/pluginManager/advanced，修改最下面的升級站點 URL 爲 http://mirror.esuni.jp/jenkins/updates/update-center.json

而後重啓容器，再次進入初始化頁面，一般下載速度會加快。

docker restart [docker container id]
複製代碼

而後就是建立管理員帳號。

進入首頁後，由於自動化部署中須要經過 ssh 登錄服務器執行命令以及 node 環境，因此須要下載 Publish Over SSH 和 NodeJS 插件，可經過系統管理 -> 管理插件 -> 可選插件進入，搜索選中並直接安裝。以下圖所示：

須要注意的是，Publish Over SSH 須要配置相關 ssh 服務器，經過系統管理 -> 系統設置 進入並拉到最下面，輸入 Name、Hostname、Username、Passphrase / Password 等參數。以下圖所示：

而後點擊 Test Configuration 校驗可否登錄。

至此 Jenkins 已經完成了全局配置。

關聯 Jenkins 和 Github

在 GitHub 建立一個項目，以本項目爲例，在項目根目錄下建立 nginx.conf 和 docker-compose.yml 文件

nginx.conf

#user nobody;
worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include    mime.types;
  default_type application/octet-stream;
  sendfile    on;
  #tcp_nopush on;
  #keepalive_timeout 0;
  keepalive_timeout 65;
  #用於對前端資源進行 gzip 壓縮
  #gzip on;
  gzip on;
  gzip_min_length 5k;
  gzip_buffers   4 16k;
  #gzip_http_version 1.0;
  gzip_comp_level 3;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
  server {
    listen 80;
    server_name localhost;
    #前端項目
    location / {
      index index.html index.htm;  #添加屬性。
      root /usr/share/nginx/html;  #站點目錄
      # 全部靜態資源均指向 /index.html
      try_files $uri $uri/ /index.html;
    }

    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  /usr/share/nginx/html;
    }
  }
}
複製代碼

docker-compose.yml

version: '3'
services:
 mobile-web-best-practice: #項目的service name
 container_name: 'mobile-web-best-practice-container' #容器名稱
 image: nginx #指定鏡像
 restart: always
 ports:
 - 80:80
 volumes:
      #~ ./nginx.conf爲宿主機目錄, /etc/nginx爲容器目錄
 - ./nginx.conf:/etc/nginx/nginx.conf #掛載nginx配置
      #~ ./dist 爲宿主機 build 後的dist目錄, /usr/src/app爲容器目錄,
 - ./dist:/usr/share/nginx/html/ #掛載項目
 privileged: true
複製代碼

這裏須要解釋下 volumes 參數，在打包 Docker 鏡像時，若是將 nginx.conf 和 dist 直接拷貝到鏡像中，那麼每次修改相關文件時，都須要從新打包新的鏡像。經過 volumes 能夠將宿主機的某個文件映射到容器的某個文件，那麼改動相關文件，就不要從新打包鏡像了，只需修改宿主機上的文件便可。

而後在 Jenkins 建立一個新的任務，選擇【構建一個自由風格的軟件項目】，並設置相關配置，以下圖所示。

其中第三張圖兩部分命令含義以下：

第一部分 shell 命令是 build 前端項目，會在項目根目錄下生成 dist 目錄

echo $PATH
node -v
npm -v
npm install
npm run build
複製代碼

第二部分 shell 命令就是經過 ssh 登錄服務器，經過 docker-compose 進行構建 docker 鏡像並運行容器。相較於直接使用 docker ，當更新代碼時無需執行中止刪除容器，從新構建新的鏡像等操做。

cd /root/jenkins_home/workspace/mobile-web-best-practice \
&& docker-compose up -d
複製代碼

最後能夠回到該任務頁，點擊【當即構建】來構建咱們的項目了。

實現自動觸發打包

不過仍有個問題，那就是當向 GitHub 遠程倉庫 push 代碼時，須要可以自動觸發構建，相關操做以下。

1.修改 Jenkins 安全策略

經過系統管理 -> 全局安全配置 進入，並以下圖操做

2.生成 Jenkins API Token

經過用戶列表 -> 點擊管理員用戶 -> 設置，點擊添加新 token，而後複製身份驗證令牌 token

3.在 Jenkins 項目對應任務的設置中配置【構建觸發器】，將剛複製的 token 粘貼進去，以下圖所示：

4.在 Github 相關項目中打開 Setting -> Webhooks -> Add webhooks，輸入格式以下的 URL :

// 前面是 Jenkins 服務地址，mobile-web-best-practice 指在 Jenkins 的任務名稱，Token指上面獲取的令牌
http://12x.xxx.xxx.xxx:xxxx/job/mobile-web-best-practice/build?token=Token
複製代碼

這樣，咱們就實現了在 push 新的代碼後，自動觸發 Jenkins 打包項目代碼，並打包 docker 鏡像而後建立容器運行。