自动化运维记录之GitLab CI/CD 自动化部署入门教程

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

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

2.安装 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/bin

#重载系统配置文件
source /etc/profile

#测试 node 环境变量是否生效
[root@jumpserver node]# node -v
v12.9.0

3.安装 Git

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

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

使用 IUS 仓库（yum源），执行完下面的命令，应该就能安装了git
yum -y install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

#安装 Git
[root@jumpserver yum.repos.d]# yum install -y git
#查看 Git版本
[root@jumpserver yum.repos.d]# git --version
git version 1.8.3.1

4.源码编译nginx

# 安装依赖包
[root@jumpserver data]# yum install -y gcc pcre-devel openssl-devel zlib-devel
[root@jumpserver data]# useradd -r -s /sbin/nologin nginx
[root@jumpserver data]# tar -xvf nginx-1.18.0.tar.gz
[root@jumpserver data]# cd nginx-1.18.0
[root@jumpserver nginx-1.18.0]#  ./configure --prefix=/usr/local/nginx \
>  --user=nginx \
>  --group=nginx \
> --with-http_ssl_module \
>  --with-http_v2_module \
>  --with-http_realip_module \
>  --with-http_stub_status_module \
>  --with-http_gzip_static_module \
>  --with-pcre \
>  --with-stream \
>  --with-stream_ssl_module \
>  --with-stream_realip_module

[root@jumpserver nginx-1.18.0]# make && make install

# 创建软链接
[root@jumpserver nginx-1.18.0]# ln -s /usr/local/nginx/sbin/nginx  /usr/sbin/
# 启动nginx
[root@jumpserver nginx]# nginx

[root@jumpserver nginx]# curl 192.168.32.132
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
    
    
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

# 设置自启动
[root@jumpserver system]# cat /lib/systemd/system/nginx.service 
[Unit]
Description=nginx service
After=network.target

[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s quit
PrivateTmp=true

[Install]
WantedBy=multi-user.target

# 防火墙开放80端口
[root@jumpserver system]# firewall-cmd --permanent --zone=public --add-port=80/tcp
success
# 重新加载防火墙
[root@jumpserver system]# firewall-cmd --reload

5.安装GIt Lab

# 安装 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.32.132 对应的就是服务器的IP，端口为 1874 

external_url 'http://192.168.32.132:1874'

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

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

#重载配置文件，需要的时间比较长
[root@jumpserver ~]# gitlab-ctl reconfigure

# 启动gitlab服务

sudo gitlab-ctl start

# gitlab服务停止

sudo gitlab-ctl stop

# 重启gitlab服务

sudo gitlab-ctl restart

# 首次登录gitlab 密码
[root@jumpserver ~]# cat /etc/gitlab/initial_root_password
# WARNING: This value is valid only in the following conditions
#          1. If provided manually (either via `GITLAB_ROOT_PASSWORD` environment variable or via `gitlab_rails['initial_root_password']` setting in `gitlab.rb`, it was provided before database was seeded for the first time (usually, the first reconfigure run).
#          2. Password hasn't been changed manually, either via UI or via command line.
#
#          If the password shown here doesn't work, you must reset the admin password following https://docs.gitlab.com/ee/security/reset_user_password.html#reset-your-root-password.
#密码在这里：
Password: fBy1bpzI/sQ8J5bks1KS41hsW0eD9f1P/PX7HdHc6Z4=

# NOTE: This file will be automatically deleted in the first reconfigure run after 24 hours.

# 修改密码
进入 GitLab 控制台
gitlab-rails console -e production
执行命令： user = User.where(id: 1).first，此 user 则表示 root 用户
执行命令：user.password = 'admin@sjy’修改密码， user.password_confirmation = ‘admin@sjy’ 确认密码
执行命令： user.save
执行命令： exit

5.部署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.32.132:1874 

# 输入 runner token，打开 http://192.168.32.132:1874/admin/runners 页面查看
tZwc77sFFHRbX6ck9q9r

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

# runner tag
webpack-vue-cicd

# 输入（选择） shell
shell

# 注册 runner
[root@jumpserver /]# gitlab-runner register
Runtime platform                                    arch=amd64 os=linux pid=12332 revision=febb2a09 version=15.0.0
Running in system-mode.   

# 输入 gitlab 的访问地址                                                   
Enter the GitLab instance URL (for example, https://gitlab.com/):
http://192.168.32.132:1874   
# 输入 runner token，打开 http://192.168.32.132:1874/admin/runners 页面查看
Enter the registration token:
tZwc77sFFHRbX6ck9q9r
# runner 描述，随便填
Enter a description for the runner:
[jumpserver]: 测试webpack-vue项目部署

Enter tags for the runner (comma-separated):
webpack-vue-cicd

Enter optional maintenance note for the runner:
shell

Registering runner... succeeded                     runner=tZwc77sF
Enter an executor: custom, docker, ssh, virtualbox, docker-ssh+machine, kubernetes, docker-ssh, parallels, shell, docker+machine:
shell
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

注册完成后，就可以在http://localhost:1874/admin/runners 页面查看创建的runner

6.nginx 配置项目访问地址

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

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

# 开放 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_cicd; # 项目存放目录
        index  index.html index.htm; # 默认访问的主页
    }
}
# 重新加载nginx
[root@jumpserver /]# nginx -s reload

7.push 项目到gitlab 新建项目下

git remote update origin --prune  刷新分支 如果有旧分支删除 创建新的分支 就刷新到最新的分支在提交代码到那个新的分支上面

git branch  查看本地分支

git branch -a 查看本地以及远程所有分支

git branch -r 查看远程分支

git checkout -b compile remotes/origin/compile 切换到你想要提交的分支

git add . 

git commit -m ''  提交代码

git status 查看状态

git pull origin compile     拉取远程指定分支

git log -3 --graph compile 查看本地提交commit的状态


操作步骤：
1.将gitlab上新建项目先拉取到本地
2.将文件夹内容复制进此目录下
3.执行相关git命令
# git branch  查看本地分支
# git checkout -b compile remotes/origin/compile 切换到你想要提交的分支
# git add .  添加当前目录下的文件到缓存区
# git commit -m ''  提交代码注释
# git push origin main 推送项目到main 分支下
# git status 查看缓存区内容
# git clean -d * 删除缓存区所有内容

8. 编写 .gitlab-ci.yml 文件

.gitlab-ci.yml 文件是存放在项目的根目录下的，要提交到gitlab上面，runner 会根据 .gitlab-ci.yml 编写的规则自动部署项目

新建 .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}
    - echo "当前目录位置："
    - pwd
    - echo "安装npm步骤"
    - 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 下的文件到对应的项目位置

9.验收效果

每次出发流水线的条件：
1.当有新的代码提交到gitlab分支上时，就会自动触发流水线
2.自己通过gitlab上的请求合并选项手动点击流水线
3.浏览器输入192.168.32.132：3001 访问项目

在这里插入图片描述
参考链接

自动化运维记录之GitLab CI/CD 自动化部署入门教程

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

2.安装 Node

下载和解压

3.安装 Git

4.源码编译nginx

5.部署CI/CD

安装 gitlab-runner

新建 runner

6.nginx 配置项目访问地址

7.push 项目到gitlab 新建项目下

8. 编写 .gitlab-ci.yml 文件

猜你喜欢