gitlab+gitlab-runner实现前端项目自动化构建部署（CI/CD、Linux、Centos7）

GitLab CI/CD是一套基于GitLab的CI/CD（持续继承/持续交付/持续部署）系统，通过 .gitlab-ci.yml 在项目中配置 CI/CD 流程，系统可以自动地执行任务，完成 CI/CD 操作。（示例的服务器操作系统为Centos7）

一、准备工作

1、GitLab服务器

搭建GitLab服务器，具体从0到1搭建GitLab服务器可参考文章：Centos7搭建GitLab服务器

2、创建项目

在GitLab上创建一个项目。比如下图，我创建了个react-demo项目，示例的项目是一个antd pro项目。

二、部署gitlab-runner

 1、添加 gitlab-runner yum源

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

2、安装gitlab-runner

yum install gitlab-runner

 3、注册gitlab-runner

gitlab-runner register

gitlab实例URL和项目token怎么获取呢？

（1）进入你在GitLab上创建好的项目，找到并点击Settings->CI/CD->Runners->Expand

（2）点击Expand，展开Runners项，下图标注的地方即为runner注册时所需的URL和token

  4、查看gitlab-runner

注册成功后，我们就可以在CI/CD配置里看到刚注册好的runner。在此，我们还可以点击相关项进行查看或修改配置内容

三、触发自动化构建

1、编写.gitlab-ci.yml文件

在gitlab项目的根目录下创建.gitlab-ci.yml文件，编写部署脚本。以下配置仅供参考

# 定义stages（阶段）。比如build、test、deploy等，任务将按此顺序执行。按需求自定义即可
stages:
  - package

# 定义job（任务）
dev_package: # job名
  stage: package
  script: # 由runner执行的shell脚本
    - echo "=====start install====="
    - npm i
    - echo "=====start build====="
    - npm run build
    - echo "=====start deploy====="
    - scp -r ./dist /usr/share/nginx/html/ # 复制dist文件夹到nginx服务下
  only:
    - /^dev.*$/ # 正则表达式，只有dev开头的分支才会执行

2、触发流水线

把.gitlab-ci.yml文件推送到gitlab仓库，触发流水线

我们可以点击构建状态查看构建日志

构建成功后，打开项目部署地址，如下图，已成功部署，线上显示项目

 

【文章推荐】

1. GitLab CI/CD 自动化部署没有日志（流水线日志/部署日志/构建日志）-- This job does not have a trace.

2. gitlab自动构建（二次构建）报错--fatal: git fetch-pack: expected shallow list

3. Linux/Centos安装nodejs、npm--npm: command not found

4. Centos(Linux)升级git最新版本 

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。