使用 Docker+Jenkins+Jenkins + gitee 实现自动化部署前端项目 CI/CD（centos7为例）_jenkins gitee

文章目录

• 1、CICD
• 2、CI/CD流程图
• 3、docker 的安装
• • 3.1 卸载旧的版本
  • 3.2 安装
• 4、Jenkins 的安装
• • 4.1 拉取 jenkins 镜像
  • 4.2 查看是否拉取成功
  • 4.3 运行Jenkins容器
  • 4.4 查看Jenkins是否正常运行
  • 4.5 访问Jenkins
  • 4.6 jenkins 实例配置
  • 4.7 Jenkins 插件
• 5、配置 Jenkins
• • 5.1 安装Jenkins部署前端项目的插件
  • 5.2 配置node
  • 5.3 配置 SSH
  • 5.4 安装 gitee
• 6、创建前端项目
• 7、创建 Jenkins的构建任务
• • 7.1 创建
  • 7.2 填写 git 地址
  • 7.3 配置构建触发器
  • 7.4 配置构建环境
  • 7.5 配置 Build Steps 构建步骤
  • 7.6 配置 构建后操作
• 8、构建
• 参考链接

1、CICD

CI/CD 代表持续集成（Continuous Integration）和持续交付/部署（Continuous Delivery/Deployment）。
它是一个用于软件开发的实践和工具集，旨在通过自动化来缩短发布软件的周期，确保更快、更可靠的软件交付。

持续集成（CI）：是指开发人员在代码库中频繁合并代码的过程，通常每天多次。每次合并后，自动化测试和构建会立即运行，以确保新代码不会破坏现有功能，并能迅速发现问题。

持续交付（CD - Continuous Delivery）：是在持续集成的基础上，进一步自动化软件的交付过程。通过自动化工具和管道，将经过测试的代码部署到生产环境之外的多个阶段性环境（如测试或预生产环境）。虽然交付是自动的，但发布到生产环境通常仍需要手动批准。

持续部署（CD - Continuous Deployment）：是持续交付的进一步延伸，指的是一旦代码通过了所有自动化测试和质量检查，它就会被自动部署到生产环境，而不需要手动干预。

常见的CICD 方式

• Jenkins：一个非常灵活且强大的开源 CI/CD 工具，支持多种插件，可以与几乎所有主流的编程语言和构建工具集成。
• GitLab CI/CD：与 GitLab 版本控制系统无缝集成，提供从代码提交到自动化测试、构建到部署的完整流程。
• GitHub Actions：GitHub 的自动化流程工具，适合托管在 GitHub 上的项目，易于配置和使用。
• CircleCI：支持并行构建和高度可配置的工作流，是云原生 CI/CD 工具之一。
• Travis CI：另一种广泛使用的 CI/CD 工具，尤其在开源项目中流行。

目前最常见的还是 jenkins 和 gitlab CI/CD

2、CI/CD流程图

1. 开发人员，先将代码提交到 gitlab gitlab请求jenkins的webhook地址，触发持续构建和持续部署流程。
2. Jenkins从Gitlab中拉取项目源码，并且打包编译
3. Jenkins发送SSH远程命令 ，吧 打包好的文件，发送到服务器上
4. Jenkins 完成CICD流程，可以把结果给开发人员，也可以配置钉钉等

3、docker 的安装

‌百度的翻译：Docker是一个开源的应用容器引擎，它允许开发者将应用及其依赖打包到一个可移植的容器中，并在任何流行的Linux或Windows操作系统上发布和运行。‌ 这种技术提供了轻量级的虚拟化，使得容器之间相互隔离且没有直接的系统资源访问，从而简化了开发、测试和部署过程，并支持持续集成和持续部署的自动化流程。Docker的使用极大地提高了软件开发的效率和可靠性，成为现代软件开发中不可或缺的工具之一。通过Docker，开发人员可以消除协作编码时遇到的“在我的机器上可正常运作,而在你的机器上不能正常运作”的问题。运维人员可以利用Docker在隔离容器中并行运行和管理应用，获得更好的计算密度。企业可以利用Docker构建敏捷的软件交付管道，以更快的速度、更高的安全性和可靠性为Linux和Windows Server应用发布新功能‌12。总的来说，Docker通过提供一种轻量级、可移植、高效的容器化解决方案，简化了应用的开发、测试和部署流程，同时提高了软件开发的效率和可靠性。

