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