gitlab+gitlab-runner+docker实现前端CI/CD

1.docker安装gitlab仓库

下载Gitlab的Docker镜像

docker pull gitlab/gitlab-ce

运行如下命令来启动Gitlab

docker run -d  -p 443:443 -p 9000:80 -p 22:22 --name gitlab --restart always -v $HOME/docker/gitlab/config:/etc/gitlab -v $HOME/docker/gitlab/logs:/var/log/gitlab -v $HOME/docker/gitlab/data:/var/opt/gitlab gitlab/gitlab-ce

# -d：后台运行
# -p：将容器内部端口向外映射
# --name：命名容器名称
# -v：将容器内数据文件夹或者日志、配置等文件夹挂载到宿主机指定目录

# 443:443：将http：443映射到外部端口443
# 9000:80：将web：80映射到外部端口9000
# 22:22：将ssh：22映射到外部端口22

参数说明：

-d：已守护进程的方式运行容器。这样就可以让 gitlab 服务在后台运行而不影响前台的操作。
--hostname：设置主机名字。和我们上面给虚拟机设置的域名保持一致即可。如果是云服务器且绑定了域名，这里就是云服务器的域名。
-p：gitlab 需要暴露三个端口，443 和 80 是访问 Gitlab 的 Web 页面，22 是使用 Git 管理仓库时用到，但是由于宿主机的 22 被我的 sshd 服务占用了，所以这里映射到了 23。
--name：容器的名字
--restart：当容器启动失败时总是尝试自动重启
-v：挂载数据卷，这样就能方便修改为容器内服务的配置，同时方便做容器数据的迁移

按上面的方式，gitlab容器运行没问题，但在gitlab上创建项目的时候，生成项目的URL访问地址是按容器的hostname来生成的，也就是容器的id。作为gitlab服务器，我们需要一个固定的URL访问地址，于是需要配置gitlab.rb （宿主机路径：$HOME/gitlab/config/gitlab.rb), 配置http协议所使用的访问地址

# 通过vim 来编辑相应的配置, $HOME是当前系统的根目录,根据自己的路径自行修改
vim $HOME/gitlab/config/gitlab.rb

# 配置http协议所使用的访问地址,不加端口号默认为80
external_url 'http://127.0.0.1'

# 配置ssh协议所使用的访问地址和端口
gitlab_rails['gitlab_ssh_host'] = 'http://127.0.0.1'
gitlab_rails['gitlab_shell_ssh_port'] = 22 # 此端口是run时22端口映射的222端口
:wq #保存配置文件并退出


# 每次修改gitlab 配置都需要重启
docker restart gitlab

邮箱服务配置

不配置也可以

主要用于gitlab 日常使用中邮件通知服务

# 开始邮箱服务
gitlab_rails['smtp_enable'] = true
# 设置邮箱smtp 服务, 根据自己/公司使用的邮箱协议自由设置即可
gitlab_rails['smtp_address'] = "smtp.exmail.qq.com"
# 设置邮箱smtp 服务端口
gitlab_rails['smtp_port'] = 465
# 设置发件人, 建设单独申请邮箱
gitlab_rails['smtp_user_name'] = "getlab@xxx.com"
# 设置登录邮箱密码
gitlab_rails['smtp_password'] = "password"

gitlab_rails['smtp_authentication'] = "login"
gitlab_rails['smtp_enable_starttls_auto'] = true
gitlab_rails['smtp_tls'] = true
# gitlab发送人, 可以根据自己的需求自己定义
gitlab_rails['gitlab_email_from'] = 'getlab'

然后访问就可以了

http://127.0.0.1:9000/

2.安装gitlab-runner

拉取 gitlab-runner 镜像

$ docker pull gitlab/gitlab-runner:latest

创建并运行 gitlab-runner 镜像

$ docker run -d --name runner --restart always -v /root/gitlab-runner/config:/etc/gitlab-runner  -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest

# -d：后台运行
# --name：命名容器名称
# -v：将容器内数据文件夹或者日志、配置等文件夹挂载到宿主机指定目录

注册runner

