阅读 1432
GitLab CI/CD 自动化部署入门 ,手把手教你搭建 —— 从安装 Linux 到 GitLab 自动化部署(非常详细)

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
复制代码

编辑配置文件

# 打开编辑配置文件
vim /etc/profile
复制代码

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

export PATH=$PATH:/root/node-v12.9.0-linux-x64/bin
复制代码

重载系统配置文件

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 ,待我学习学习之后,再出一篇。

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

参考学习文章:

文章分类
前端
文章标签