基于 Docker 和 GitLab 的前端自动化部署实践笔记

基于 Docker 和 GitLab 的前端自动化部署

实践笔记

随着接触的项目越来越多，在部署测试流程上重复耗时工作也越来越多，所以对前端工作的CI/CD实现愈发迫在眉睫。

前端开发由于三大框架的崛起，基于 webpack 的自动化构建被广大开发者所熟识。而一整套 DevOps 工作流包括 Auto Build、Auto Test、Auto Code Quality、Auto Deploy 等，这里主要是解决 Auto Deploy 部分。

主要实现思路是，指定部署分支，比如 master，每次有代码/Tag被推送到 master，会触发 git hook 或者基于 GitLab 的 gitlab-runner ，然后执行拉取代码、安装依赖并打包的脚本，然后将打包后的文件拷贝至目标服务器的流程。前端的方便之处在于打包文件只需要备份并替换就可以了，无需重启服务等。

1. 环境配置

1.1 前言

现在假设有两台centos7服务器，一台用作代码托管，一台用作测试。每次有代码被推送到master上，就自动将代码打包并部署到测试服务器。

1.2 安装 Git

在代码托管服务器上安装git。并生成秘钥保存到gitlab上，用于免密拉取代码。

yum -y install git

# 查看有无ssh文件
ls -al ~/.ssh

# 如果total为0 生成秘钥和公钥
ssh-keygen -t rsa -C "注释"

# 将公钥复制到gitlab账号的ssh key中
cat ~/.ssh/id_rsa.pub

# 配置当前机器用户信息
git config --global user.name "用户名"
git config --global user.email "用户邮箱"

1.3 安装 Gitlab 和 git-runner

代码托管服务器安装 GitLab 参见《Linux 环境安装》。以下是docker-compose安装方式。

# 拉取gitlab镜像
docker pull gitlab/gitlab-ce

# 新建文件夹
mkdir /home/docker
# 新建配置文件
vim ./docker-compose.yml

version: '3'
services:
  gitlab:
    image: gitlab/gitlab-ce # 这里使用的之前pull的镜像
    restart: always
    hostname: '127.0.0.1'
    container_name: gitlab # 注意名字不能重复
    ports:
      - '8020:443'
      - '8021:80'
      - '222:22'
      - '25:25'
    volumes:
      - /home/docker/gitlab/config:/etc/gitlab
      - /home/docker/gitlab/logs:/var/log/gitlab
      - /home/docker/gitlab/data:/var/opt/gitlab2
  gitlab-runner:
    image: gitlab/gitlab-runner
    restart: always
    hostname: '127.0.0.1'
    container_name: gitlab-runner
    extra_hosts:
      - git.imlcs.top:127.0.0.1
    depends_on:
      - gitlab
    volumes:
      - /home/docker/gitlab-runner:/etc/gitlab-runner
      - /var/run/docker.sock:/var/run/docker.sock

# 创建容器并启动
docker-compose up -d

# 修改配置之后重启
docker restart gitlab

安装完成后需要注册runner

# 进入gitlab
 docker exec -it gitlab-runner bash
 
 # 注册runner
 gitlab-runner register
 
# Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/):
https://git.example.com
# Please enter the gitlab-ci token for this runner:
# 这个去https://git.example.com/root/ci-demo/-/settings/ci_cd的Runners中查看
dnqLAVf52xpz6HfLxwmc
# Please enter the gitlab-ci description for this runner:
[127.0.0.1]: test080701
# Please enter the gitlab-ci tags for this runner (comma separated):
# 作为gitlab-ci.yml的标识
test
# Registering runner... succeeded                     runner=dnqLAVf5
# Please enter the executor: kubernetes, docker, docker-ssh, parallels, shell, ssh, virtualbox, docker+machine, custom, docker-ssh+machine:
docker
# Please enter the default Docker image (e.g. ruby:2.6):
docker:stable
# Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded! 

注册完成之后，可以在gitlab的Runners中看到刚刚注册的runner：

