前端CI/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项目

然后我们再去gitlab上新建一个项目

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

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

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

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个小时来学习这个流程, 难度应该是比较大的, 建议你动起手来, 遇到文件就多查查资料, 相信你也可以学有所获！