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 镜像而后建立容器运行。