前端代码部署-gitee + docker自动部署

前端代码部署

前端代码部署的方式有很多,本文主要介绍以下几种:手动部署,docker镜像部署,gitee + docker自动部署。

上文已经实现了docker镜像部署,本文来实现gitee + docker自动部署。

jenkins下载

我们先来查询有哪些可安装的jenkins镜像:

sql 复制代码
docker search jenkins

我们使用第二个:

bash 复制代码
docker pull jenkins/jenkins:lts

然后启动jenkins:

bash 复制代码
docker run -d -u 0 --privileged --name jenkins_container -p 49003:8080 -v /root/jenkins_container:/var/jenkins_home jenkins/jenkins:lts
  • -d:表示在后台运行
  • -u 0 :传入root账号ID(超级用户的ID是0),覆盖容器中内置的账号
  • --privileged:赋予最高权限
  • --name:给容器取名为jenkins_container
  • -p:端口映射,将容器的8080端口映射到服务器的49003端口
  • -v /root/jenkins_container:/var/jenkins_home :将docker容器内的目录/var/jenkins_home映射到服务器/root/jenkins_container目录上

运行完之后可以发现服务器/root/jenkins_container目录下多了很多文件。然后我们需要去云服务器管理控制台配置安全组开放49003端口。

jenkins安装

在我们电脑本地打开http://你的云服务器公网IP:49003,我们可以看到以下界面: 根据上图提示地址获取密码(目录我们刚刚运行的时候已经做了映射):

bash 复制代码
cat /root/jenkins_container/secrets/initialAdminPassword

选中"安装推荐的插件":

等待安装完成之后,就会进入到创建管理员页面:

输入用户名、密码、邮箱,保存并完成后,来到实例配置页面:

点击"保存并完成"。

jenkins配置

我们先来安装配置SSH插件,用来连接服务器的:

安装完成之后,来对SSH插件进行配置:

拉到最下面,点击SSH Servers下面的新增按钮:

输入该SSH server名字、服务器地址、服务器登录用户名,服务器登录用户密码。

都填写好之后点击Test Configuration,测试下服务器是否可以连接成功,配置正确之后点击"保存"。

然后我们来安装下node插件:

安装好之后来配置一下:

项目部署

接下来我们来部署项目,新建一个项目:

输入我们源代码的地址,添加凭据(源代码登录平台的用户名和密码):

我们要在jenkins上打包项目,所以选择好node版本:

增加一个构建步骤,对我们的项目进行打包,关于docker的配置文件Dockerfilenginx的配置文件default.conf,上文有详细的介绍前端项目部署-docker镜像部署

增加一个构建步骤,打包项目镜像,启动容器:

保存后就可以构建我们的项目了:

如果构建过程中出错的话可以到控制台输出查看日志:

然后去云服务器管理控制台配置安全组开放8036端口。配置路径可见前端项目部署-手动部署

构建成功之后,就可以访问部署好的页面了http://x.xxx.xxx.xxx:8036/你的页面路由

自动部署

非生产环境每次部署的时候都要手动去点构建的话太麻烦了,我们可以结合giteeWebHooks来实现代码推送的时候自动部署。

我们先来给jenkins安装gitee插件:

插件下载好之后,去到我们的项目配置中,触发构建器选择"Gitee webhook触发构建",后面的那个URL需要记录下来,后续需要配置到giteeWebHooks中的:

再往下拉去生成"Gitee WebHook 密码",然后保存:

再打开我们的源代码管理平台gitee,来到"管理" -> "WebHooks" -> "添加webHook" :

输入原本在jenkins保存的URL和生成的"Gitee WebHook 密码":

点击添加之后,我们可以去改动点代码,然后推送,就可以发现webHook被触发了:

jenkins也触发了一次自动构建。

参考文章

1、从零搭建docker+jenkins+node.js自动化部署环境

2、手把手系列之 Jenkins+Docker自动化部署vue项目

相关推荐
天空之城--8 小时前
Claude Code 高效开发 Web 2D/3D 完全指南:心法、自定义 Skill 体系与社区技能包实战
前端·3d
IT_陈寒8 小时前
SpringBoot自动配置坑了我三天,原来漏了这个注解
前端·人工智能·后端
GIS数据转换器8 小时前
村镇无人机物流配送与跨域监测一体化平台
大数据·运维·人工智能·科技·无人机
倔强的石头1069 小时前
飞牛OS部署Mtab:Docker搭建自托管书签导航并实现远程访问
运维·docker·容器
逝水无殇9 小时前
HTML 文本格式化详解:掌握 <strong>、<em>、<mark>、<del> 等常用标签
前端·javascript·html
特立独行的猫a9 小时前
DeepSeek Harness插件和工具的区别介绍及开发入门指南
前端·ai·agent·插件·deepseek·harness
小新讲网安9 小时前
HTTP请求走私攻击实战:CL.TE与TE.CL绕过前端服务器全解析
服务器·前端·网络·web安全·http·架构·漏洞
风骏时光牛马9 小时前
AI办公系统异常事件复盘分析
前端
console.log('npc')9 小时前
React 19 + Vite 企业级前端项目:从零搭建到规范交付
前端·react.js·前端框架
程序员黑豆9 小时前
Java字符串常量池完全指南:原理、intern()方法与性能优化最佳实践
java·前端·ai编程