比如举一个例子，在我们自己的电脑上，一般一个 软件只能装一次，但是在docker 里面多次装 ，浅显的例子，更深层次的作用还没了解到

3.1 卸载旧的版本

YUM（Yellowdog Updater, Modified）是一个基于 RPM（Red Hat Package Manager）包管理的工具，主要用于在 Linux 系统中自动化管理软件包的安装、更新、删除和查询。它通常用于 Red Hat 系列的 Linux 发行版，如 CentOS、Fedora 和 RHEL（Red Hat Enterprise Linux）。 类似于前端的 npm、yarn、pnpm

yum remove docker \\  docker-client \\  docker-client-latest \\  docker-common \\  docker-latest \\  docker-latest-logrotate \\  docker-logrotate \\  docker-engine

3.2 安装

# 1、卸载旧的版本yum remove docker \\  docker-client \\  docker-client-latest \\  docker-common \\  docker-latest \\  docker-latest-logrotate \\  docker-logrotate \\  docker-engine# 2、需要的安装包yum install -y yum-utils# 3、设置镜像的仓库yum-config-manager \\ --add-repo \\ https://download.docker.com/linux/centos/docker-ce.repo # 默认是国外的，很慢！！！yum-config-manager \\ --add-repo \\ http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # 推荐使用阿里云的，十分快yum-config-manager \\ --add-repo \\ https://mirrors.tuna.tsinghua.edu.cn/# 更新yum软件包索引yum makecache fast# 4、安装docker相关引擎 docker-ce 社区版 docker-ee 企业版yum install docker-ce docker-ce-cli containerd.io# 5、启动dockersystemctl start docker# 6、使用docker version查看是否安装成功docker version

出现这个就安装好了

# 7、hello-worlddocker run hello-world

4、Jenkins 的安装

https://hub.docker.com/ 可以进入这个地址搜索 Jenkins ，点击下面图片的这个，别选第一个 ，一定要注意名称正确

4.1 拉取 jenkins 镜像

docker pull jenkins/jenkins

没有报错就可以

4.2 查看是否拉取成功

docker images

出现这个就是成功了

4.3 运行Jenkins容器

docker run -d -uroot -p 10001:8080 -p 10002:50000 --name jenkinsTest01 -v /home/jenkinsTest01:/var/jenkins_home jenkins/jenkins

命令 描述 -d 后台运行容器，并返回容器ID -uroot 使用 root 身份进入容器，推荐加上，避免容器内执行某些命令时报权限错误 -p 10001:8080 将容器内8080端口映射至宿主机10001端口，这个是访问jenkins的端口 –name jenkinsTest01 设置容器名称 -v /home/jenkinsTest01:/var/jenkins_home :/var/jenkins_home目录为容器jenkins工作目录，我们将硬盘上的一个目录挂载到这个位置，方便后续更新镜像后继续使用原来的工作目录 jenkins/jenkins 镜像的名称，这里也可以写镜像ID

注意：

1. 前后顺序一定不能乱，一定要保证 jenkins/jenkins 在最后
2. 服务器要开放 10001 端口。Jenkins默认是 8080 我们用容器创建的，外面访问的端口就是 10001 你也可以指定其他的，别冲突了就好

使用下面这个命令可以查看，创建这个容器时候的脚本

docker inspect --format=\'docker run -d -p {{range $p, $b := .HostConfig.PortBindings}}{{$p}}:{{(index $b 0).HostPort}} - {{end}} --name {{.Name}} -v {{range .HostConfig.Binds}}{{.}} - {{end}} {{.Config.Image}}\' 容器ID

4.4 查看Jenkins是否正常运行

第一列就是 容器 ID ，最后一列就是 容器 Name ，这样的话就是正常， 如若出现了 exit 那就是有问题了

看服务器 的 /home 文件下也有了 jenkinsTest01

4.5 访问Jenkins

可以使用服务器的公网IP地址+刚刚配置的10001端口号进行访问，第一次进来时 下面这个样子

获取密码的两种方式

1. 直接去服务器的这个路径下找就可以，如若时用的链接服务器的可视化软件
2. 在服务器上执行 cat /home/jenkinsTest01/secrets/initialAdminPassword ，因为 图片上提示的这个地址，已经被映射到 宿主机 上了，所以也可以直接查看宿主机的目录
3. 进入docker 容器，去图片上这个路径看
4. 还有一个这个方式查看 docker logs jenkins

下面这一串东西就是密码

填上这四个信息就可以， 一定义注意备份，别忘了

点击保存并完成

