本文代码均是在Centos7.7版本上测试，需要具备一点linux基础知识，实际环境中上是将jenkins、harbor、gitlab安装在3台机器上的,文中仅使用了一台，所使用的局域网IP地址为：192.18.63.106

docker

   yum remove   docker 
                docker-client 
                docker-client-latest 
                docker-common 
                docker-latest 
                docker-latest-logrotate 
                docker-logrotate 
                docker-engine
  yum install -y yum-utils  device-mapper-persistent-data  lvm2
  yum-config-manager  --add-repo 
               http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo  #使用的阿里源
  yum install docker-ce docker-ce-cli containerd.io
  systemctl start docker   # 启动docker

基础指令

docker images               #查看镜像
docker ps -a                #查看运行中的容器
                            #-a表示查看所有容器
docker stop containerId     #停止容器
docker rm  containerId -f   #删除容器
                            #-f（force)表示强制删除                        
docker rmi imageId          #删除镜像
docker restart containerid  #重启容器

docker-compose

参考链接

     curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose      
     chmod +x /usr/local/bin/docker-compose   
     docker-compose --version

jenkins

version: "3"
services:
 jenkins:
   image: "jenkinsci/blueocean:latest"
   container_name: jenkins
   restart: always
   environment:
     - TZ=Asia/Shanghai
   ports:
     - 8080:8080
     - 50000:50000
   volumes:
     - /data/jenkins:/var/jenkins_home
     - /var/run/docker.sock:/var/run/docker.sock
   user: root

访问地址：http://192.18.63.106:8080
Adminstrator Password可以通过docker logs xxx 查看

gitlab

 version: "3"
 services:
    gitlab:
    image: "twang2218/gitlab-ce-zh:latest"
    container_name: gitlab
    restart: always
    hostname: "192.18.63.106"
    environment:
      TZ: "Asia/Shanghai"
      GITLAB_OMNIBUS_CONFIG: |
        external_url  'http://192.18.63.106'
        gitlab_rails['time_zone'] = 'Asia/Shanghai'
        gitlab_rails['gitlab_shell_ssh_port'] = 2222
    ports:
      - "80:80"
      - "443:443"
      - "2222:22"
    volumes:
      - /usr/local/docker/gitlab/config:/etc/gitlab
      - /usr/local/docker/gitlab/data:/var/opt/gitlab
      - /usr/local/docker/gitlab/log:/var/log/gitlab

访问地址：http://192.18.63.106
默认账户:root
密码：需要自己填写

habor

  # 在线安装
  wget https://github.com/goharbor/harbor/releases/download/v2.0.2/harbor-online-installer-v2.0.2.tgz
  # 解压
  tar -zxvf harbor-online-installer-v2.0.2.tgz
  # 复制harbor并编辑配置
  cd harbor
  cp harbor.yml.tmpl harbor.yml
  vim harbor.yml
  #### 修改说明：  
   hostname: 192.18.63.106
   http:
       port:8001
   #注释掉https节点
   #https
  ####
   ./prepare
   ./install.sh

访问地址：192.18.63.106:8001
默认账号admin
密码123456

示例

1.gitlab上创建一个ci-test项目

2.本地拉取此项目，并初始化Vue项目

   git clone http://192.18.63.106/root/ci-test.git
   vue create app

3.Vue项目做一点修改

3.1 根目录下创建一个根文件Dockerfile，分步构建，可以利用缓存

FROM alpine AS builder
WORKDIR /usr/src/app
RUN apk add --no-cache --update nodejs nodejs-npm
COPY package.json .
RUN npm i
COPY . ./
RUN npm run build

FROM nginx:alpine
LABEL maintainer="ringgo<626498301@qq.com>"
WORKDIR /usr/src/app
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /usr/src/app/dist ./
EXPOSE 80

3.2 根目录下增加一个文件夹nginx，创建default.conf文件

  server
{
   listen   80;
   server_name 127.0.0.1;

   location /{
       root /usr/src/app;
       index index.html index.htm;
       try_files $uri $uri/ /index.html;
   }
}

修改完后，将项目推送至gitlab

4.harbor创建项目

5.jenkins创建ui-build项目

5.1 源码管理

5.2 增加构建步骤,执行shell 出现问题：server gave HTTP response to HTTPS client
修改insecure-registries:["192.18.63.106:8001"]

  vim /etc/docker/daemon.json
  #重启docker
  systemctl restart docker
  #重启harbor步骤
  cd harbor
  ./prepare
  docker-compose up -d

6.经过一顿操作猛如虎，编译成功，可以看到镜像被成功推送到仓库里

7.部署先来一版单机版，写个docker-compose

  version: "3"
   services:
    citest:
     image: "192.18.63.106:8001/citest/ui:dev"
     ports:
      - 7000:80

执行下docker-compose up -d, 本地访问浏览器192.18.63.106:7000 其实这套架构，已经能解决我们目前项目的大部分问题，比如webhook构建，开发/QA/预发布/生产环境区分，今年疫情期间，我们也在慢慢落地k8s，待经过一段时间的沉淀，再来分享。

Vue前端架构： jenkins+harbor+gitlab