前端搭建CICD流程

用Docker-compose 安装gitlab、gitlab-runner

源码地址如果您觉得有用请STAR

安装docker

如果有已安装旧版docker需要先卸载

 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine
复制代码

安装

yum install docker  #安装docker
systemctl start docker  #启动docker
systemctl enable docker  #开启启动复制代码

若是启动报错，需要重新安装：

启动报错，错误如下：
Failed to start docker.service: Unit docker.service not found.错误分析：CentOS 8 中安装 docker 和 Podman 冲突解决方式：1.查看是否安装 Podman 
rpm -q podman2.删除podman(输入yes，然后等待...)
dnf remove podman 3.重装docker(分别执行如下命令)yum install -y yum-utils  device-mapper-persistent-data  lvm2yum-config-manager  --add-repo   https://download.docker.com/linux/centos/docker-ce.repoyum install docker-ce docker-ce-cli containerd.ioyum install docker-ce docker-ce-cli docker-compose-plugin 复制代码

docker-compose-plugin 貌似就是docker-compose,这样也许不用单独安装python3了，也是在其他机器装docker时才发现。感兴趣的可以试试。

安装Python3(docker-compose需要python3)

wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz
tar -zxvf Python-3.7.0.tgz
cd Python3.7.0 
./configure --prefix=/usr/local/python3 
make && make install#添加环境变量echo PATH='/usr/local/python/bin:$PATH' >> /etc/profile  # 将python安装路径追加到配置文件中source /etc/profile  # 让配置文件重载生效# 修改原有的python软连接名称mv /usr/bin/python /usr/bin/python2.7.5
# 建立python3的软连接ln -s /usr/local/python/bin/python3.7 /usr/bin/python
复制代码

遇到的问题

在安装python3.xx版本后，通过yum去安装软件会出现问题

 yum install -y epel-releaseFile"/usr/bin/yum", line 30except KeyboardInterrupt, e:^
SyntaxError: invalid syntax
复制代码

解决方式：

# vi /usr/bin/yum  
将第一行"#!/usr/bin/python" 改为 "#!/usr/bin/python2"复制代码

另一个问题:

File"/usr/libexec/urlgrabber-ext-down", line 28except OSError, e:^
SyntaxError: invalid syntax
复制代码

解决方式：

vi /usr/libexec/urlgrabber-ext-down  
将第一行"#!/usr/bin/python" 改为 "#!/usr/bin/python2"复制代码

安装Docker-compose

sudo yum install epel-release  #安装依赖
pip install --upgrade --force pip #更新一下pip,避免版本不对报错
sudo pip install docker-compose  #安装compose
docker-compose version  #查看版本信息复制代码

安装时，会有waring，说是在root用户下安装会导致包管理混乱，查了一下解决方式：通过安装Python3虚拟环境处理，解决过程中会有一系列依赖包报错。但想想安装虚拟环境，似乎就要在虚拟环境中装Docker-compose，有点不太对，于是直接忽略了警告信息，继续安装:

安装gitlab、gitlab-runner容器

在 /user/local/ 下新建目录 dockerCompsemkdir dockerCompsevim docker-compose.yml //新建文件

version: "3"
services:gitlab:image: 'gitlab/gitlab-ce:latest'container_name: GitLabrestart: alwaysenvironment:GITLAB_OMNIBUS_CONFIG: |external_url 'http://47.97.97.114:3143'gitlab_rails['gitlab_shell_ssh_port'] = 3122nginx['listen_port'] = 443nginx['redirect_http_to_https'] = truenginx['ssl_certificate'] = "/etc/ssl/certs/gitlab/server-cert.pem"nginx['ssl_certificate_key'] = "/etc/ssl/certs/gitlab/server-key.pem"registry_external_url 'http://47.97.97.114:4567'registry_nginx['enable'] = trueregistry_nginx['ssl_certificate'] = "/etc/ssl/certs/gitlab/server-cert.pem"registry_nginx['ssl_certificate_key'] = "/etc/ssl/certs/gitlab/server-key.pem"gitlab_rails['backup_keep_time'] = 172800ports:- '4567:4567'- '3143:443'- '3122:22'volumes:- '/srv/gitlab/config:/etc/gitlab'- '/srv/gitlab/logs:/var/log/gitlab'- '/srv/gitlab/ssl:/etc/ssl/certs/gitlab'- '/srv/gitlab/data:/var/opt/gitlab'networks:dev-net:aliases:- my.gitlabrunner:image: 'gitlab/gitlab-runner:latest'container_name: gitlab-runnerrestart: alwaysvolumes:- '/srv/gitlab-runner:/etc/gitlab-runner'- '/var/run/docker.sock:/var/run/docker.sock'networks:- dev-net
networks:dev-net:external:name: development
复制代码

