关于docker:前端CICD从零开始彻底弄懂前端自动化构建和部署CD篇

实现思路

1. 程序员在本地进行开发
2. 程序员将批改后的代码提交到 gitlab 代码仓库
3.gitlab 收到代码后通过 webhook 告诉 jenkins 进行构建
4.jenkins 构建好了当前将构建好当前的代码公布的到线上服务器

劣势

gitlab、jenkins、生产服务器这三个服务都能够散布在不同的服务器, 所以大大提高了可配置性也升高了耦合。

环境筹备

• gitlab 代码仓库(能够在线上, 也能够在本地)
• jenkins 服务(能够跟 gitlab 不在同一个服务器上, 然而这里没有必要, 我把 gitlab 和 jenkins 都部署在本地服务器)
• 生产环境

gitlab 和 jenkins 服务我都是通过 docker-compose 进行装置的, 这个具体我就不多说了, 上面我贴一下 docker-compose.yml 文件

# gitlab 的 docker-compose.yml 文件
version: "3"
services:
  gitlab:
    image: twang2218/gitlab-ce-zh
    container_name: gitlab
    restart: always
    privileged: true
    hostname: '192.168.4.2'
    environment:
      TZ: 'Asia/Shanghai'
      GITLAB_OMNIBUS_CONFIG: |
        external_url "http://192.168.4.2:82"
        gitlab_rails['time_zone'] = 'Asia/Shanghai'
        gitlab_rails['gitlab_shell_ssh_port'] = 2222
        gitlab_rails['gitlab_email_enabled'] = true
        gitlab_rails['gitlab_email_from'] = 'liaoxubao@aliyun.com'
        gitlab_rails['gitlab_email_display_name'] = 'liaoo'
        gitlab_rails['smtp_enable'] = true
        gitlab_rails['smtp_address'] = "smtp.aliyun.com"
        gitlab_rails['smtp_port'] = 465
        gitlab_rails['smtp_user_name'] = "liaoxubao@aliyun.com"
        gitlab_rails['smtp_password'] = "jhudkir123"
        gitlab_rails['smtp_domain'] = "aliyun.com"
        gitlab_rails['smtp_authentication'] = "login"
        gitlab_rails['smtp_enable_starttls_auto'] = true
        gitlab_rails['smtp_openssl_verify_mode'] = 'peer'
        gitlab_rails['smtp_tls'] = true
        nginx['listen_port'] = 82
    ports:
      - '82:82'
      - '2222:22'
    volumes:
      - '/mydata/gitlab/config:/etc/gitlab'
      - '/mydata/gitlab/logs:/var/log/gitlab'
      - '/mydata/gitlab/data:/var/opt/gitlab'
    logging:
      driver: "json-file"
      options:
        max-size: "20m"
        max-file: "10"

# jenkins 的 docker-compose.yml 文件
version: '3.1'
services:
  jenkins:
    image: jenkins/jenkins
    restart: always
    container_name: jenkins
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8888:8080"
    user: root
    volumes:
      - ./data:/var/jenkins_home

两个服务跑起来, 不跟你多 BB, 撸起袖子就是一行 hello world

咱们先在本地创立一个 vue 我的项目

vue create hello world
# 回车回车回车...
cd cdproject/
npm run serve
# 把我的项目跑起来, 而后咱们就看到了这个

而后咱们再去 gitlab 上新建一个我的项目

接下来咱们去本地生产一套 rsa 格局的 ssh-keygen

ssh-keygen -m PEM -t rsa -b 4096 -C "thatsfelix"

公钥放到你 gitlab 上的集体设置外面, 这样你就能够通过 ssh 去 push 你的代码到服务器了, 具体位置在这里:

接下来咱们试着将本地代码提交到 gitlab 仓库

cd cdproject/
git init
git remote add origin ssh 地址(如果不懂这个地址在哪里看上面的图)
git remote -v (查看仓库增加进去没有)
git add .
git commit -m "first push"
git push -u origin master

操作胜利咱们去 gitlab 代码仓库看看

这里咱们能够看到咱们的代码曾经提交上来了

接下来咱们去配置 jenkins

装置插件的时候因为我是小白, 所以我抉择举荐装置
新建一个我的项目


这里先暂停一下

因为咱们的 jenkins 要从 gitlab 拉取代码, 所以咱们先去凭据外面增加一个私钥, 就是咱们一开始生成的那个

另外咱们还须要这三个插件

因为咱们代码构建完了当前要通过 ssh 进行公布, 所以咱们这里装一个 publish over ssh 的插件

因为咱们要应用 nodejs 进行打包, 所以咱们在装一个 nodejs 的插件

以上装完了当前重启一下 jenkins
nodejs 这个不是真正的 nodejs, 他只是一个相似于容器一样的插件, 所以咱们要装一下 nodejs 工具, 在这里:



好了, 咱们持续回到刚刚创立我的项目那里:


这里抉择咱们刚刚增加的全局凭据的那个私钥




这个构建的 shell 是在咱们的 jenkins 容器外面执行的

点这里, 而后你这边就什么都没有, 这时候你须要增加一下你近程服务器的配置



填完当前点测试 (这个公钥记得放到你的线上服务器下面哦)

测试胜利当前咱们点保留

咱们点击立刻构建, 能够看到咱们的我的项目曾经开始构建了


然而要想实现 push 当前马上就主动构建, 咱们还须要最初一步操作:
咱们先复制一下构建配置外面的这个地址:

而后咱们来到 gitlab 的我的项目目录下, 而后点这里:


如果你看到了这个谬误提醒:

意思是说不容许对本地发动申请, 这时候咱们去放开一下权限即可, 在这里:

再次增加, 而后胜利了, 而后咱们点这里

开展有个 push event, 咱们测试一下

报 403 谬误，
而后咱们进到 jenkins 的这里:


这个勾上, 保留
而后再来这里

这个勾去掉, 保留

再回到 gitlab, test >>> push events, 而后咱们看到了 http: 200 的状态码

至此, 咱们的主动构建的配置就实现啦, 而后咱们去本地提交一波，

git add .
git commit -m "cd 3"
git push

而后就能够看到咱们的代码开始主动构建啦

接下来, 咱们开始书写构建脚本和部署脚本, 持续回到我的项目配置:
构建脚本, 如图:

这个很简略不必解释了哈
构建后操作:

这里测试后我发现第二次构建会有问题, 产生的起因是因为执行 cp 命令时, 如果问价或文件夹已存在, 会提醒是否要笼罩, 这里咱们应用

\cp -r /mydata/nginx/html/manage/dist/* /mydata/nginx/html/manage/
# 斜杠的意思就是间接笼罩并且不询问

而后咱们去本地 push 一波, 拜访线上地址:

而后去本地批改一下, 再去拜访线上地址:

完满~! 历时 17 天, 终于, 跑通了 CD/CD 的流程, 如果你想通过 2 个小时来学习这个流程, 难度应该是比拟大的, 倡议你动起手来, 遇到文件就多查查材料, 置信你也能够学有所获！