前端自动化部署：借助Gitlab CI/CD实现
🛫 前端自动化部署：借助Gitlab CI/CD实现
🌏 概论
传统的前端部署往往都要经历：本地代码更新 => 本地打包项目 => 清空服务器相应目录 => 上传项目包至相应目录几个阶段，这些都是机械重复的步骤。对于这一过程我们往往可以通过CI/CD方法进行优化。所谓CI/CD，即持续集成/持续部署，以上我们所说的步骤便可以看作是持续部署的一种形态，其更详细的解释大家可以自行了解。
Jenkins、Travis CI这些都是可以完成持续部署的工具。除此之外，Gitlab CI/CD也能很好的完成这一需求。下面就来详细介绍下。
🌏 核心工具
GitLab Runner
GitLab Runner是配合GitLab CI/CD完成工作的核心程序，出于性能考虑，GitLab Runner应该与Gitlab部署在不同的服务器上（Gitlab在单独的仓库服务器上，GitLab Runner在部署web应用的服务器上）。GitLab Runner在与GitLab关联后，可以在服务器上完成诸如项目拉取、文件打包、资源复制等各种命令操作。
Git
web服务器上需要安装Git来进行远程仓库的获取工作。
Node
用于在web服务器上完成打包工作。
NPM or Yarn or pnpm
用于在web服务器上完成依赖下载等工作（用yarn,pnpm亦可）。
🌏 流程
这里我自己用的是centOS环境：
1. 在web服务器上安装所需工具
（1）安装Node
# 下载node包
wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz
# 解压Node包
tar -xf node-v16.13.0-linux-x64.tar.xz
# 在配置文件（位置多在/etc/profile）末尾添加：
export PATH=$PATH:/root/node-v16.13.0-linux-x64/bin
# 刷新shell环境：
source /etc/profile
# 查看版本（输出版本号则安装成功）：
node -v
#后续安装操作，都可通过-v或者--version来查看是否成功
npm已内置在node中，如要使用yarn或，则可通过npm进行全局安装，命令与我们本地环境下的使用命令是一样的：
npm i yarn -g
#or
npm i pnpm -g
（2）安装Git
# 利用yum安装git
yum -y install git
# 查看git版本
git --version
（3）安装Gitlab Runner
# 安装程序
wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
# 等待下载完成后分配权限
chmod +x /usr/local/bin/gitlab-runner
# 创建runner用户
useradd --comment 'test' --create-home gitlab-runner --shell /bin/bash
# 安装程序
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
# 启动程序
gitlab-runner start
# 安装完成后可使用gitlab-runner --version查看是否成功
2. 配置Runner及CI/CD
基本的安装操作完成后，就是最核心的阶段：Runner与CI/CD的配置。
（1）配置Gitlab Runner
首先打开待添加自动部署功能的gitlab仓库，在其中设置 > CI/CD > Runner中找到runner配置信息备用：
在web服务器中配置runner：
gitlab-runner register
>> Enter the GitLab instance URL (for example, https://gitlab.com/):
# 输入刚才获取到的gitlab仓库地址
>> Enter the registration token:
# 输入刚才获取到的token
>> Enter a description for the runner:
# 自定runner描述
>> Enter tags for the runner (comma-separated):
# 自定runner标签
>> Enter an executor: docker-ssh, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, virtualbox, kubernetes, custom:
# 选择执行器，此处我们输入shell
完整示例：
（2）配置.gitlab-ci.yml
.gitlab-ci.yml文件是流水线执行的流程文件，Runner会据此完成规定的一系列流程。
我们在项目根目录中创建.gitlab-ci.yml文件，然后在其中编写内容：
# 阶段
stages:
- install
- build
- deploy
cache:
paths:
- node_modules/
# 安装依赖
install:
stage: install
# 此处的tags必须填入之前注册时自定的tag
tags:
- deploy
# 规定仅在package.json提交时才触发此阶段
only:
changes:
- package.json
# 执行脚本
script:
yarn
# 打包项目
build:
stage: build
tags:
- deploy
script:
- yarn build
# 将此阶段产物传递至下一阶段
artifacts:
paths:
- dist/
# 部署项目
deploy:
stage: deploy
tags:
- deploy
script:
# 清空网站根目录，目录请根据服务器实际情况填写
- rm -rf /www/wwwroot/stjerne/salary/*
# 复制打包后的文件至网站根目录，目录请根据服务器实际情况填写
- cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/stjerne/salary/
保存并推送至gitlab后即可自动开始构建部署。
构建中可在gitlab CI/CD面板查看构建进程：
待流水线JOB完成后可前往页面查看🛫🛫🛫🛫🛫