同时在/home/docker/gitlab-runner下可以看到一个config.toml文件：

concurrent = 1
check_interval = 0

[session_server]
  session_timeout = 1800

[[runners]]
  name = "test080701"
  url = "https://git.example.com"
  token = "Rca9DJgx78NJkPzqxQUy"
  executor = "docker"
  [runners.custom_build_dir]
  [runners.docker]
    tls_verify = false
    image = "docker:stable"
    rivileged = false
    disable_entrypoint_overwrite = false
    oom_kill_disable = false
    disable_cache = false
    volumes = ["/var/run/docker.sock:/var/run/docker.sock","/cache"]
    shm_size = 0
  [runners.cache]
    [runners.cache.s3]
    [runners.cache.gcs]
  [runners.custom]
    run_exec = ""

如果直接配置好这个文件，gitlab-runner运行时会自动加载这个文件。
接下来就需要配置 gitlab-ci.yml，语法可以参考这篇文章。

为了方便在代码托管服务器登录部署服务器，这里使用部署服务器的root用户。

1.4 编写脚本和.gitlab-ci.yml

在项目根目录下编写脚本。

首先配置gitlab-ci.yml在项目根目录下，注意tags，这里是对应之前配置的runner的tags，只有加了这个，runner才会执行这个配置文件的script。

vim gitlab-ci.yml

stages:
    - dev
services:
    - docker:dind
before_script:
    - apt-get update -qq && apt-get install -y -qq sshpass
deploy_dev:
    image: node:10.15.0 # 这里注意切合你本地开发版本
    stage: dev
    cache:
    paths:
        - code/node_modules/
    script:
        - chmod +x ci/start.sh
        - sh ci/start.sh
    only:
        - master
    tags:
        - dev

# 新建ci文件夹
mkdir ci && cd ci
# 新建部署脚本
vim start.sh


#!/bin/bash
# 本地服务器部署文件绝对路径
LOCAL_PATH=`pwd`
echo "shell start! $LOCAL_PATH"
cd ${LOCAL_PATH}/code # 这里根据自身项目结构确定
# 1.安装依赖
npm install --unsafe -perm
# 2.打包
npm run build --unsafe -perm
echo "build done!"
# 4.远程部署目录备份并部署新文件
cd ${LOCAL_PATH}/code/pm
sshpass -p ${DEPLOY_LOCAL_PASS} ssh -o stricthostkeychecking=no ${DEPLOY_LOCAL_USR}@${DEPLOY_LOCAL_SERVER} 'bash -s' < ${LOCAL_PATH}/ci/backup.sh ${DEPLOY_LOCAL_PATH}
echo "execute remote done!"
sshpass -p ${DEPLOY_LOCAL_PASS} scp -o stricthostkeychecking=no -r ./* ${DEPLOY_LOCAL_USR}@${DEPLOY_LOCAL_SERVER}:${DEPLOY_LOCAL_PATH}
echo "scp done!"

# 新建远程执行脚本
vim backup.sh


#!/bin/bash
echo "logged in success!"
cd $1
FILE_NAME=`mktemp -u pm.dev.XXXXX`
DATE=`date +"%Y%m%d%H%M%S"`
BACKUP="backup"
tar -zcvf ${FILE_NAME}.${DATE}.tar.gz ./* --exclude="$BACKUP"
# 移动备份文件到备份文件夹
if [ ! -d "$BACKUP" ]; then
mkdir "$BACKUP"
fi
mv ${FILE_NAME}.${DATE}.tar.gz "$BACKUP"
# 删除远程服务器部署目录中除backup外所有文件
ls|egrep -v "$BACKUP"|xargs rm -rf
echo "remote shell done at `pwd`! `ls`"

注意上面定义的常量（密码、服务器等）是抽离到gitlab的：

1.6 提交代码

push代码带master，查看CI/CD中如果发现passed表示已经成功调用。

The End
2019-8-14 11:20:57
参考文章《GitLab Build and Deploy to a Server via SSH》