Jenkins实现前端自动化部署

Jenkins实现前端自动化部署

背景

如果没有自动化的部署过程,每次提交代码
需要执行的操作有5步骤

# 第一步,删除旧的文件夹
rm -rf xxx

# 第二步,下载更新后的文件
git clone [email protected]:ococa/blog.git
# 或者上传文件到服务器
scp -r /User/testFile [email protected]:/root
# 固定三步骤 安装依赖
cd fileName
npm install
npm run build 
# 启动服务器

由于太繁琐于是开始考虑怎么样减少工作量

求助谷歌

Jenkins实现前端自动化部署_第1张图片

结果:找到关键字 jenkins

jenkins安装

依赖

  1. java jdk

jenkins前置配置

github配置

打通github和jenkins服务器通道

  1. 在github新建Personal access tokens, 记录生成的token,只显示一次Jenkins实现前端自动化部署_第2张图片

Jenkins实现前端自动化部署_第3张图片在jenkinsgithub配置时候,添加Credentials(凭据),选择secret text类型并且填入 .保存之后选择新添加的配置,并测试联通性Jenkins实现前端自动化部署_第4张图片
Jenkins实现前端自动化部署_第5张图片

ssh服务器配置

Jenkins实现前端自动化部署_第6张图片邮箱配置(可选)

jenkins创建自动流程

  1. 新建一个流水线

Jenkins实现前端自动化部署_第7张图片

  1. 设置github仓库地址及配置等

Jenkins实现前端自动化部署_第8张图片

  1. 设置触发构建的方式,这里选择github hook触发

Jenkins实现前端自动化部署_第9张图片

  1. 设置构建过程

Jenkins实现前端自动化部署_第10张图片

  1. 自动部署到其他服务器

Jenkins实现前端自动化部署_第11张图片

  1. 可选(发送邮件,增加代码测试,等等)
  2. 保存

结果测试

  1. 修改github

  1. jenkins 输出

Jenkins实现前端自动化部署_第12张图片

  1. 服务器内容

Jenkins实现前端自动化部署_第13张图片 

展望

  1. 自动版本回退怎么搞?
  2. 更简单的用法?
  3. k8s docker?
  4. pm2?

你可能感兴趣的:(react,JavaScript,服务器,前端工程化,jenkins,node,react,前端自动化,前端工程化)