使用Jenkins部署前端项目（Vue）

简介

本文介绍如何使用 Jenkins 来部署前端项目，后端项目（Maven）参看下面这篇博客。

• 使用Jenkins部署后端项目（Maven）

开始部署

Jenkins 部署前端项目非常简单，我以 yudao 的前端项目为例，将仓库 fork 到我的仓库里。

Step1：创建任务

这回创建一个自由风格的软件项目。

Step2：详细设置

在任务的详细界面，配置 Git 仓库的地址、克隆代码的凭证，这点和部署后端项目一样。

Step3：构建命令

在 Build steps 中，写构建命令，前端构建用 node 命令。

因为 CentOS7 安装 node16+ 版本十分困难（参看博客：CentOS 7安装Nodejs），我这里用 node16 演示，但该项目用这个版本又不能构建（npm run build 执行不了），所以用 npm run dev 代替。

#!/bin/sh -xe

# Node安装目录
NODE_HOME="/usr/local/dev/node-v16.20.2-linux-x64"
export PATH="${NODE_HOME}/bin:$PATH"

npm install
npm run dev

如下，

Step4：立即构建

保存后，点 立即构建。

看控制台的日志，是构建完成了。

因为 npm run dev 命令是保持状态的，所以 Jenkins 里看到的一直是进行中的状态，换成 npm run build 执行完，Jenkins 任务也会完成。

浏览器访问服务器地址，可以访问到该前端项目，说明构建是成功的。

另外

另外，Jenkins 中也支持设置 nodeJS 配置，但是不设置通过服务器的 Shell 命令也能完成部署。

从这点来能看出 Jenkins 强大的扩展性。

（系统里配置 NodeJS 路径）

（任务里可选择 NodeJS 命令）