第一章 Vuepress 项目自动化部署

前置准备要求

安装 Jenkins
Memory 内存 4G以上，CPU 大于或等于2核

安装 docker

bash

# 卸载旧版本- master节点 和 worker节点都要执行
$ sudo yum remove -y docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-selinux \
docker-engine-selinux \
docker-engine

# 设置 yum repository - master 节点和 worker 节点执行
$ sudo yum install -y yum-utils \
device-mapper-persistent-data \
lvm2
sudo yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo

# 安装并启动 docker
$ sudo yum install -y docker-ce-19.03.8 docker-ce-cli-19.03.8 containerd.io
$ sudo systemctl enable docker && systemctl start docker

# 查看 docker 版本
$ docker version


 --------------------------------- 输出以下信息, 代表安装成功-----------------------------------
  # 版本最好一定要对应上安装k8s不懂版本需求
  Client: Docker Engine - Community
   Version:           19.03.8  
   API version:       1.40
   Go version:        go1.12.17
   Git commit:        afacb8b
   Built:             Wed Mar 11 01:27:04 2020
   OS/Arch:           linux/amd64
   Experimental:      false
  
  # 版本最好一定要对应上安装k8s不懂版本需求
  Server: Docker Engine - Community
   Engine:
    Version:          19.03.8 
    API version:      1.40 (minimum version 1.12)
    Go version:       go1.12.17
    Git commit:       afacb8b
    Built:            Wed Mar 11 01:25:42 2020
    OS/Arch:          linux/amd64
    Experimental:     false
   containerd:
    Version:          1.2.13
    GitCommit:        7ad184331fa3e55e52b890ea95e65ba581ae3429
   runc:
    Version:          1.0.0-rc10
    GitCommit:        dc9208a3303feef5b3839f4323d9beb36df0a9dd
   docker-init:
    Version:          0.18.0
    GitCommit:        fec3683
  -------------------------------------------------------------------------------------------
  
  # 1. registry-mirrors 添加镜像仓库为：aliyun 镜像仓库
  # 2. 修改docker Cgroup Driver为systemd 
  $ vim /etc/docker/daemon.json
  ----------------------------- 添加以下内容 --------------------------------------------------
  {
    "registry-mirrors": ["https://m0p90m3l.mirror.aliyuncs.com"],
    "exec-opts": ["native.cgroupdriver=systemd"]
  }
  ---------------------------------------------------------------------------------------------

  # 加载系统配置
  $ systemctl daemon-reload
  
  # 重启 docker 服务
  $ systemctl restart docker
  
  # 查看 systmed 是否生效
  $ docker info

  --------------------------------- 输出以下信息-----------------------------------------------
  Client:
   Debug Mode: false
  
  Server:
   Containers: 28
    Running: 12
    Paused: 0
    Stopped: 16
   Images: 24
   Server Version: 19.03.11
   Storage Driver: overlay2
    Backing Filesystem: xfs
    Supports d_type: true
    Native Overlay Diff: true
   Logging Driver: json-file
   Cgroup Driver: systemd  # 代表修改成功
   ......
  -------------------------------------------------------------------------------------------

安装 docker-compose

bash

# 基于 linux 中安装版本为 1.26.0
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.26.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 添加写入权限
$ chmod +x /usr/local/bin/docker-compose

# 验证是否安装成功
$ docker-compose version

# 输出如下信息，表示安装成功
-----------------------------------------------
docker-compose version 1.26.0, build 0a186604
-----------------------------------------------

创建 docker-compose.yaml, 用于创建 jenkins 容器

yaml

version: '3.5'
services:
  jenkins:
    restart: always
    image: jenkins/jenkins:lts
    container_name: jenkins
    environment:
      TZ: Asia/Shanghai
    ports:
      - 80:8080
      - 50000:50000
    # 挂载数据
    volumes:
      - ./data:/var/jenkins_home

bash

# 在该docker-compose.yaml 文件目录下，启动创建容器
$ docker-compose up -d && docker-compose logs -f

Jenkins 安装构建工具

安装 NodeJS 插件

全局工具配置: 配置 NodeJS 构建工具
- NodeJS 别名：NPM_HOME
- 勾选自动安装
- 安装淘宝镜像 Global npm packages to install：cnpm --registry=https://registry.npm.taobao.org

1. Jenkins 创建 Vuepress 项目任务

任务名称: 项目名
选择：构建一个自由风格的软件项目