4.6 jenkins 实例配置

点击上一步的 保存并完成，就会进入这个界面，这个界面一般是默认的不需要修改什么东西

4.7 Jenkins 插件

选择 安装推荐的插件 就可以

这样就是完成了

5、配置 Jenkins

你的服务器公网IP地址+Jenkins 端口号 ， 就可以访问了，进来应该是差不多这个样子

有一个任务时因为我刚刚测试了一下

5.1 安装Jenkins部署前端项目的插件

点击 系统管理 => 插件管理 需要安装 node.js、gitee、Publish Over SSH 这三个

选择，下面这个红色框的这个， 然后搜索 NodeJS、Publish Over SSH 安装这俩个插件

然后点击安装就可以，安装后出现下面这个图，其实可以不选择安装完成后重启 Jenkins， 我测试的时候没啥影响

5.2 配置node

然后往下翻，翻到最后吧 差不多。 就会出现 nodejs

点击新增

这个地方，需要你填写一个 别名 和 选择一个版本号
然后 点击一下 新增安装 会出现下面这个图的样子，选择红框的这个

默认的这个使用的是 nodejs.org 的官方源，官方源太慢了，换成 阿里的吧

选择完这个红框后，会有一个必填项

这个里面填写 https://mirrors.aliyun.com/nodejs-release/

然后点击保存即可

5.3 配置 SSH

选择 系统管理 => 系统管理 翻到最下面会看到 SSH Servers

，可随意填写Hostname服务器地址，ip 或 域名UsernameSSH 登录的用户名Remote DirectorySSH 登录后进入的目录，必须是服务器中已经存在的目录，设置好之后所有通过 SSH 上传的文件只能放在这个目录下

字段解释 名称 Name 显示在 Jenkins 中的名称 Hostname 服务器地址，ip或域名 Username SSH 登录的用户名 Remote Directory 登录后进入的目录，必须是服务器中已经存在的目录，设置好之后所有通过SSH上传的文件只能放在这个目录下 passphrase 服务器的密码

设置好可以通过Test Configuration，测试 SSH 连通性：

出现 Success 代表 SSH 配置成功。

比如这里， 我链接到了服务器的 /home/www/test01 路径下

然后点击保存就可以

5.4 安装 gitee

直接安装就可以了

6、创建前端项目

可以用 vite 快速创建一个项目，并且上传到 gitee，项目最好改成公开的吧

npm create vite@latest

然后输入项目名称 ， 然后 初始化 git、 把文件放到暂存区，提交代码，推送远程仓库，下面的代码以此执行就可以

git initgit add .git commit -m \"初始化CICD\"git remote add origin https://gitee.com/xxxxx/xxxxxxxxxx.gitgit push -u origin \"master\"

7、创建 Jenkins的构建任务

7.1 创建

点击 新建任务

输入 任务名称，然后选择 构建一个自由风格的软件项目 ，然后 点击确定

7.2 填写 git 地址

选择 git，填写 项目地址

7.3 配置构建触发器

就是什么时候触发，构建

构建触发器，这里选择 gitee webhook ，然后选择 推送代码 这个地址还需要在其他地方配置一下，进入gitee 官网，登录自己的账号

点击 添加webhook

7.4 配置构建环境

选择 Provide Node & npm bin/ folder to PATH ， 然后选择一个node版本

7.5 配置 Build Steps 构建步骤

点击 增加构建步骤，选择 执行 shell

输入下面的代码

 node -v npm -v npm config set registry https://registry.npmmirror.com npm config get registry rm -rf node_modules rm -rf dist npm install npm run build

一定要更改下载源，不然就会很慢

7.6 配置 构建后操作

选择 Send build artifacts over SSH

• Source files 字段一定要写成dist/**/**，如果写成dist/*，则只会将第一层的文件上传。
• Remove prefix 需要填写，否则会将dist这个目录也上传到服务器上。
• Remote directory 是相对于配置 SSH Server 时的 Remote directory 的，
• Exec command 是文件上传后执行的命令，可以是任何命令，可以是让nginx有权限访问这些数据，重启nginx等等，根据服务器实际情况更改。

这里有一点需要注意

---

然后点击保存

8、构建

可以点击这个进行立即构建，

这样就对了

也可以自己在前端，做一些改动，然后 git push 到 gitee ，Jenkins 就会监听到了，然后重新打包，把 打包后的文件，放到 服务器

参考链接

• jenkins/jenkins
• docker centos 安装方式

奶粉品牌