gitlab-runner使用pipeline自动构建发布vue项目

写在前面

本来已经有完整的jenkins部署方案运行多年，闲来无事整了个gitlab pipeline下的node js环境，本文就是介绍如何使用gitlab自动发布vue项目（node生态下的项目都可以）

一、实现思路

• 安装部署gitlab、gitlab-runner，参照gitlab-runner安装配置
• 在gitlab创建项目，并在gitlab-runner中启用此项目
• 针对node js项目编写通用部署pipeline
• 增加作业产物缓存
• 在项目中加入.gitlab-ci.yml，定义作业
• 在gitlab-runner中安装配置node js环境

二、在gitlab创建项目，并在gitlab-runner中启用此项目

• 创建项目我就不说了
• gitlab-runner中启用此项目
  

三、针对node js项目编写通用部署pipeline

这一步是为了将一些公共部署过程抽离出来，后面可以用于所有相同类型的项目，具体思想请参考使用一个仓库集中控制gitlab-runner部署过程

强烈建议先观看公共思想抽离的文章后再来继续看下面的内容

• 增加通用.gitlab-ci-vue-run.yml

variables:
  SHELL_PATH: /home/gitlab-runner/static/ci-vue/shell
  # 这个参数是使用了shell脚本，可以看到`gitlab-deployment`项目的`pipeline`会将文件同步到此处

remote_resource:
  stage: remote_resource
  script:
    - id
    - chmod a+x $SHELL_PATH/remote-resource.sh $SHELL_PATH/source-init.sh
    - ssh $RUN_SERVER_DOMAIN -o StrictHostKeyChecking=no 'bash -s' < $SHELL_PATH/source-init.sh $PROJECT_NAME $REMOTE_RESOURCE
    - $SHELL_PATH/remote-resource.sh $PROJECT_NAME $RESOURCE $RUN_SERVER_DOMAIN $SERVER_DOMAIN_PORT $REMOTE_RESOURCE

• 这段脚本主要是remote_resource,有以下作用

  • 在远程服务器上检测并创建必要的文件夹
  • 将本地编译后的资源(dist)发送到远程服务器指定的文件夹中
  • 在此可以增加env.sh，帮助远程服务器安装程序，如nginx等（不推荐，容易改变远程服务器的环境，这个是危险操作）

• source-init.sh内容

#!/usr/bin/env bash
# !/bin/sh
start=0
end=1
echo " 开始初始化运行服务器资源，共有 ${end} 步"
# 第一步
start=$((start+1))
echo ${start}"/"${end}" =>>>>>>> 资源检测/创建"
# 要构建的项目名称
project_name=$1
# 远程存放资源的位置
remote_resource=$2
# /root/source检测
if  test -d ${remote_resource};then
     echo ${remote_resource}" 资源目录已存在"
else
   mkdir ${remote_resource}
fi
# 运行环境的文件存放位置
source=${remote_resource}/${project_name}
if  test -d ${source};then
     echo ${source}" 运行目录已存在"
else
   mkdir ${source}
fi

• remote-resource.sh内容

#!/usr/bin/env bash
# !/bin/sh
start=0
end=1
echo " 开始从当前环境拷贝资源至运行服务器，共有 ${end} 步"

# 第一步
start=$((start+1))
echo ${start}"/"${end}" =>>>>>>> 开始进行文件传输"

# 要构建的项目名称
project_name=$1
# 要转移的资源，当前路径为项目根目录
resource=$2
# 运行服务器位置  root@172.16.10.210
server_domain=$3
# 运行服务器ssh端口
server_domain_port=$4
# 远程存放资源的位置
remote_resource=$5
echo "root:"
ls -lh
mv ${resource} ${project_name}
echo "文件传输参数1111: " ${project_name} " => "${server_domain} ${server_domain_port}" => "${remote_resource}
scp -C -o StrictHostKeyChecking=no -r -P ${server_domain_port} ${project_name} ${server_domain}:${remote_resource}
echo ${start}"/"${end}" =>>>>>>> 文件传输完成"
# 执行顺序为2 这个脚本需要配置第四个参数所对应的服务器ssh  pubkey

四、增加作业产物缓存

在使用一个仓库集中控制gitlab-runner部署过程的项目中有一个.gitlab-ci-common.yml，里面的内容改为（实际上就是增加cache.paths）：

variables:
  COMMIT_TIME: $(git show -s --format=%ct $CI_COMMIT_SHA)

cache:
  key: maven-ci-cache
  paths:
    - .m2/repository
    - target/*.jar
    - build/libs/*.jar
    - dist

五、在项目中加入.gitlab-ci.yml，定义作业

在项目根目录创建一个名为.gitlab-ci.yml的文件，以下是文件内容

#run环境 远程主机
#run方式 静态文件运行
variables:
  PROJECT_NAME: khl-web #项目名
  RESOURCE: dist #转移的资源，当前路径为项目根目录
  #=====远程服务器信息
  RUN_SERVER_DOMAIN: root@172.0.1.2 #运行服务器-地址
  SERVER_DOMAIN_PORT: 22 #运行服务器ssh端口
  REMOTE_RESOURCE: /root/data/nginx #运行服务器-要运行的程序存放的位置

include:
  - project: deployment/gitlab-deployment
    ref: master
    file: 
      - /gitlab-runner/docker/static/ci-common/.gitlab-ci-common.yml
      - /gitlab-runner/docker/static/ci-vue/.gitlab-ci-vue-run.yml

before_script:
  - source ~/.bashrc # 不能去掉，要确保当前用户下的`bash`配置生效（加载`node`环境）
#  - export NODE_HOME= #编译服务器-所需的node js环境

vue_compile:
  stage: vue_compile
  script:
    - npm install
    - npm run build
    - echo "target:"`ls`

stages:
  - vue_compile
  - remote_resource

六、在gitlab-runner中安装配置node js环境

这一步本来不打算写的，实在是太过简单，但是考虑到gitlab-runner环境下，有权限问题，所以还是说一下

注意，我的gitlab-runner系统是Ubuntu，其他系统按需更改命令即可

安装node js最少有4种办法,我只介绍能完美在gitlab-runner下运行的一种方式 nvm-github

• 进入gitlab-runner容器
• 切换用户 su gitlab-runner
• 创建程序文件夹 mkdir /home/gitlab-runner/nvm
• 创建当前用户的 bash设置echo "" > /home/gitlab-runner/.bashrc
• 设置环境变量 export NVM_DIR="/home/gitlab-runner/nvm"
• 下载并运行安装 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  • 要是卡住下载不了，先wget https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh 再用bash install.sh
  • 使bash设置生效 source /home/gitlab-runner/.bashrc（脚本运行完成会向当前用户的bash配置文件写入环境变量，我们需要手动source）

到这里全部完成了，每次提交代码可以自动触发编译，并发布到远程服务器上，后面有node环境的项目，只需要把这个项目根目录的.gitlab-ci.yml文件复制一份，改改参数就可以上车了

可以查看所有阶段，每个阶段可以点进去看过程的详细日志输出