GitLab CI/CD 自动化部署入门 ，手把手教你搭建 —— 从安装 Linux 到 GitLab 自动化部署（非常详细）

前言

对 IT 稍微重视的企业，都会有自己的一套代码管理、测试、上线的流程和规范，一般都由团队的 Leader 和运维的小伙伴来搭建部署。而「自动化部署」，一般是整个流程最后一环，把项目打包，并部署到测试环境或者生成环境中。

身为前端渣渣，对这方面了解比较有限，只见过两种组合「Gitea + jekenis」以及「GitLab + GitLab CI/CD」。好奇心使然决定自己动手试试，以下是这两三天踩坑的成果。也算是入门了。

这篇文章主要介绍「GitLab + GitLab CI/CD」方案的实现流程, 为了照顾没接触过 Linux 的朋友，会有些关于 Linux 的基本使用内容，熟悉 Linux 的朋友可以「点击跳转到这里开始看（iphone掘金客户端跳转不了，懵逼）」

注意：文章中所有的服务器IP，需要更换成自己的

Linux 系统服务器

现实开发中，服务器基本都是Linux，所以没有Windows的，本人服务器系统版本为：Centos 7 64位 。

服务器选择：

• 本地虚拟机 「推荐使用， 自己装系统，比较繁琐，只要电脑内存足够，可根据需要调整内存，穷人必备」

• 云主机 「GitLab 至少要 3G 以上内存, 很占用内存，emmmm~ 不便宜」

• 自家的服务器 「大佬带带我」

不会 Linux 的小伙伴，不要怕，我也是半桶水，推荐 B 站找些 linux 的入门视频看一下。把常用的一些命令，特别是文件编辑保存记住。忘记了就查，用着用着就熟悉了。

本地虚拟机

安装本地虚拟机，略，可以去网上找一下教程，很多。

本地虚拟机系统初始化配置（很重要）

设置网卡

本地虚拟机, 默认是访问不了网络的,所以需要进行配置。网络适配器选择NAT模式，编辑网卡配置文件ONBOOT=yes。

# 编辑
vi /etc/sysconfig/network-scripts/ifcfg-ens33

接着把，ONBOOT=no 改成 ONBOOT=yes ，然后保存，接着运行下面的命令

# 重启网络
systemctl restart network.service

# ping 一下，能通就证明可以访问网络了。
ping www.baidu.com

一些必须的配置和软件（命令依次执行）

• net-tools: ifconfig 查看 ip 时需要
• vim: vi 的升级版 vim，文件编辑时候需要
• wget: 下载安装包时需要

# 启用 ssh , 使用 Xshell 时需要
systemctl start sshd.service
 # 安装相关依赖
yum -y install net-tools vim wget
 # 系统语言改成中文(非必须)
# 编辑，修改 LANG="en_US.UTF-8" 为 LANG="zh_CN.UTF-8"
vim /etc/locale.conf
 # 重启系统，生效
reboot

本地虚拟机执行向命令 ifconfig 来查看服务器的IP

云主机

控制台，一般都会显示 IP ，也会有对应的 SSH 连接教程。

XShell 连接服务器

建议使用 XShell 之类的工具来管理和操作服务器。「下载安装包」

连接服务器

具体操作参考下图：

前端项目自动化部署需要的环境依赖

• Node 安装项目依赖、打包都需要
• Nginx web 项目部署必须「正向代理、方向代理、负载均衡等等」、 GitLab 也会用到 Nginx(默认自动安装)
• Git 自动化部署，需要拉取代码。
• GitLab 没啥好说
• GitLab-Runner 配合 GitLab CI/CD 使用的应用程序

安装 Node

下载和解压

# 下载安装包，需要哪个版本，在url中修改就可以了
wget https://nodejs.org/dist/v12.9.0/node-v12.9.0-linux-x64.tar.xz 

# 解压
tar xf node-v12.9.0-linux-x64.tar.xz

# 复制
cp -rf /root/node-v12.9.0-linux-x64 /usr/local/node

编辑配置文件

# 打开编辑配置文件
vim /etc/profile

在文件的最后，加上下面的内容

export PATH=$PATH:/usr/local/node

重载系统配置文件

source /etc/profile

测试 node 环境变量是否生效

运行下面的代码，看到版本号，就说明环境变量生效了。

node -v 

安装 Git

Gitlab自动化部署需要拉取代码，需要用到 Git。尽量安装Git 2.x.x版本，不然新版的 GitLab 自动化部署无法拉取代码。

本人安装的是 Git 2.24.4 版本，其他版本请自行尝试

查看依赖

