CodeBetter
工程化
性能优化
云服务器
项目笔记
三方库
其它
工程化
性能优化
云服务器
项目笔记
三方库
其它

Docker + Jenkins 集成方案

1 准备前端代码仓库

您可以使用 Gitee 或 GitHub 来管理您的前端代码仓库。以下是使用 Gitee 的示例：

image-20241216225305682

2 在服务器中安装 Docker

docker-compose

步骤1：安装 docker

  • Debian和Ubuntu用 apt-get 命令

  • ALinux用 yum 命令

1# 更新系统包索引
2yum update
3
4# 安装 Docker
5sudo yum install docker
6
7# 验证 Docker 是否安装成功
8sudo docker version

步骤2：解决docker容器拉取镜像失败

由于某些原因,直接从 Docker Hub 拉取镜像可能会遇到问题。这时,您可以配置 Docker 使用国内的镜像源来加速镜像的拉取。

（1）编辑 Docker 配置文件

1vi /etc/docker/daemon.json

（2）添加镜像源

按 i 键进入编辑模式,添加以下内容：

这些是国内的一些 Docker 镜像源,可以帮助您加速镜像的拉取。

1{
2    "registry-mirrors": [
3        "https://docker.m.daocloud.io",
4      	"https://noohub.ru",
5      	"https://huecker.io",
6      	"https://dockerhub.timeweb.cloud",
7      	"https://docker.rainbond.cc"
8    ]
9}

（3）保存并退出

按 esc 键退出编辑模式,输入 :wq 保存文件并退出。

（4）重启 Docker 服务

1sudo systemctl daemon-reload
2sudo systemctl restart docker

3 Docker 安装 Jenkins 基础环境

步骤 1：拉取镜像

1docker pull jenkins/jenkins:lts

步骤 2：运行 Jenkins 容器

命令详解
  • docker run 用于创建一个新的容器
  • -u root 设置容器的用户为 root,这意味着 Jenkins 将在具有 root 权限的环境中运行。
  • --name <容器名称> 为新创建的容器指定一个名称。将 <容器名称> 替换为你想要给容器命名的具体名称。
  • -d 以 detached 模式运行容器,即在后台运行。
  • -p 8899:8080 将容器内部的 8080 端口映射到宿主机的 8899 端口。这样,你可以通过宿主机的 8899 端口访问 Jenkins。
  • -p 50000:50000 将容器内部的 50000 端口映射到宿主机的 50000 端口。Jenkins 通常使用这个端口进行某些类型的构建作业。
  • -v jenkins-data:/var/jenkins_home 将宿主机上的 jenkins-data 目录挂载到容器的 /var/jenkins_home 目录。这样,Jenkins 的数据和配置将被持久化存储在宿主机上,即使容器被删除,数据也不会丢失。
  • -v /var/run/docker.sock:/var/run/docker.sock 将宿主机的 Docker socket 文件挂载到容器中。这允许 Jenkins 容器内运行的构建作业访问宿主机的 Docker 守护进程,从而可以构建和操作 Docker 镜像。
  • -v /usr/bin/docker:/usr/bin/docker 将宿主机的 docker 命令的路径挂载到容器中。这通常与上面的 Docker socket 挂载一起使用,以确保 Jenkins 可以执行 Docker 命令。
  • jenkins/jenkins:lts 指定要使用的 Jenkins 镜像,这里是 Jenkins 官方提供的长期支持（LTS）版本。
1docker run -u root --name <容器名称> -d -p 8899:8080 -p 50000:50000 -v jenkins-data:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock -v /usr/bin/docker:/usr/bin/docker -v /www/wwwroot:/www/wwwroot jenkins/jenkins:lts

步骤 3：查看运行的容器

1docker ps

4 配置 Jenkins

步骤 1：开放服务器端口

确保服务器的 8899 和 50000 端口已开放,以便访问 Jenkins 面板和构建作业。

步骤 2：访问 Jenkins 面板

  • 通过公网IP和端口 8899 直接访问 Jenkins,例如：http://<公网IP>:8899
  • 如果想通过域名访问 Jenkins,需要为容器配置反向代理并绑定域名。

