服务器资源与角色身份角色ip版本服务器Gitlab10.0.0.133Rocky Linux 9服务器Jenkins10.0.0.134Rocky Linux 9服务器Web10.0.0.135Rocky Linux 9中间件Nginx-1.20.1中间件Git-2.47.3在Gitlab和Jenkins部署好后我们就可以通过在Gitlab上传项目代码然后通过配置Jenkins拉取并发布先从最简单的前端静态页面开始。首先我们理一下思路与步骤1、Gitlab创建项目仓库与代码文件2、Jenkins拉取代码文件到服务器本地3、Jenkins将拉取到本地的代码文件推送到web服务器指定目录4、web服务器通过nginx代理代码文件所在目录一、Gitlab配置仓库1.创建项目Gitlab创建项目2.上传前端文件在项目创建好后我们添加一个简单的前端页面文件myweb.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlemyweb - v1.0.0/title style body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; font-size: 24px; color: #333; background-color: #f5f5f5; } .content-box { background-color: #e8f4f8; border: 1px solid #2d7d9a; padding: 20px 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /style /head body div classcontent-boxmyweb前端页面 --v1.0.0/div /body /html然后我们点击上传文件到Gitlab上传文件二、Jenkins配置任务1.创建任务在Jenkins主页点击新建任务创建一个自由风格的项目Jenkins创建任务2.拉取代码文件当任务创建完成后我们需要配置任务从Gitlab拉取我们的代码所以我们需要配置Gitlab仓库的项目地址首先打开Gitlab主页复制项目的http地址这里因为10.0.0.133虚拟机部署的Gitlab卡顿用我服务器上已经按以上步骤配置好的仓库配置任务然后在Jenkins的myweb任务配置中进行源码管理我们添加好仓库信息并应用保存后可以先构建一下验证配置以及Jenkins是否能成功拉取到代码通过点击构建后控制台输出可以看到在Gitlab提交文件时编辑的信息以及最后该次构建的成功信息源码管理3.推送前配置Jenkins推送代码到web服务器时本质是先ssh到指定服务器后通过scp命令传输相关文件所以我们在推送代码之前先要让Jenkins服务器可以免密登录web服务器- Jenkins服务器生成密钥对# 切换Jenkins用户 sudo -u jenkins bash # 生成 RSA 密钥对 ssh-keygen -t rsa -b 2048 # 一直回车直到: Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa Your public key has been saved in /root/.ssh/id_rsa.pub The key fingerprint is: SHA256:KHQt8LS6OVrHdf97MuMB6Hj9lfKzJwELaob2GOJjA0w rootJenkins The keys randomart image is: ---[RSA 2048]---- | . . | | o | | . . | | E. o o ... | | o o ..S.o..o | | o .. o... .| | ooo*. o o..o.| | oo. .. oBo| | .. o .X| ----[SHA256]-----执行后会生成公私钥密钥对私钥/root/.ssh/id_rsaJenkins 服务器本地保留 公钥/root/.ssh/id_rsa.pubWeb 服务器保留- 发送公钥到web服务器# 发送公钥到web服务器 ssh-copy-id root10.0.0.135 # 先输入yes后输入web服务器10.0.0.135的root密码 /bin/ssh-copy-id: INFO: Source of key(s) to be installed: /var/lib/jenkins/.ssh/id_rsa.pub The authenticity of host 10.0.0.135 (10.0.0.135) cant be established. ED25519 key fingerprint is SHA256:Ycnw5RwWOYG9NgeAhlOOQfVhmTbTiKzlg6rs8Kx/BQ. This key is not known by any other names Are you sure you want to continue connecting (yes/no/[fingerprint])? yes # 输入yes /bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed /bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys root10.0.0.135s password: # 输入root密码 Number of key(s) added: 1 Now try logging into the machine, with: ssh root10.0.0.135 and check to make sure that only the key(s) you wanted were added. # 验证是否可免密登录 ssh root10.0.0.135 # 不需要输入密码即可进入 Last login: Sun Feb 8 02:27:37 2026 from 10.0.0.1 [rootWeb-~]#- Jenkins推送配置通过之前的配置已经将Gitlab仓库的代码文件拉取到了Jenkins服务器本地Jenkins也有权限推送然后就可以将本地文件推送到web服务器首先我们需要知道代码文件拉取到本地的那个位置因为部署方式的不同Jenkins工作目录便不同我们可以通过点击Jenkins主页右上角系统管理-系统配置-主目录得到具体工作目录然后在服务器上进入该目录可以在workspace目录中找到与Gitlab仓库项目同名的目录myweb这就是从Gitlab拉取到的项目代码文件所在地址之后只需要将myweb这个目录整个推送到web服务器即可推送前配置Jenkins在拉取推送代码时都是在主目录中workspace下Gitlab仓库同名目录进行的所以我们在Jenkins中./就代表/var/lib/jenkins/workspace/myweb这一串绝对路径Jenkins有内置变量WORKSPACE也代表的是当前任务所在目录4.推送代码文件点击任务中配置选项找到Build Steps增加构建步骤选择执行shell然后填入推送命令scp -r ${WORKSPACE} root10.0.0.135:/usr/local/ # 将WORKSPACE目录及内容发送到web服务器10.0.0.135的/usr/local/目录下 ssh root10.0.0.135 chmod -R 755 /usr/local/${JOB_NAME}/ chown -R nginx.nginx /usr/local/${JOB_NAME}/ # 防止访问错误修改目录权限、属主属组 ${JOB_NAME}为Jenkins内置变量值为当前任务名因为Jenkins任务名与Gitlab项目名一直所以可直接用变量代替在web服务器验证推送Jenkins推送文件三、web服务器配置1.在web服务器安装nginx# 安装 yum install -y nginx # 启动 nginx # 修改配置文件添加代理指定目录 vim /etc/nginx/conf.d/myweb.conf ----------------------------------------------------------------------------------------------------------- server { listen 81; server_name _; root /usr/local/myweb; index myweb.html index.html; charset utf-8; } ----------------------------------------------------------------------------------------------------------- # 验证配置正确性 [rootWeb-~]# nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful # nginx重新加载配置文件 nginx -s reload2.浏览器前端页面浏览器地址栏输入http://10.0.0.135:81/浏览器访问
02-静态Web项目的发布
发布时间：2026/5/15 14:49:19
服务器资源与角色身份角色ip版本服务器Gitlab10.0.0.133Rocky Linux 9服务器Jenkins10.0.0.134Rocky Linux 9服务器Web10.0.0.135Rocky Linux 9中间件Nginx-1.20.1中间件Git-2.47.3在Gitlab和Jenkins部署好后我们就可以通过在Gitlab上传项目代码然后通过配置Jenkins拉取并发布先从最简单的前端静态页面开始。首先我们理一下思路与步骤1、Gitlab创建项目仓库与代码文件2、Jenkins拉取代码文件到服务器本地3、Jenkins将拉取到本地的代码文件推送到web服务器指定目录4、web服务器通过nginx代理代码文件所在目录一、Gitlab配置仓库1.创建项目Gitlab创建项目2.上传前端文件在项目创建好后我们添加一个简单的前端页面文件myweb.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlemyweb - v1.0.0/title style body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; font-size: 24px; color: #333; background-color: #f5f5f5; } .content-box { background-color: #e8f4f8; border: 1px solid #2d7d9a; padding: 20px 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /style /head body div classcontent-boxmyweb前端页面 --v1.0.0/div /body /html然后我们点击上传文件到Gitlab上传文件二、Jenkins配置任务1.创建任务在Jenkins主页点击新建任务创建一个自由风格的项目Jenkins创建任务2.拉取代码文件当任务创建完成后我们需要配置任务从Gitlab拉取我们的代码所以我们需要配置Gitlab仓库的项目地址首先打开Gitlab主页复制项目的http地址这里因为10.0.0.133虚拟机部署的Gitlab卡顿用我服务器上已经按以上步骤配置好的仓库配置任务然后在Jenkins的myweb任务配置中进行源码管理我们添加好仓库信息并应用保存后可以先构建一下验证配置以及Jenkins是否能成功拉取到代码通过点击构建后控制台输出可以看到在Gitlab提交文件时编辑的信息以及最后该次构建的成功信息源码管理3.推送前配置Jenkins推送代码到web服务器时本质是先ssh到指定服务器后通过scp命令传输相关文件所以我们在推送代码之前先要让Jenkins服务器可以免密登录web服务器- Jenkins服务器生成密钥对# 切换Jenkins用户 sudo -u jenkins bash # 生成 RSA 密钥对 ssh-keygen -t rsa -b 2048 # 一直回车直到: Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa Your public key has been saved in /root/.ssh/id_rsa.pub The key fingerprint is: SHA256:KHQt8LS6OVrHdf97MuMB6Hj9lfKzJwELaob2GOJjA0w rootJenkins The keys randomart image is: ---[RSA 2048]---- | . . | | o | | . . | | E. o o ... | | o o ..S.o..o | | o .. o... .| | ooo*. o o..o.| | oo. .. oBo| | .. o .X| ----[SHA256]-----执行后会生成公私钥密钥对私钥/root/.ssh/id_rsaJenkins 服务器本地保留 公钥/root/.ssh/id_rsa.pubWeb 服务器保留- 发送公钥到web服务器# 发送公钥到web服务器 ssh-copy-id root10.0.0.135 # 先输入yes后输入web服务器10.0.0.135的root密码 /bin/ssh-copy-id: INFO: Source of key(s) to be installed: /var/lib/jenkins/.ssh/id_rsa.pub The authenticity of host 10.0.0.135 (10.0.0.135) cant be established. ED25519 key fingerprint is SHA256:Ycnw5RwWOYG9NgeAhlOOQfVhmTbTiKzlg6rs8Kx/BQ. This key is not known by any other names Are you sure you want to continue connecting (yes/no/[fingerprint])? yes # 输入yes /bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed /bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys root10.0.0.135s password: # 输入root密码 Number of key(s) added: 1 Now try logging into the machine, with: ssh root10.0.0.135 and check to make sure that only the key(s) you wanted were added. # 验证是否可免密登录 ssh root10.0.0.135 # 不需要输入密码即可进入 Last login: Sun Feb 8 02:27:37 2026 from 10.0.0.1 [rootWeb-~]#- Jenkins推送配置通过之前的配置已经将Gitlab仓库的代码文件拉取到了Jenkins服务器本地Jenkins也有权限推送然后就可以将本地文件推送到web服务器首先我们需要知道代码文件拉取到本地的那个位置因为部署方式的不同Jenkins工作目录便不同我们可以通过点击Jenkins主页右上角系统管理-系统配置-主目录得到具体工作目录然后在服务器上进入该目录可以在workspace目录中找到与Gitlab仓库项目同名的目录myweb这就是从Gitlab拉取到的项目代码文件所在地址之后只需要将myweb这个目录整个推送到web服务器即可推送前配置Jenkins在拉取推送代码时都是在主目录中workspace下Gitlab仓库同名目录进行的所以我们在Jenkins中./就代表/var/lib/jenkins/workspace/myweb这一串绝对路径Jenkins有内置变量WORKSPACE也代表的是当前任务所在目录4.推送代码文件点击任务中配置选项找到Build Steps增加构建步骤选择执行shell然后填入推送命令scp -r ${WORKSPACE} root10.0.0.135:/usr/local/ # 将WORKSPACE目录及内容发送到web服务器10.0.0.135的/usr/local/目录下 ssh root10.0.0.135 chmod -R 755 /usr/local/${JOB_NAME}/ chown -R nginx.nginx /usr/local/${JOB_NAME}/ # 防止访问错误修改目录权限、属主属组 ${JOB_NAME}为Jenkins内置变量值为当前任务名因为Jenkins任务名与Gitlab项目名一直所以可直接用变量代替在web服务器验证推送Jenkins推送文件三、web服务器配置1.在web服务器安装nginx# 安装 yum install -y nginx # 启动 nginx # 修改配置文件添加代理指定目录 vim /etc/nginx/conf.d/myweb.conf ----------------------------------------------------------------------------------------------------------- server { listen 81; server_name _; root /usr/local/myweb; index myweb.html index.html; charset utf-8; } ----------------------------------------------------------------------------------------------------------- # 验证配置正确性 [rootWeb-~]# nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful # nginx重新加载配置文件 nginx -s reload2.浏览器前端页面浏览器地址栏输入http://10.0.0.135:81/浏览器访问
