打造前端自己的CI/CD集成环境

系统运维 2023-09-28 大猫 手机阅读

以前总听说过CI/CD，那什么是CI/CD呢？平时开发过程中，使用到流水线，对项目进行构建，构建完成后，就能直接发布到测试环境，这个是如何实现的呢？

持续集成

什么是CI/CD

CI/CD是Continuous Integration and Continuous Delivery/Deployment的缩写，意思是持续集成和持续交付/部署。CI/CD是一种软件开发流程模型，旨在通过自动化和持续性的构建、测试、部署和交付过程，来提高软件开发和发布的效率和质量。CI/CD的目标是缩短软件开发和发布的周期，降低开发和发布的成本和风险，以满足快速变化和不断迭代的业务需求。

CI/CD主要包括三个环节：

  • 持续集成（Continuous Integration，CI）：开发人员将代码不断地提交到源代码管理系统中，该过程中，自动化的测试和构建工具会自动从源代码库中获取最新的代码，进行编译、测试、打包等操作，并生成相应的构建产物。
  • 持续交付（Continuous Delivery，CD）：将构建产物部署到测试环境，进行测试和验证，最终生成可部署的产物。
  • 持续部署（Continuous Deployment，CD）：将构建产物部署到生产环境，实现自动化的部署和发布，从而实现快速的交付和迭代。

    • 本次，我们就需要自己实现一套 CI/CD 环境，实现前端页面快速集成、快速部署。

    截屏2023-08-30 08.52.14.png

    JENKINS环境配置

    JENKINS基于Docker安装

    详细步骤及介绍，还请查阅
    JENKINS官方文档

    以下摘录了，主要安装步骤：

    docker network create jenkins

    docker run --name jenkins-docker --rm --detach 
  --privileged --network jenkins --network-alias docker 
  --env DOCKER_TLS_CERTDIR=/certs 
  --volume jenkins-docker-certs:/certs/client 
  --volume jenkins-data:/var/jenkins_home 
  --publish 2376:2376 
  docker:dind --storage-driver overlay2

    本地创建 Dockerfile 文件，文件内容如下

        FROM jenkins/jenkins:2.414.1-jdk17
    USER root
    RUN apt-get update && apt-get install -y lsb-release
    RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc 
      https://download.docker.com/linux/debian/gpg
    RUN echo "deb [arch=$(dpkg --print-architecture) 
      signed-by=/usr/share/keyrings/docker-archive-keyring.asc] 
      https://download.docker.com/linux/debian 
      $(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
    RUN apt-get update && apt-get install -y docker-ce-cli
    USER jenkins
    RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"
    

    docker build -t myjenkins-blueocean:2.414.1-1 .

    使用以下 docker run 命令在 Docker 中将自己的映像作为容器运行：myjenkins-blueocean:2.414.1-1

    docker run --name jenkins-blueocean --restart=on-failure --detach 
  --network jenkins --env DOCKER_HOST=tcp://docker:2376 
  --env DOCKER_CERT_PATH=/certs/client --env DOCKER_TLS_VERIFY=1 
  --publish 8080:8080 --publish 50000:50000 
  --volume jenkins-data:/var/jenkins_home 
  --volume jenkins-docker-certs:/certs/client:ro 
  myjenkins-blueocean:2.414.1-1

    JENKINS页面配置

    点击8080进入Jenkins的页面，进行Jenkins的安装

    截屏2023-08-29 09.52.26.png

    安装过程中，遇到jenkins需要输入管理员密码，该密码在log日志里面，可以通过页面进行查看：

    截屏2023-08-29 09.47.38.png

    也可以通过命令行查看

    sudo docker logs -f jenkins-blueocean

    安装推荐的插件就可以了

    截屏2023-08-29 09.54.14.png

    这个时候，就只要耐心的等待

    截屏2023-08-29 09.54.44.png

    安装完成后，需要对用户信息，实例进行配置，这就完成了。

    截屏2023-08-29 10.00.02.png

    终于看到，我们的Jenkins的页面了

    截屏2023-08-29 10.00.40.png

    可以看出Docker安装Jenkins非常简单，减少了很多环境的配置工作。

    关于，如何安装Docker环境，可以参照我的另外一篇文章如何通过Docker部署Vue项目？

    流水线配置

    由于，我们版本管理使用ssh方式，因此，需要先进行公私钥生成

    ssh-keygen -t rsa

    我们将公钥配置到gitLib中，私钥配置到jenkins中

    在gitLib中，进行公钥配置

    截屏2023-09-26 14.04.23.png

    在jenkins中，进行私钥的配置

    截屏2023-09-26 14.05.47.png

    下面就是进行流水线的配置了

    新建一个Item
    截屏2023-09-26 14.07.44.png

    使用freeStyle project

    截屏2023-09-26 14.09.54.png

    导入源码时，遇到了问题。

    截屏2023-09-26 14.27.39.png

    由于没有配置域名，需要设置主机IP。在docker的jenkins容器中，做如下配置

    /etc/gitlab/gitlab.rb

    在 gitlab.rb中，添加主机ip（自己电脑）

    external_url 'http://172.31.136.104'

    添加之后，继续报错

    ...
stderr: No ED25519 host key 
...

    需要修改安全策略，将Host Key Verification Strategy，设置为 No verification

    截屏2023-09-26 16.33.52.png

    在线打包配置

    添加node支持，需要安装nodeJS。我这边是安装好的，还没有安装的，需要在可用插件去下载

    截屏2023-09-26 17.29.56.png

    接下来，需要在全局工具配置中，添加node的版本。下次使用的时候，会自动进行下载安装

    截屏2023-09-26 17.29.31.png

    添加构建脚本，这个和我们本地开发的保持一致就可以

    截屏2023-09-26 17.51.07.png

    最后，添加归档文件，就是build产生的文件
    截屏2023-09-26 17.51.46.png

    构建完成后，我们可以看到产物了
    截屏2023-09-26 17.48.07.png

    构建完成后，我们希望可以自动部署。下面看下如何进行自动部署吧

    自动发布

    自动化部署，主要是使用Publish Over SSH进行发布。首先，进行Publish Over SSH的安装

    截屏2023-09-26 23.06.30.png

    进行Publish Over SSH的配置。

    前端服务器配置，详见
    # 如何通过Docker部署Vue项目？但是，这里缺少ssh服务，因此，需要修改Dockerfile文件。完整的Dockerfile文件显示如下：

        # 使用基础镜像  
    FROM  centos:7.9.2009

    # 安装SSH
    RUN yum install -y openssh-server sudo 
    RUN sed -i 's/usepam yes/usepam no/g' /etc/ssh/sshd_config 

    RUN useradd admin
    RUN echo "admin:admin" | chpasswd
    RUN echo "admin  all=(all)    all" >> /etc/sudoers

    RUN ssh-keygen -t dsa -f /etc/ssh/ssh_host_dsa_key
    RUN ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key

    RUN mkdir /var/run/sshd

    # 安装nginx epel-release 为额外软件包的仓库
    RUN yum install -y epel-release 
    RUN yum install -y nginx

    # 配置nginx
    COPY nginx.conf /etc/nginx/nginx.conf

    RUN mkdir /app && chmod -R 777 /app

    # 启动nginx服务 和 SSH服务
    # 创建启动脚本  
    COPY start.sh /start.sh  
    RUN chmod +x /start.sh  
    
    # 在容器启动时运行启动脚本  
    CMD ["/start.sh"]

    # 对外暴露 22 和 80
    EXPOSE 22 80

    运行下，我们来验证下。ssh连接，我这边设置的映射端口是1，密码是admin。成功连接！

    ➜  Demo ssh admin@xxx.31.136.104 -p 1
admin@xxx.31.136.104's password:
Environment:
  LANG=zh_CN.UTF-8
  LC_CTYPE=zh_CN.UTF-8
  USER=admin
  LOGNAME=admin
  HOME=/home/admin
  PATH=/usr/local/bin:/usr/bin
  MAIL=/var/mail/admin
  SHELL=/bin/bash
  SSH_CLIENT=172.17.0.1 47998 22
  SSH_CONNECTION=172.17.0.1 47998 172.17.0.3 22
  SSH_TTY=/dev/pts/0
  TERM=xterm-256color
[admin@c07141bd2b3b ~]$

    80端口的情况，是可以访问的。内容还没有，所以现在显示的是500

    截屏2023-09-27 11.51.47.png

    现在，就可以在Jenkins进行配置了，要实现Jenkins的制品能够自动推送到前端服务器中。

    截屏2023-09-27 12.02.03.png

    打包流水的配置，编译后添加部署模块。其中，Verbose output in console一定要勾上，不然ssh日志不会展示，影响异常定位。

    截屏2023-09-27 15.51.15.png

    Source files：Jenkins打包后的文件，这里使用通配符，所有vue-project/dist/下的文件，包含vue-project/dist/

    Remove prefix: 删除vue-project/dist/保留vue-project/dist/下的所有文件

    Remote directory：目标服务器的目录，即上面配置的web服务器的目录（nginx配置的文件根目录）。

    这里需要注意的是文件的权限。我们将/app/文件夹，使用chmod -R 777赋予所有用户对/app 目录的读写执行权限。

    截屏2023-09-27 15.58.35.png

    现在就构建成功了，前端页面可以正常显示。

    截屏2023-09-27 16.00.24.png

    好了，现在就可以看到，通过Jenkins编译，部署，实现页面显示。这种方式也是现在Devops非常重要的一环。针对前端开发的好处是，实现前端的自动化部署，不需要后端开发，手动部署了。非常棒~