基于 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》