Gitlab CI/CD自动化部署

一来公司用的仓库本就是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的方案,不过本文并没有涉及到这些工具,后续有机会再研究下这些方案,有什么写的不对的地方或者什么疑问可以留言,希望文章有帮助到你~

相关推荐
J总裁的小芒果14 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9616 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋18 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder20 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code37 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html