Jenkins实现前端项目自动部署

Jenkins实现前端项目自动部署

有效利用自动化部署工具，不仅可以规避项目发布过程中人为因素引起的各种错误，也可以将开发或运维人员从紧张、繁琐且枯燥的打包部署工作中解脱出来，是我们迈向DevOps的重要一步。在之前的工作中，我们学习实现了后端项目的自动化部署，本次SPD项目采用前后端分离的模式，前端项目如何实现自动化部署呢？

1、Jenkins环境准备

1.1、安装Nodejs插件

首页 -> Manage Jenkins -> Manage Plugins

在 Installed 选项卡中检查并安装安装NodeJS Plugin

1.2、添加NodeJS运行环境

首页 -> Manage Jenkins -> Global Tool Configuration

下拉至NodeJS

1.3、配置SSH Server

首页 -> Manage Jenkins -> Configure System

下拉至 SSH Server 模块

2、Jenkins项目配置

完成第一部分的环境准备工作后，我们就可以创建Jenkins项目，开始进行项目配置了

2.1、创建项目

首页 -> New Item

录入项目名，如spd-vue

2.2、配置源码库

输入GitLab中项目地址，添加GitLab用户名及密码

2.3、配置自动构建的触发条件

勾选 Build when a change is pushed to GitLab. GitLab webhook URL: ***

2.4、创建Webhooks

进入GitLab平台项目主页，选择 Settings -> Integrations

配置URL和令牌，URL为Jenkins中对应项目地址，令牌为上一步中自动生成的，Push events中填入项目分支名，最后点击保存。

2.5、配置构建环境

勾选 Provide Node & npm bin/ folder to PATH

2.6、配置构建脚本

Add build step 选择 Execute shell

Command 中填入构建脚本

2.7、发送打包后的项目至服务器

Add build step 选择 Send files or execute commands over SSH

Source file 填入 Jenkins 构建好的项目压缩包

Remove prefix 可以设置要去除目录前缀

Remote directory 设置文件要发送的服务器目录地址

Exec command 填入要执行的脚本

经过以上配置，即可实现，代码合并至线上环境的分支时，Jenkins自动打包部署项目。