Jenkins：运维早搞定了，但我就是想偷学点前端CI/CD！

stringtiky
5,073 阅读5分钟

前言：运维已就绪，但好奇心作祟

  • 背景故事： 虽然前端开发人员平时可能不会直接操控Jenkins，运维团队已经把这一切搞得井井有条。然而，你的好奇心驱使你想要深入了解这些自动化的流程。本文将带你一探究竟，看看Jenkins如何在前端项目中发挥作用。
  • 目标介绍： 了解Jenkins如何实现从代码提交到自动部署的全过程，并学习如何配置和优化这一流程。

Jenkins基础与部署流程

1. Jenkins到底是个什么东西？

  • Jenkins简介： Jenkins是一个开源的自动化服务器，用于持续集成和持续交付。它能够自动化各种开发任务，提高开发效率和软件质量。
  • 核心功能： Jenkins可以自动化构建、测试和部署任务，帮助开发团队实现快速、高效的开发流程。

2. 自动化部署流程详解

  • 流程概述： 本文将重点介绍前端自动化部署的完整流程，包括代码提交、构建、打包、部署等步骤。具体流程如下：

    1. 代码提交：

      • 开发人员通过 git push 将代码提交到远程仓库。

    2. 触发Jenkins自动构建：

      • Jenkins配置为在代码提交时自动触发构建任务。

    3. 拉取代码仓库代码：

      • Jenkins从仓库拉取最新代码。

    4. 构建打包：

      • Jenkins运行构建命令（如 npm run build），将源代码编译成可部署版本。

    5. 生成dist文件：

      • 构建生成 dist 文件夹，包含打包后的静态资源。

    6. 压缩dist文件：

      • 使用压缩工具（如 tar 或 zip）将 dist 文件夹压缩成 dist.tar 或 dist.zip。

    7. 迁移到指定环境目录下：

      • 将压缩包迁移到目标环境目录（如 /var/www/project/）。

    8. 删除旧dist文件：

      • 删除目标环境目录下旧的 dist 文件，以确保保留最新版本。

    9. 解压迁移过来的dist.tar：

      • 在目标环境目录下解压新的 dist.tar 文件。

    10. 删除dist.tar：

      • 解压后删除压缩包，节省存储空间。

    11. 部署成功：

      • 自动化流程完成，新的前端版本已经成功部署。

准备工作

服务器配置：

  • 操作系统: CentOS7.9
  • CPU: 2核
  • 内存: 2GB
  • 系统盘: SSD云硬盘 40GB

项目 fork的大佬的开源项目soybean-admin

话不多说干就完了！！！

安装git

yum install -y git

查看是否安装成功

git --version

image.png 生成秘钥

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

查看公钥

cat ~/.ssh/id_rsa.pub

image.png 将公钥添加到GitHub或其他代码库的SSH Keys

image.png

Docker安装

直接查看 菜鸟教程

安装完之后,配置docker镜像源详情参考 24年6月国内Docker镜像源失效解决办法...

编辑 /etc/resolv.conf 文件：

sudo vim /etc/resolv.conf

添加或修改以下行以使用 Cloudflare 的 DNS 服务器：

nameserver 1.1.1.1
nameserver 1.0.0.1

创建完成的docker-hub镜像输出示例:

image.png 查看docker相关的rpm源文件是否存在

rpm -qa |grep docker

作用

  • rpm -qa：列出所有已安装的 RPM 包。
  • grep docker：筛选出包名中包含 docker 的条目。

示例输出 image.png 启动Docker服务：

  • 启动Docker服务并设置为开机自启：

    sudo systemctl start docker
sudo systemctl enable docker

Docker安装Docker Compose

Docker Compose 可以定义和运行多个 Docker 容器应用的工具。它允许你使用一个单独的文件（通常称为 docker-compose.yml）来配置应用程序的服务，然后使用该文件快速启动整个应用的所有服务。

第一步，下载安装

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

第二步，查看是否安装成功

docker-compose -v

在这里插入图片描述

第三步，给/docker/jenkins_home 目录设置最高权限，所有用户都具有读、写、执行这个目录的权限。（等建了/docker/jenkins_home目录之后设置）

chmod 777 /docker/jenkins_home

创建Docker相关文件目录

可以命令创建或者相关shell可视化工具创建， 命令创建如下:

mkdir /docker 
mkdir /docker/compose 
mkdir /docker/jenkins_home 
mkdir /docker/nginx 
mkdir /docker/nginx/conf 
mkdir /docker/html 
mkdir /docker/html/dev 
mkdir /docker/html/release
mkdir /docker/html/pro

创建docker-compose.yml、nginx.conf配置文件

cd /docker/compose touch docker-compose.yml 
cd /docker/nginx/conf touch nginx.conf

完成后目录结构如下： image.png

image.png

编写nginx.conf