image-20241216222837330

步骤 3：获取初始密码

1# 进入到容器下,请将 <容器名称> 替换为你的 Jenkins 容器的实际名称。
2docker exec -it <容器名称> /bin/bash
3
4# 查看初始密码
5cat /var/jenkins_home/secrets/initialAdminPassword

步骤 4：登录并安装推荐插件

使用获取到的初始密码登录 Jenkins 面板,并安装推荐的插件。

image-20241216223008531

步骤 5：创建管理员用户

创建 Jenkins 的第一个管理员用户,填写必要的信息。

image-20241216223350328

步骤 6：实例配置

保持默认的 8899 端口设置,继续完成 Jenkins 的初始配置。

image-20241216223444405

步骤 7：完成安装

按照以上步骤操作后,Jenkins 将完成安装并准备就绪。

image-20241216223505352

5 安装必要插件

在 Jenkins 中安装插件是扩展其功能的重要步骤。

步骤 1：访问 Jenkins 管理界面

登录到 Jenkins 后,点击左侧菜单的 Manage Jenkins。

image-20241216223609438

步骤 2：进入插件管理页面

在管理界面中,点击右侧的 Plugins 选项。

image-20241216223642731

步骤 3：搜索并安装插件

在插件管理页面中,点击左侧的 Available plugins,然后在搜索框中输入以下插件名称进行搜索和安装：

  • nvm-wrapper：这个插件允许 Jenkins 在构建过程中使用特定版本的 Node.js,通过 nvm 来管理 Node.js 的版本。这对于前端项目特别有用,因为它们可能依赖于特定版本的 Node.js 或 npm。
  • Gitee：如果您的项目托管在 Gitee 上,安装 Gitee 插件将允许 Jenkins 直接从 Gitee 仓库检出代码,以及触发构建。

image-20241216224453909

6 配置 Gitee 凭证

在 Jenkins 中配置 Gitee 凭证是自动化构建流程中的重要一步,特别是当您的源代码托管在 Gitee 上时。

步骤 1：访问 Jenkins 管理界面

点击左侧菜单 Manage Jenkins、然后再点击 凭据管理

image-20241216224719029

步骤 2：添加新的凭证

（1）点击 Stores scoped to jenkins 下的全局

image-20241216224745868

（2）点击 Add credentials

image-20241216224815618

（3）填写并保存凭证信息

获取用户名和密码

用户名：Gitee 中仓库下载方式 https 下最后面的 username

image-20241216230729810

密码：Gitee中配置私人令牌

image-20241216230752287

image-20241216230701217

image-20241216230926795

image-20241216231704352

7 创建 jenkins 项目

步骤1：点击菜单左侧 新建 item

image-20241216231743710

步骤 2：填写项目信息

输入项目名称,并选择项目类型为 Freestyle project,然后点击确定。

image-20241216231825474

步骤 3：配置项目

（1）源码管理：选择git

  • Repository URL：选择仓库的 https 链接

  • Credentials：选择之前配置的gitee凭据

（2）构建触发器

选择 Gitee webhook 触发构建,并在 Gitee webhook 中填写 Jenkins 提供的 URL。

  • 选择触发构建的策略,如推送代码和接受 PR。
  • 允许触发构建的分支（可选）。
  • 生成 Gitee WebHook 密码,并在 Gitee 仓库的 WebHooks 设置中使用该密码。

image-20241216232148961

image-20241216232226733

（3）构建环境

选择 Run the build in an NVM managed environment

  • Node version: 20
  • 其他不用填,一会会自动填好

image-20241216232500909

（4）Build Steps

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

image-20241216232527596

创建第一个 执行shell：安装依赖并构建 Vue 项目

1npm i --registry=https://registry.npmmirror.com
2
3npm run build
4
5cp -r ./dist/* /www/wwwroot/codebetter/

（5）保存项目配置

点击 保存 按钮,完成项目配置。

8 立即构建

点击立即构建,测试一下是否能构建成功

image-20241216233118073