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

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

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

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

yum install -y git

查看是否安装成功

git --version

 生成秘钥

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

查看公钥

cat ~/.ssh/id_rsa.pub

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

直接查看 菜鸟教程

安装完之后,配置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镜像输出示例:

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

rpm -qa |grep docker

作用

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

示例输出  启动Docker服务：

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

  sudo systemctl start docker
  sudo systemctl enable docker
  

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

可以命令创建或者相关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

完成后目录结构如下： 

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;



}

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

cd /docker/compose

docker-compose up -d

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

查看运行状态

docker-compose ps -a

示例输出

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

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

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

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

 查看jenkins初始密码

docker logs jenkins

安装插件

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

• Publish Over SSH配置远程服务器

 找到SSH Servers

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

• NodeJS配置

 找到Nodejs 

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

阿里云node镜像地址

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

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

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

选择自由风格 

• 配置git仓库地址 
• 构建环境 在 Jenkins 中将 Node.js 和 npm 的 bin 文件夹添加到 PATH 中，否则可能就会报错。 
• 选择nodejs版本

• 创建shell命令

• 自动部署到对应环境项目目录：上面打包到了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
  

  2. 然后Add build step选择Send files or execute commands over SSH，Send files or execute
  3. 通过SSH连接到远程服务器执行命令和发送文件：