user  nginx;
worker_processes  1;
 
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
 
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
    access_log  /var/log/nginx/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    keepalive_timeout  65;
 
    gzip  on;

    #dev环境
    server {
        #监听的端口
        listen  8001;
        server_name  localhost;
        #设置日志
        access_log  logs/dev.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/dev/dist;
#              root  /home/html/dev/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }

    #release环境
    server {
        #监听的端口
        listen  8002;
        server_name  localhost;
        #设置日志
        access_log  logs/release.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/release/dist;
#              root  /home/html/release/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }

 
    #pro环境
    server {
        #监听的端口
        listen  8003;
        server_name  localhost;
        #设置日志
        access_log  logs/pro.access.log  main;

        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/pro/dist;
#              root  /home/html/pro/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }
#    include /etc/nginx/conf.d/*.conf;

   
}

编写docker-compose.yml


networks:
  frontend:
    external: true

services:
  docker_jenkins:
    user: root                                 # root权限
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts   # 使用的镜像
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8999:8080
      - 50000:50000
    environment: 
    - TZ=Asia/Shanghai ## 设置时区  否则默认是UTC
    #- "JENKINS_OPTS=--prefix=/jenkins_home"
    ## 自定义 jenkins 访问前缀（设置了的话访问路径就为你的ip:端口/jenkins_home，反之则直接为ip:端口）
    volumes:    # 卷挂载路径
      - /docker/jenkins_home/:/var/jenkins_home   
      # 挂载到容器内的jenkins_home目录 
      # docker-compose up 就会自动生成一个jenkins_home文件夹
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  
  docker_nginx_dev:
    restart: always
    image: nginx
    container_name: nginx_dev
    ports:
      - 8001:8001
    volumes:  
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /docker/html:/usr/share/nginx/html
      - /docker/nginx/logs:/var/log/nginx

  docker_nginx_release:
    restart: always
    image: nginx
    container_name: nginx_release
    ports:
      - 8002:8002
    volumes:
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /docker/html:/usr/share/nginx/html
      - /docker/nginx/logs:/var/log/nginx
    environment:
      - TZ=Asia/Shanghai
      
  docker_nginx_pro:
    restart: always
    image: nginx
    container_name: nginx_pro
    ports:
      - 8003:8003
    volumes:
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /docker/html:/usr/share/nginx/html
      - /docker/nginx/logs:/var/log/nginx

启动Docker-compose

cd /docker/compose
docker-compose up -d

此时就会自动拉取jenkins镜像与Nginx镜像

查看运行状态

docker-compose ps -a

示例输出

image.png

验证Nginx

在/docker/html/dev/dist 目录下新建index.html，文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Nginx</title>
</head>
<body>
    <h1>Hello Nginx</h1>
</body>
</html>

浏览器打开，输入服务器地址:8001看到下面的页面说明nginx配置没问题，同样的操作可测试下8002端口和8003端口

image.png

验证Jenkins

浏览器输入服务器地址:8999

image.png 查看jenkins初始密码

docker logs jenkins

image.png

安装插件

image.png

image.png

安装Publish Over SSH、NodeJS

【Dashboard】——>【Manage Jenkins】——>【Plugins】——>【Available plugins】，搜索Publish Over SSH、NodeJS，安装后重启。 image.png

image.png

  • Publish Over SSH配置远程服务器

image.png 找到SSH Servers

image.png

image.png 点击Test Configuration 显示successs则成功，之后再Apply并且Save。

image.png

  • NodeJS配置

image.png 找到Nodejs image.png

坑点!!! 使用阿里云镜像 否则会容易报错

image.png image.png

阿里云node镜像地址

https://mirrors.aliyun.com/nodejs-release/

image.png

添加凭据

添加凭据，也就是GitHub或者其他远程仓库的凭据可以是账号密码也可以是token，方便之后使用。话不多说，Lets go！

image.png

image.png 我这里使用的是ssh，原因用账号密码拉不下来源码不知道为啥

image.png

创建Job

image.png

选择自由风格 image.png

  • 配置git仓库地址 image.png

  • 构建环境 在 Jenkins 中将 Node.js 和 npm 的 bin 文件夹添加到 PATH 中，否则可能就会报错。 image.png

  • 选择nodejs版本

image.png

image.png

  • 创建shell命令

image.png

image.png

  • 自动部署到对应环境项目目录：上面打包到了Jenkins中的workspace中，但是我们设置的项目环境路径跟这个不同，比如开发环境项目目录是/docker/html/dev/dist/，所以需要打包后，把dist文件内容推送到/docker/html/dev/dist/目录下
    1. 修改一下上面的shell脚本
       #!/bin/bash
   echo "Node版本："
   node -v 
   pnpm i
   echo "依赖安装成功"
   pnpm build
   echo "打包成功"
   rm -rf dist.tar     # 每次构建删除已存在的dist压缩包
   tar -zcvf dist.tar ./dist  #将dist文件压缩成dist.tar
   echo $PATH
    1. 然后Add build step选择Send files or execute commands over SSH，Send files or executeimage.png
    2. 通过SSH连接到远程服务器执行命令和发送文件：

image.png ps:脚本解释

  • cd /docker/html/dev

    • 切换到 /docker/html/dev 目录。这是你要进行操作的工作目录。

  • rm -rf dist/

    • 递归地删除 dist/ 目录及其所有内容。这是为了确保旧的 dist 目录被完全移除。

  • tar zxvf dist.tar

    • 解压 dist.tar 文件，并将其中的内容解压到当前目录下。通常，dist.tar 会包含 dist/ 目录，解压后就会生成一个新的 dist/ 目录。

  • rm dist.tar

    • 解压完成后，删除 dist.tar 文件。这样可以节省存储空间并清理不再需要的压缩包。

至此全部配置完成

  • 测试ci/cd 点击Build Now开始构建

image.png

查看构建中任务的Console Output，日志出现 Finished: SUCCESS即为成功

image.png

预览产物: image.png

其他配置

GitHub webHooks配置

image.png payload URL 为：http://ip:jenkins端口/github-webhook/ image.png

在Github webHooks创建好后，到jenkins中开启触发器 image.png 这样配置完后在push到相应分支就会自动构建发布

其他的个性化配置例如：钉钉通知、邮箱通知、pipeline配置等等就不做学习了，毕竟运维的事，我也学不会。😊😊

完结撒花🎉🎉🎉

avatar
文章
阅读
粉丝