yum list git224

如果看到一下的安装包，证明可以通过 yum 安装

如果没有，可以使用 IUS 仓库（yum源），执行完下面的命令，应该就能安装了。

yum -y install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

安装 Git

yum -y install git224

测试是否安装成功

# 查看版本号
git --version 

安装 Nginx

手动安装（方式一，个人使用的方式）

版本：nginx 1.18.0

安装相关依赖

• zlib 开启 gzip 需要
• openssl 开启 SSL 需要
• pcre rewrite模块需要
• gcc-c++ C/C++ 编译器

yum -y install gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel

下载和解压 nginx 压缩包

# 下载压缩包
wget https://nginx.org/download/nginx-1.18.0.tar.gz

# 解压
tar -zxvf nginx-1.18.0.tar.gz

编译安装

分别执行下面的命令

cd ./nginx-1.18.0

./configure

make

make install

配置环境变量

查看安装路径

运行下方的命令查看安装路径，不出意外的话，应该是/usr/local/nginx

whereis nginx

配置

# 编辑
vim /etc/profile

# 文件最后加上这两句，然后保存并退出（:wq）
export NGINX_HOME=/usr/local/nginx
export PATH=$NGINX_HOME/sbin:$PATH

# 重载配置文件（运行才能生效）
source /etc/profile

测试环境变量是否生效

# 查看版本号
nginx -v 

开放 80 端口

# 开放 80 端口
firewall-cmd --permanent --zone=public --add-port=80/tcp

# 重载防火墙
firewall-cmd --reload

启动 nginx

# 启动
nginx

默认情况下nginx已经配置好了，80端口 可以访问 nginx 的欢迎页。浏览器直接访问服务器的 IP 就可以了。Nginx 1.18.0 和 1.20.0 版本的欢迎页不同。能显示就证明 Nginx 正常运行了。

使用 Yum 安装 Nginx

注意：yum 安装的版本 Nginx 是 1.20 版本

查看是否存在安装包

yum list nginx 

如果没有对应的安装包，则运行下面代码添加 yum源

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

安装

yum install -y nginx

启动 nginx

systemctl start nginx.service

测试 Nginx 是否安装成功

同上

nginx 常用的命令

# 启动 
nginx 

# 停止
nginx stop

# 安全退出
nginx -s quit 

# 重新加载配置文件
nginx -s reload  

# 查看nginx进程
ps aux|grep nginx  

防火墙配置（注意）

页面访问不了的时候，很可能是防火墙的原因，有两种方式可以解决， 开发端口者直接关闭防火墙，二选一（本地环境怎么折腾都无所谓），后面GitLab和部署的项目也同样有防火墙的问题，解决方式一样的。

注意：阿里云的话，需要到「控制台」——>「防火墙」———>「添加规则」，打开对应的端口。（没记错的话，80端口默认是打开的）

开放 80 端口

# 设置
firewall-cmd --permanent --zone=public --add-port=80/tcp

# 重载
firewall-cmd --reload

关闭防火墙

根据自己需要，选择关闭防火墙的方式。

重启后防火墙恢复原样

service iptables stop

永久关闭

chkconfig iptables off

中场休息一会，到这里也就做好了前期准备而已。下面才是主角

安装 GitLab

版本：gitlab 14.3.0

# 安装 GitLab，需要的时间比较长
yum -y install https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-14.3.0-ce.0.el7.x86_64.rpm

#编辑配置文件
vim /etc/gitlab/gitlab.rb

找到，external_url, 修改 gitlab 访问地址。可以是域名（请确保确定域名正确解析了），服务器IP，也可以加上端口。设置端口时，请确保自己开放了对应的端口。可以参考上面提到防火墙问题

# 192.168.26.139 对应的就是服务器的IP，端口为 1874 

external_url 'http://192.168.26.139:1874' 

虚拟机没有设置静态ip的话，重启IP可能会变，最好还是设置一下，参考：「虚拟机网络NAT模式配置静态IP – 陆小呆 – 博客园」

#重载配置文件，需要的时间比较长
gitlab-ctl reconfigure

# 开放 1874 端口
firewall-cmd --permanent --zone=public --add-port=1874/tcp

# 重载防火墙
firewall-cmd --reload

gitlab 常用命令

# 启动gitlab服务

sudo gitlab-ctl start

 

# gitlab服务停止

sudo gitlab-ctl stop

 

# 重启gitlab服务

sudo gitlab-ctl restart

测试 GitLab 是否成功

浏览器里打开，GitLab，第一次打开首页，一般都会提示你修改密码，如果没有，可以通过命令行的方式修改，参考这篇文章 ———— 「GitLab第一打开没有修改密码提示」

