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

實踐筆記

隨著接觸的項目越來越多，在部署測試流程上重復耗時工作也越來越多，所以對前端工作的CI/CD實現愈發(fā)迫在眉睫。

前端開發(fā)由于三大框架的崛起，基于 webpack 的自動化構建被廣大開發(fā)者所熟識。而一整套 DevOps 工作流包括 Auto Build、Auto Test、Auto Code Quality、Auto Deploy 等，這里主要是解決 Auto Deploy 部分。

主要實現思路是，指定部署分支，比如 master，每次有代碼/Tag被推送到 master，會觸發(fā) git hook 或者基于 GitLab 的 gitlab-runner ，然后執(zhí)行拉取代碼、安裝依賴并打包的腳本，然后將打包后的文件拷貝至目標服務器的流程。前端的方便之處在于打包文件只需要備份并替換就可以了，無需重啟服務等。

1. 環(huán)境配置

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 環(huán)境安裝》。以下是docker-compose安裝方式。

# 拉取gitlab鏡像 docker pull gitlab/gitlab-ce# 新建文件夾 mkdir /home/docker # 新建配置文件 vim ./docker-compose.ymlversion: '3' services:gitlab:image: gitlab/gitlab-ce # 這里使用的之前pull的鏡像restart: alwayshostname: '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/gitlab2gitlab-runner:image: gitlab/gitlab-runnerrestart: alwayshostname: '127.0.0.1'container_name: gitlab-runnerextra_hosts:- git.imlcs.top:127.0.0.1depends_on:- gitlabvolumes:- /home/docker/gitlab-runner:/etc/gitlab-runner- /var/run/docker.sock:/var/run/docker.sock# 創(chuàng)建容器并啟動 docker-compose up -d# 修改配置之后重啟 docker restart gitlab

安裝完成后需要注冊runner

# 進入gitlabdocker exec -it gitlab-runner bash# 注冊runnergitlab-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 = falseimage = "docker:stable"rivileged = falsedisable_entrypoint_overwrite = falseoom_kill_disable = falsedisable_cache = falsevolumes = ["/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才會執(zhí)行這個配置文件的script。

vim gitlab-ci.ymlstages:- dev services:- docker:dind before_script:- apt-get update -qq && apt-get install -y -qq sshpass deploy_dev:image: node:10.15.0 # 這里注意切合你本地開發(fā)版本stage: devcache:paths:- code/node_modules/script:- chmod +x ci/start.sh- sh ci/start.shonly:- mastertags:- 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!" # 新建遠程執(zhí)行腳本 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中如果發(fā)現passed表示已經成功調用。

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

轉載于:https://www.cnblogs.com/jehorn/p/11350796.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的基于 Docker 和 GitLab 的前端自动化部署实践笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。