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

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、启动docker
systemctl start docker
# 6、使用docker version查看是否安装成功
docker version

在这里插入图片描述

出现这个就安装好了

# 7、hello-world
docker 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.jsgiteePublish Over SSH 这三个

在这里插入图片描述

选择,下面这个红色框的这个, 然后搜索 NodeJSPublish 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或域名
UsernameSSH 登录的用户名
Remote Directory登录后进入的目录,必须是服务器中已经存在的目录,设置好之后所有通过SSH上传的文件只能放在这个目录下
passphrase服务器的密码

设置好可以通过Test Configuration,测试 SSH 连通性:

在这里插入图片描述

出现 Success 代表 SSH 配置成功。

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

然后点击保存就可以

5.4 安装 gitee

在这里插入图片描述

直接安装就可以了

6、创建前端项目

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

npm create vite@latest

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

git init
git add .
git commit -m "初始化CICD"
git remote add origin https://gitee.com/xxxxx/xxxxxxxxxx.git
git 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 就会监听到了,然后重新打包,把 打包后的文件,放到 服务器

参考链接

### 回答1: Jenkins是一款流行的自动化构建工具,可以用来自动部署Gitee项目。以下是大致的步骤: 1.Jenkins中安装Gitee插件,以便能够连接到Gitee仓库。 2.Jenkins中创建一个新的构建任务,选择“自由风格项目”。 3. 在构建任务的配置中,选择“源码管理”,然后选择Gitee作为源代码管理工具。输入Gitee仓库的URL和凭据信息。 4. 在构建任务的配置中,选择“构建触发器”,然后选择“轮询SCM”。这将使Jenkins定期检查Gitee仓库是否有新的提交。 5. 在构建任务的配置中,选择“构建环境”,然后选择“执行shell脚本”。在脚本中输入需要执行的命令,如编译、打包、部署等。 6. 保存并运行构建任务。Jenkins将自动从Gitee仓库拉取最新的代码,并执行指定的命令。 需要注意的是,以上步骤仅为大致流程,具体操作可能会因环境和需求而有所不同。建议在实际操作中参考JenkinsGitee的官方文档,以确保正确性和安全性。 ### 回答2: Jenkins是一款开源的持续集成工具,具有很好的自动化部署功能。Gitee是国内一款非常流行的代码托管平台,许多开发者使用Gitee托管自己的代码并管理项目。本文将介绍如何使用Jenkins实现自动部署Gitee项目。 一、准备工作 1、安装Jenkins服务器; 2、安装Gitee插件; 3、在Gitee上创建一个代码仓库; 4、在Gitee上生成一个SSH公钥,并将其添加到Jenkins系统中。 二、创建Jenkins任务 1、登录Jenkins服务器; 2、点击“新建任务”,选择“构建一个自由风格的软件项目”; 3、输入任务名称; 4、填写代码仓库的SSH地址; 5、选择版本库的分支或标签; 6、填写用户认证信息(包括Gitee的用户名和私钥); 7、选择“Execute shell”或“Execute Windows batch command”以指定构建或部署脚本; 8、保存并离开。 三、构建Jenkins任务 1、点击任务名称; 2、点击“构建触发器”,选择“Build when a change is pushed to Gitee”; 3、点击“保存”并离开。 四、更新代码并触发构建 1、在Gitee上更新代码,推送到分支或标签; 2、等待Jenkins自动触发构建并部署代码。 总结来说,Jenkins自动部署Gitee项目实现步骤主要是在Gitee上创建代码仓库并生成SSH密钥,然后在Jenkins上创建一个任务并配置任务的构建和部署脚本,最后在Gitee上更新代码并触发构建即可实现自动化部署Jenkins自动化部署功能极大地提升了代码管理和项目部署效率,许多开发者在实际开发中也会应用到这个功能。 ### 回答3: Jenkins是一种自动化部署工具,它可以帮助我们快速、自动化部署我们的代码。Gitee则是国内一个非常流行的代码托管平台,许多团队都选择在Gitee上进行项目管理、代码托管和协作开发。 在使用Jenkins自动部署Gitee项目之前,需要确保一些基础设施已经准备好。首先,你需要一台可以运行Jenkins的服务器。其次,你需要一个Gitee账户,以便可以在Gitee上创建和管理你的项目。最后,你需要一个可用的代码仓库,其中包含需要自动部署的代码。 安装Jenkins 在开始之前,你需要先安装Jenkins。你可以从Jenkins官方网站下载并安装Jenkins。按照官方文档的步骤进行安装即可。 创建Gitee项目 在你的Gitee账户上创建一个新的项目。在创建项目过程中,你需要选择Git仓库初始化方式、默认分支等等。确保在项目创建过程中勾选Git公钥。 设置Jenkins环境 安装好Jenkins之后,你需要设置Jenkins的环境,以便可以自动部署Gitee项目。你可以使用Jenkins插件来配置Jenkins环境。 安装插件 首先,你需要安装一些插件。这些插件可以帮助你完成自动化部署的各个步骤。你可以在Jenkins的Plugin Manager中搜索并安装这些插件。 配置插件 安装好插件之后,你需要按照各个插件的要求进行设置。这些设置包括项目名称、版本号、构建环境等等。 设置Git 接下来,你需要在Jenkins中配置Git。你需要提供Git仓库的URL、认证信息、分支等等。 配置构建脚本 在Jenkins中配置构建脚本。构建脚本用于编译代码、运行测试等等。你可以使用各种构建脚本语言,如Bash、Python等等。 设置自动化部署 最后,你需要在Jenkins中设置自动化部署。你需要提供目标服务器的IP地址、认证信息、目标路径等等。在完成这些设置后,Jenkins就可以开始自动化部署Gitee项目了。 总结 使用Jenkins自动部署Gitee项目可以大大简化了开发流程,提高了团队的生产力和敏捷性。在上面的步骤中,你学习了如何安装Jenkins、创建Gitee项目、配置Jenkins环境、设置Git、配置构建脚本以及设置自动化部署。希望这些步骤能够帮助你快速上手使用Jenkins自动部署Gitee项目
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值