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

微信图片_202110111516533.png

云主机

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

XShell 连接服务器

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

连接服务器

具体操作参考下图：

微信图片_20211011151653.png

微信图片_202110111516531.png

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

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

微信图片_202110111516534.png

如果没有，可以使用 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

微信图片_202110111516537.png

# 注册 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。

微信图片_202110111516536.png

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…

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

前言

Linux 系统服务器

本地虚拟机

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

设置网卡

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

云主机

XShell 连接服务器

连接服务器

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

安装 Node

下载和解压

编辑配置文件

重载系统配置文件

测试 node 环境变量是否生效

安装 Git

查看依赖

安装 Git

测试是否安装成功

安装 Nginx

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

安装相关依赖

下载和解压 nginx 压缩包

编译安装

配置环境变量

查看安装路径

配置

测试环境变量是否生效

开放 80 端口

启动 nginx

使用 Yum 安装 Nginx

测试 Nginx 是否安装成功

nginx 常用的命令

防火墙配置（注意）

开放 80 端口

关闭防火墙

安装 GitLab

gitlab 常用命令

测试 GitLab 是否成功

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

配置 CI/CD

安装 gitlab-runner

新建 runner

nginx 配置项目访问地址

编写 .gitlab-ci.yml 文件

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