基于Jenkins、Node.js、码云和Shell的Vue前端自动化部署

前言

今年大三了，接手了一个项目。因为周期较紧，需要项目能实现自动化部署，从而提高开发效率。故而简单研究了一下自动化部署技术。

前置条件

• 码云私有仓库
• Vue单应用
• Jenkins已安装
• 阿里云服务器CenOS 8.x
• Node.js

Jenkins安装与配置账户较为简单，请自行百度

配置

进入Jenkins面板后

安装Node.js插件

• 系统管理 》》 插件管理

• 查询node.js插件
• 此处已安装，若未安装，请转移到可选插件搜索
• 

安装Gitee插件

• 系统管理 》》 插件管理

• 此处我已经安装，若未安装则在可选插件栏目进行搜索
  

配置Gitee

系统管理 》》系统配置

• 找到Gitee配置
  

• 选择证书令牌添加

• 根据提示的获取地址 https://gitee.com/profile/personal_access_tokens 进行码云私人令牌生成

• 生成令牌后，返回Jenkins主界面，点击
  

• 出现如下表单
  

• 点击保存

点击新建任务

• 输入任务名称
• 选择一个自由风格的软件项目
• 点击确定

General配置

• 选择刚刚创建好的Gitee配置

源码管理配置

• 由于是私有仓库，此处不配置权限认证信息，会报错
• 需要Linux服务器安装Git

构建触发器配置

• 生成密码

• 在私有仓库找到webhook配置

构建环境配置

• 选择Node环境

构建配置

• 选择执行shell
• 以下为脚本内容

# 设置代理
npm config set registry https://registry.npm.taobao.org
# 安装依赖
npm install 
# 把之前的构建删掉
rm -rf dist
# 开始构建 , 这个可以看你项目的构建命令 , 不一定都是一样的
npm run build:prod
# 删除目标文件
rm -rf linux下项目的全路径/*
# 拷贝构建后的文件
cp -r /var/lib/jenkins/workspace/项目名/dist/*  linux下项目的全路径

• 点击保存

测试

• 返回Jenkins主界面

• 选择刚刚创建好的工程
• 点击立即构建
• 左下方可以查看构建的历史
• 以后只要在本地提交代码到码云，则Jenkins会自动拉去代码并进行项目构建发布