测试仓库项目是否可以正常提交和拉取

这个步骤就不演示了，用过 GitHub 的应该基本都清楚，创建个新项目 -> 通过http仓库链接克隆项目 -> 修改项目的内容 -> 提交 ->推送。

我们的重点的是 CI/CD，至于 SSL、邮箱等等，GitLab 一些其他的配置和功能我就不赘述了，大家可以网上了解下。

题外话：我安装 GitLab「切换中文」的时候，没法保存（按钮变灰了，却没有保存成功提示），不知道是什么原因，有碰到过同样问题的朋友，求解答。

配置 CI/CD

安装 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

# 创建用户
useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash

# 安装
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner

# 运行
gitlab-runner start 

新建 runner

# 注册 runner
gitlab-runner register

# 输入 gitlab 的访问地址
http://192.168.26.139:1874 

# 输入 runner token，把开 http://192.168.26.139:1874/admin/runners 页面查看
63AyFAthj7s7sNy3JDwu

# runner 描述，随便填
测试webpack-vue项目部署

# runner tag
webpack-vue-cicd

# 输入（选择） shell
shell

注册完成后，就可以在 http://192.168.26.139:1874/admin/runners 里面看到创建的 runner。

nginx 配置项目访问地址

「广告时间，猝不及防」这里演示部署的项目是小弟之前写的项目，可以到这里拉取一下。 ——「webpack4 从零搭建 vue 项目开发环境 —— 附上demo」、「Webpack 4 项目常用的优化技巧 —— 附上demo」，感兴趣的可以看一下。自认为写得还算全面，入门 webpack 比较适用。

# 创建目录
mkdir -pv /www/wwwroot/webpack_vue_demo

# 分配权限
chown gitlab-runner /www/wwwroot/webpack_vue_demo/

# 开放 3001 端口
firewall-cmd --permanent --zone=public --add-port=3001/tcp

# 重载防火墙
firewall-cmd --reload

# 打开 nginx 配置文件
vim /usr/local/nginx/conf/nginx.conf

# 在第一个 server 下方 (nginx 默认的，端口为80)，加上下面的内容
server {
    listen       3001; # 端口号
    server_name  localhost; # 服务器地址

    location / {
        root   /www/wwwroot/webpack_vue_demo; # 项目存放目录
        index  index.html index.htm; # 默认访问的主页
    }
}

# 重新加载配置文件
nginx -s reload

编写 .gitlab-ci.yml 文件

.gitlab-ci.yml 文件是存放在项目的根目录下的，要提交到gitlab上面，runner 会根据 .gitlab-ci.yml 编写的规则自动部署项目。下面文件看注释，每一步是干嘛, 都写得比较了，基本都能看明白。yml 的具体语法和关键词,可以查看 gitlab 官网，就不赘述。

新建 .gitlab-ci.yml，添加下面的内容

# 阶段
stages:
  - build
  - deploy
  # 缓存 node_modules 减少打包时间，默认会清除 node_modules 和 dist 
cache:
  paths:
    - node_modules/

# 拉取项目，打包
build:
  stage: build # 阶段名称 对应，stages
  tags: # runner 标签(注册runner时设置的，可在 admin->runner中查看)
    - webpack-vue-cicd
  script: # 脚本（执行的命令行）
    - cd ${CI_PROJECT_DIR} # 拉取项目的根目录
    - npm install # 安装依赖
    - npm run build # 运行构建命令
  only:
    - main #拉取分支
  artifacts:   # 把 dist 的内容传递给下一个阶
    paths:
        - dist/

# 部署
deploy:
  stage: deploy # 阶段名称 对应，stages
  tags: # runner 标签(注册runner时设置的)
    - webpack-vue-cicd
  script: # 脚本（执行的命令行）
    - rm -rf /www/wwwroot/webpack_vue_cicd/*
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/webpack_vue_cicd/ # 把包完成，复制 dist 下的文件到对应的项目位置

见证奇迹的时候到了！ 浏览器输入192.168.26.139:3001，能访问项目就证明 OK 了。你可以尝试项目内容，提交 gitlab 发现，他会自己打包了

文章没用到 Docker ，待我学习学习之后，再出一篇。

花了三天时间才把文章写出来的，各位大佬要是觉得有用，多多点赞，谢谢!

参考学习文章：

• nginx:

  • www.kuangstudy.com/bbs/1353634…
  • juejin.cn/post/700734…

• gitlab:

  • juejin.cn/post/701249…
  • juejin.cn/post/697101…