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

bonoCat
7,821 阅读6分钟

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

持续集成

什么是CI/CD

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

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

  1. 持续集成（Continuous Integration，CI）：开发人员将代码不断地提交到源代码管理系统中，该过程中，自动化的测试和构建工具会自动从源代码库中获取最新的代码，进行编译、测试、打包等操作，并生成相应的构建产物。
  2. 持续交付（Continuous Delivery，CD）：将构建产物部署到测试环境，进行测试和验证，最终生成可部署的产物。
  3. 持续部署（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://xxx.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非常重要的一环。针对前端开发的好处是，实现前端的自动化部署，不需要后端开发，手动部署了。非常棒~

avatar
文章
阅读
粉丝