2. 源码管理 Git

URL: Git 项目代码地址
账号和密码：Git 账号和密码

3. 构建触发器

请求参数 :
- Request parameter : runDevOps
- Value filter : GitlabPush
- Token : 项目任务名称

下载安装 Generic Webhook Trigger 插件

配置 GitLab Integrations, 提交代码，触发 jenkins 构建任务

URL: http://JENKINS_URL/generic-webhook-trigger/invoke?token=项目任务名称&runDevOps=GitlabPush

4. 构建环境

选择构建工具 NodeJS Installation： NPM_HOME
自定义NodeJS 配置文件 npmrc file : Npm-Config
缓存位置 Cache location：默认

5. 构建：通过执行shell脚本方式

shell

# !/bin/bash

TAR_GZ_ORIGIN_FILE=docs/.vuepress/dist.tar.gz

echo $PATH

# 确保抛出异常的错误
set -e 

echo "第一步：下载项目相关依赖包"

npm install 

echo "第二步： 执行构建 Build"
 
npm run docs:build

echo "第四步： 进行压缩"
 
if [ -d ${TAR_GZ_ORIGIN_FILE} ];
    echo "删除已有的旧文件包压缩包 ${TAR_GZ_ORIGIN_FILE}"
	then rm -rf ${TAR_GZ_ORIGIN_FILE}
fi

cd docs/.vuepress/

tar -zcvf dist.tar.gz dist

6. 构建后操作

1. 发送文件到远程服务器，执行 shell

SHH Server Name: 远程服务器名称(IP)
Source files: 构建后工作区的打包dist文件压缩包
Remove prefix： 删除前缀工作区的打包dist文件压缩包文件目录，只留下dist文件压缩包
Exec command： 执行远程 shell 命令
Exec timeout (ms)： 如果打包时间过久，可以将超时时间设置久一点

public_over_ssh 发送文件插件下载

public_over_ssh 系统配置设置
- Name : 别名
- HostName: 服务器IP
- Username: 服务器账号
- Port：服务器端口
- Proxy password: 服务器密码

2. 邮件通知

email_extension 邮件插件下载

邮件通知配置

填入通知内容：

html

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>    
</head>    
    
<body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4"    
    offset="0">    
    <table width="95%" cellpadding="0" cellspacing="0"  style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">    
        <tr>    
            本邮件由系统自动发出，无需回复！<br/>            
            各位同事，大家好，以下为${PROJECT_NAME }项目构建信息</br> 
            <td><font color="#CC0000">构建结果 - ${BUILD_STATUS}</font></td>   
        </tr>    
        <tr>    
            <td><br />    
            <b><font color="#0B610B">构建信息</font></b>    
            <hr size="2" width="100%" align="center" /></td>    
        </tr>    
        <tr>    
            <td>    
                <ul>    
                    <li>项目名称 ： ${PROJECT_NAME}</li>    
                    <li>构建编号 ： 第${BUILD_NUMBER}次构建</li>    
                    <li>触发原因： ${CAUSE}</li>    
                    <li>构建状态： ${BUILD_STATUS}</li>    
                    <li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a></li>    
                    <li>构建  Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li>    
                    <li>工作目录 ： <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>    
                    <li>项目  Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li>    
                </ul>    

                <h4><font color="#0B610B">失败用例</font></h4>
                <hr size="2" width="100%" />
                $FAILED_TESTS<br/>

                <h4><font color="#0B610B">最近提交(#$SVN_REVISION)</font></h4>
                <hr size="2" width="100%" />
                <ul>
                    ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"}
                </ul>
                详细提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br/>
            </td>    
        </tr>    
    </table>    
</body>    
</html>

前置准备要求 ​

Jenkins 安装构建工具 ​

1. Jenkins 创建 Vuepress 项目任务 ​

2. 源码管理 Git ​

3. 构建触发器 ​

4. 构建环境 ​

5. 构建：通过执行shell脚本方式 ​

6. 构建后操作 ​

1. 发送文件到远程服务器，执行 shell ​

2. 邮件通知 ​

填入通知内容： ​

7. 演示 ​

前置准备要求

Jenkins 安装构建工具

1. Jenkins 创建 Vuepress 项目任务

2. 源码管理 Git

3. 构建触发器

4. 构建环境

5. 构建：通过执行shell脚本方式

6. 构建后操作

1. 发送文件到远程服务器，执行 shell

2. 邮件通知

填入通知内容：

7. 演示