#进入容器
docker exec -it runner bash

gitlab-runner register

Enter the GitLab instance URL (for example, https://gitlab.com/):   输入 GitLab 地址
$ Enter the registration token: 输入 GitLab Token

$ Enter a description for the runner:  输入 runner 名称
$ Enter tags for the runner (comma-separated):  设置 tag 
$ Enter optional maintenance note for the runner:  输入可选维护说明
$ Please enter the executor：选择 runner 类型，这里我选择的是 **docker**

设置tag 是需要注意这个在后面配置 .gitlab-ci.yml文件时候会使用到

修改配置

找到 /root/gitlab-runner/config/config.toml 的配置文件 倒数第二行是不一样的

  [runners.docker]
    tls_verify = false
    image = "docker:latest"
    privileged = true
    disable_entrypoint_overwrite = false
    oom_kill_disable = false
    disable_cache = false
    volumes = ["/cache", "/var/run/docker.sock:/var/run/docker.sock", "/root/gitlab-runner/config/certs:/etc/gitlab-runner/certs"]
    shm_size = 0

然去gitlab仓库看

就成功了。

3.在项目中编写gitlab-ci.yml文件

全局配置关键字

default 工作关键字的自定义默认值。
stages 流水线阶段的名称和顺序。
variables 为管道中的所有作业定义 CI/CD 变量。
workflow 控制运行什么类型的管道。
before_script 覆盖在作业之前执行的一组命令。

使用作业关键字配置的作业：

before_script 覆盖在作业之前执行的一组命令。
cache 应在后续运行之间缓存的文件列表。
image 使用 Docker 镜像。
only 控制何时创建工作。
script 由运行程序执行的 Shell 脚本。
stage 定义作业阶段。
services 使用 Docker 服务镜像。
variables 在工作级别定义工作变量。
tags 用于选择跑步者的标签列表。更多的详细配置

注意，这里的tags 需要在gitlab-runner注册时声明comma-separated

在项目的根目录下创建.gitlab-ci.yml文件

我的配置是这样的。

# stages：定义Pipeline中的各个构建阶段，并且定义Stages名称
stages:
    - install
    - build
    - deploy

cache:
    key: ${CI_BUILD_REF_NAME}
    paths:
        - node_modules/
        - dist/
# 定义 install 阶段的一个 job
install:
    stage: install
    # artifacts:
    #     - dist
    #   paths:
    image: node:16.20.0
    only:
        - main
    script:
        - echo "============ 开始构建 ============"
        - echo "============ 执行 install ============"
        - npm install
    tags:
        - boke_runner
# 定义 build 阶段的一个 job
build:
    stage: build
    image: node:16.20.0
    script:
        - npm run build
    only:
        - main
    tags:
        - boke_runner

# 打包成docker镜像
run:
    image: docker
    stage: deploy
    script:
        - docker build -t boke_web .
        - if [ $(docker ps -aq --filter name=boke_web) ]; then docker rm -f boke_web;fi
        - docker run -d -p 5173:5173 --name boke_web boke_web
    only:
        - main
    tags:
        - boke_runner

值得注意的几个点：

1.image: node:16.20.0是你在这个阶段需要的环境，我们在install阶段执行的命令是 npm i,这个是需要node环境的

2.only 后面对应的就行在那个分支执行流水线，我选取的主分支。

3.tags，这个tabgs就是我们需要选取那个runner的tag,我们在注册runner的是填写的tag就是对应这个

4.编写Dockerfile文件

FROM nginx:latest

COPY /dist /usr/share/nginx/html

COPY /nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 5173


CMD ["nginx", "-g", "daemon off;"]

5.编写nginx.conf文件

 server {
     listen       5173;
     server_name  app.cbbgs.cn;

     #charset koi8-r;
     access_log  /var/log/nginx/host.access.log  main;
     error_log  /var/log/nginx/error.log  error;

     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         # try_files $uri $uri/ /index.html =404;
     }

     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   html;
     }
 }

6.给服务器安装git

给服务器安装git,然后给服务器配置上git的ssh就可以了。