Gitlab CI/CD自动化部署

acui2024-01-12 16:57

一来公司用的仓库本就是gitlab，其中的部分项目也用到了当中的CI/CD工具，但是这些都是前人留下来的遗产，具体的搭建过程对我来说就是个黑盒；二是很久很久之前买来的云服务器一直在吃灰。秉承着程序员勇于探索的精神（指摸鱼无事），所以研究了一下搭建的过程。

整个过程中会使用的工具如下：

  • node
  • git
  • nginx
  • gitlab
  • gitlab-runner
  • create-vue

服务器基本情况参考

我使用的机器是腾讯云的云服务器，具体的配置情况如下，搭建完成后在无其他任务只是平稳运行的情况下内存占用就达到了2.8g ，所以内存至少要有4g才行（不知道有没有3g的

环境搭建

安装node

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

# 解压
tar xf node-v16.20.1-linux-x64.tar.xz

# 复制文件, 其中路径中的root需要按实际你下载到的路径更改
cp -rf /root/node-v16.20.1-linux-x64 /usr/local/node

# 部署bin文件并建立软链接
# 给文件创建软链接，为/usr/local/node/bin/node文件创建软链接/usr/bin/node
ln -s /usr/local/node/bin/node /usr/bin/node
ln -s /usr/local/node/bin/npm /usr/bin/npm
ln -s /usr/local/node/bin/npx /usr/bin/npx

# 检查版本
node -v
npm -v
npx -v

安装git

试验过程中，较低版本的git在二次执行脚本的过程中会出错（第一次打包无问题，后面再执行就出现问题），使用下面的方式安装较新的版本可以解决

bash 复制代码 
# 安装endpoint
sudo yum install https://packages.endpointdev.com/rhel/7/os/x86_64/endpoint-repo.x86_64.rpm

# 安装git
sudo yum install git

# 检查git版本
git --version

安装nginx

bash 复制代码 
# 安装相关依赖
yum -y install gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel

# 下载压缩包
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

# 在文件中添加信息
export NGINX_HOME=/usr/local/nginx
export PATH=$NGINX_HOME/sbin:$PATH

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

# 查看版本
nginx -v

# 运行nginx
nginx

# 停止
nginx stop

# 安全退出
nginx -s quit 

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

# 查看nginx进程
ps aux|grep nginx

完成后访问服务器地址，应出现nginx的欢迎页

nginx设置开机自启

bash 复制代码 
vim /etc/rc.d/rc.local

# 添加如下内容
/usr/local/nginx/sbin/nginx

安装gitlab

安装

bash 复制代码 
# 安装 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

配置文件

编辑配置文件

bash 复制代码 
vim /etc/gitlab/gitlab.rb

修改文件中的external_url，修改值为'xxx.xxx.xx.xxx:1874'

其中xxx.xxx.xxx.xxx为IP地址, 1874为端口号，端口号可以自定义

重载配置文件，需要的时间比较长(！！！！！不要忘了这一步)

bash 复制代码 
gitlab-ctl reconfigure

# 启动gitlab服务
gitlab-ctl start

# gitlab服务停止
gitlab-ctl stop

# 重启gitlab服务
gitlab-ctl restart

默认用户为root，默认的密码存储在/etc/gitlab/initial_root_password(！！！！！此文件会在24小时后删除)

配置防火墙的1874端口，完成之后不出意外就可以访问1874端口来打开gitlab

安装gitlab-runner

bash 复制代码 
# 下载
# 注意，15.6后的gitlab-runner不能使用命令行创建runner
curl -L --output /usr/local/bin/gitlab-runner-15.3.0-1.x86_64.rpm https://mirrors.tuna.tsinghua.edu.cn/gitlab-runner/yum/el7/gitlab-runner-15.3.0-1.x86_64.rpm

# 安装，会新增一个gitlab-runner的用户
rpm -ivh gitlab-runner-15.3.0-1.x86_64.rpm

# 运行
gitlab-runner start

注册gitlab的runner

bash 复制代码 
# 注册 runner
gitlab-runner register

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

# 输入 runner token
# 可在http://xxx.xxx.xxx.xxx:1874/admin/runners 页面查看
# 或者是项目本身的runner
xxxxxxx

# runner 描述，可自行填写
xxxx

# runner tag，这个很重要，在编写执行脚本的时候需要执行runner的tag
test-runner

# 输入（选择） shell
shell

# 后台运行注册的runner
nohup gitlab-runner run &

在下面的目录就可以看到注册的runner

nginx访问站点配置

创建目录

bash 复制代码 
# 创建目录
mkdir -pv /www/wwwroot/test

目录分配权限

上面说到安装了gitlab-runner会新增一个gitlab-runner的用户，这一步把项目的所有者改为gitlab-runner，这一步很重要，因为重启服务器后执行脚本的过程的用户是gitlab-runner，没有更改所有者执行脚本的过程中没有权限删除项目里的文件

bash 复制代码 
# 分配权限
chown gitlab-runner /www/wwwroot/test/

配置nginx文件

bash 复制代码 
# 打开 nginx 配置文件
vim /usr/local/nginx/conf/nginx.conf

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

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

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

创建项目测试

这边我是用create-vue创建的Vue3项目，在项目的根目录下添加 .gitlab-ci.yml 文件

整个执行过程有1个stage，即build，使用的runner的tag是 first-runner ，即上面注册runner时填写的tag名，CI_PROJECT_DIR 是内置变量，指当前正在构建的项目名称

其中分支名不是master，是main，这个要注意一下，否则也会导致这一个stage不会执行

yaml 复制代码 
# 阶段
stages:
  - build
cache:
  paths:
    - node_modules/

# 拉取项目，打包
build:
	# 阶段名称 对应，stages
  stage: build 
  # runner 标签，注册runner时填写的tag
  # 可在gitlab的菜单admin->runner或者项目本身的CI/CD中找到runners查看有哪些tag
  tags: 
    - first-runner
  script: # 脚本（执行的命令行）
    - cd ${CI_PROJECT_DIR} # 进入项目的根目录
    - npm install # 安装依赖
    - npm run build # 运行构建命令
    - rm -rf /www/wwwroot/test/*
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/test/ # 把包完成，复制 dist 下的文件到对应的项目位置
  only:
    - main #拉取分支

在项目的CI/CD的Pipeline 中可以查看进度，以下是执行完成的截图，在执行过程中点击进去也可以查看具体执行过程

可能遇到的错误

  1. 执行脚本时: ERROR: Preparation failed: getwd: getwd: no such file or directory
bash 复制代码 
# 重启runner服务
gitlab-runner restart
  1. 添加完runner后，显示 New runner, has not connected yet
bash 复制代码 
# https://stackoverflow.com/questions/67820925/gitlab-ci-cd-new-runner-has-not-been-connected-yet
gitlab-runner verify

参考文章

gitlab相关

git安装

后续

在研究的过程中，了解到还有结合docker、Jenkins的方案，不过本文并没有涉及到这些工具，后续有机会再研究下这些方案，有什么写的不对的地方或者什么疑问可以留言，希望文章有帮助到你~

相关推荐
昨天；明天。今天。3 分钟前
案例-任务清单
前端·javascript·css
zqx_71 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己1 小时前
javaScript基础（8个案例+代码+效果图）
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称2 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色2 小时前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河3 小时前
CSS总结
前端·css
BigYe程普3 小时前
我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H3 小时前
前端的全栈混合之路Meteor篇：关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍3 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