前端代码部署-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项目

相关推荐
纷飞梦雪1 小时前
使用chroot预安装软件到ubuntu22中
linux·运维·ubuntu
Fantasywt3 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
IT、木易4 小时前
大白话JavaScript实现一个函数,将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
jiarg6 小时前
linux 内网下载 yum 依赖问题
linux·运维·服务器
yi个名字6 小时前
Linux第一课
linux·运维·服务器
张拭心6 小时前
2024 总结,我的停滞与觉醒
android·前端
念九_ysl6 小时前
深入解析Vue3单文件组件:原理、场景与实战
前端·javascript·vue.js
Jenna的海糖6 小时前
vue3如何配置环境和打包
前端·javascript·vue.js
菜鸟xy..6 小时前
linux 基本命令教程,巡查脚本,kali镜像
linux·运维·服务器·kali镜像·巡查脚本·nmtui
暴躁的小胡!!!6 小时前
Linux权限维持之协议后门(七)
linux·运维·服务器·网络·安全