按esc建，:wq,启动docker

docker-compose up如果提示没有development网络，按照提示执行命令即可。
复制代码

注册runner

docker exec -it gitlab-runner gitlab-runner register复制代码

Pleaseenterthegitlab-cicoordinatorURL (e.g. https://gitlab.com/):`http://47.97.97.114:3143/Please enter the gitlab-ci token for this runner:
# 登录这个地址： http://47.97.97.114:3143/admin/runners 右上角下拉按钮可以查看Please enter the gitlab-ci description for this runner:
[1297529a8a58]: Docker Runner
Please enter the gitlab-ci tags for this runner (comma separated):
docker
Registering runner... succeeded                     runner=RQ-XuZwP
Please enter the executor: docker-ssh, virtualbox, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, kubernetes:
docker
Please enter the default Docker image (e.g. ruby:2.1):
docker:stable
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded! 
复制代码

浏览器重新访问gitlab地址，应该可以看到runner已经注册，如果地址访问不成功，重启docker-compose

docker-compose down
docker-compose up
复制代码

打包前端镜像

安装 registry

此时修改docker-compose.yml

services:# 增加registryregistry:image: 'registry'container_name: registryrestart: alwaysports:- '4567:5000'volumes:- './registry:/var/lib/registry'gitlab:image: 'gitlab/gitlab-ce:latest'container_name: GitLabrestart: alwaysenvironment:GITLAB_OMNIBUS_CONFIG: |external_url 'http://47.97.97.114:3143'gitlab_rails['gitlab_shell_ssh_port'] = 3122nginx['listen_port'] = 443nginx['redirect_http_to_https'] = falseregistry_external_url 'http://47.97.97.114:4567'registry_nginx['enable'] = falsegitlab_rails['registry_api_url'] = "http://47.97.97.114:4567"gitlab_rails['registry_enabled'] = truegitlab_rails['backup_keep_time'] = 172800ports:- '3143:443'- '3122:22'volumes:- '/srv/gitlab/config:/etc/gitlab'- '/srv/gitlab/logs:/var/log/gitlab'- '/srv/gitlab/ssl:/etc/ssl/certs/gitlab'- '/srv/gitlab/data:/var/opt/gitlab'23,15%
复制代码

这里删掉了一部分https的配置，让配置文件简洁一些，删除了原有gitlab镜像中的端口'4567:4567'，重启docker-compos

docker-compose down 
docker-compose up
复制代码

访问该地址：http://47.97.97.114:4567/v2/，返回

说明registry启动成功，

配置socket binding , 让gitlab-runner 可以使用host主机的docker命令，构建镜像

vim /srv/gitlab-runner/config.toml
复制代码

重启docker-compose

docker-compose down 
docker-compose up
复制代码

在gitlab上增加变量Settings->CICD->Viriables：

CI_REGISTRY http://47.97.97.114:4567/

CI_REGISTRY_PASSWORD yourpassword

CI_REGISTRY_USER yourusername

这些变量可以在 gitlab-ci.yml上使用。

前端项目根目录下修改.gitlab-ci.yml，构建容器镜像并上传到gitlab的registry

image: docker:20.10.22  #注意版本是否有影响variables:GIT_SSL_NO_VERIFY: "1"
stages:- test- build
before_script:- export PACKAGE_VERSION=$(grep '"version":' package.json | cut -d\" -f4)- export NODE_ENV=production# building:#   image: node:10    # 指定运行环境#   stage: build          # 当前stage阶段为build#   tags:#     - docker#   script:               # build阶段运行的脚本#     - npm --registry=https://registry.npm.taobao.org install express#     - npm i#     - npm run  build#   artifacts:#     paths:#     - dist# cache:                  # 缓存#   paths:                # 路径#     - node_modules/     # 缓存node_mudules将大大提高ci运行的速度build-docker:stage: buildtags:- dockerscript:- echo$CI_REGISTRY_IMAGE- echo$CI_REGISTRY- docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD"$CI_REGISTRY- echo"docker build"- docker build -t $CI_REGISTRY_IMAGE:$PACKAGE_VERSION .- docker tag $CI_REGISTRY_IMAGE:$PACKAGE_VERSION$CI_REGISTRY_IMAGE- docker push $CI_REGISTRY_IMAGE:$PACKAGE_VERSION- docker push $CI_REGISTRY_IMAGE- docker image rm$CI_REGISTRY_IMAGE- docker image rm$CI_REGISTRY_IMAGE:$PACKAGE_VERSIONonly:- main复制代码

CI_REGISTRY_IMAGE 是gitlab CICD内置变量，可以直接使用。

docker tag CI_REGISTRY_IMAGE:version CI_REGISTRY_IMAGE,第二个tag名只传路径会默认为latest

docker 登录时http报错解决方式：

If the daemon.json file does not exist, create it. Assuming there are no other settings in the file, it should have the following contents:

{"insecure-registries":["http://myregistrydomain.com:xxxx"]}复制代码

然后重启docker:systemctl restart docker

打包生成镜像

前一个阶段已经可以成功使用 registry, 并且能使用docker命令打包，此时我们再来修改.gitlab-ci.yml 文件，stages增加build-docker,并且修改上一个阶段的artifacts。

image: docker:20.10.22variables:GIT_SSL_NO_VERIFY: "1"
stages:- test- build- build-docker  #这里很重要，和下面的state保持一致，不然没法使用artifacts
before_script:- export PACKAGE_VERSION=$(grep '"version":' package.json | cut -d\" -f4)- export NODE_ENV=productionbuilding:image: node:10    # 指定运行环境stage: build          # 当前stage阶段为buildtags:- dockerscript:               # build阶段运行的脚本- npm --registry=https://registry.npm.taobao.org install express- npm i- npm run  buildartifacts:paths:- dist              # 导出dist
cache:                  # 缓存paths:                # 路径- node_modules/     # 缓存node_mudules将大大提高ci运行的速度build-docker:stage: build-dockertags:- dockerscript:- ls- echo$CI_REGISTRY_IMAGE- echo$CI_REGISTRY- docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD"$CI_REGISTRY- echo"docker build"- docker build -t $CI_REGISTRY_IMAGE:$PACKAGE_VERSION .- docker tag $CI_REGISTRY_IMAGE:$PACKAGE_VERSION$CI_REGISTRY_IMAGE- docker push $CI_REGISTRY_IMAGE:$PACKAGE_VERSION- docker push $CI_REGISTRY_IMAGE- docker image rm$CI_REGISTRY_IMAGE- docker image rm$CI_REGISTRY_IMAGE:$PACKAGE_VERSIONonly:- main复制代码

再次提交到gitlab，此时应该会编译成功并且，上传镜像到gitlab

将打包镜像在onLine环境下发布

OnLine 环境只需安装docker即可，具体安装步骤和上面一样。

docker login -u "yourusername" -p "yourpassword" http://47.97.97.114:4567/  #登录registrydocker run --init -p 8000:80 -d 47.97.97.114:4567/klbest1/my-vue-app
# 运行镜像复制代码

-p 绑定端口号，-d 表示后台运行。如果是在云上环境，需要在安全组中开放8000端口，协议为tcp.

访问发布的地址：http:yourdomain:8000, 查看前端页面是否成功。