Jenkins使用Freestyle部署前端项目

 Jenkins系列文章 

一、Jenkins安装配置

二、Jenkins部署springboot项目

三、Jenkins部署前端项目

四、Publish over ssh分发项目

五、Nginx代理Jenkins

一、插件安装及环境配置

1、nodejs环境配置

1）安装

        进入nodejs官网（Index of /download/release/ (nodejs.org)），下载合适的nodejs版本，本文以16.15.0为例，由于我们是部署在linux环境，所以要下载对应的linux版本。

2）上传解压

        将压缩包上传到opt目录，然后解压、重命名。

tar -zxvf node-v16.15.0-linux-x64.tar.gz
mv node-v16.15.0-linux-x64 node-16.15.0
cp -r node-16.15.0 /usr/local/

3）配置环境变量

            vim  /etc/profile，在文件最后追加上node目录，保存退出后，重新加载配置文件，source /etc/profile。

export NODE_HOME=/usr/local/node-16.15.0
export PATH=${NODE_HOME}/bin:$PATH

4）查看node版本

        在命令行输入node -v、npm -v，查看node和npm版本。

2、Jenkins中nodejs配置

1）插件安装

        在Jenkins控制台中，Manage Jenkins >>> Manage Plugins >>> 可选插件，搜索nodejs进行安装。

2）全局工具配置 

         在Jenkins控制台中，Manage Jenkins >>> Global Tool Configuration，点击nodejs安装，取消勾选 Install automatically，输入nodejs别名和我们上述配置的nodejs目录，保存应用。

二、部署项目

1、新建Item

1）第一步

        新建项目选择Freestyle Project，然后点击源码管理，选择git，配置对应项目地址及认证方式。关于git工具及凭据管理有不懂的可以查看Jenkins使用Pipeline部署SpringBoot项目，这篇博客的第一部分环境配置，里面有详细介绍。

2）第二步

        选择构建环境Provide Node & npm bin/ folder to PATH，然后选择我们刚才配置node工具。

3）第三步

        增加构建步骤，选择Execute Shell将下面的构建命令复制过去，应用保存，点击构建，构建成功后会生成对应的项目目录。

npm config set registry https://registry.npm.taobao.org
npm install
npm run build
echo "构建成功"

 

        当然，对于前后端分离的项目，我们通常将项目通过nginx进行代理，所以在项目成功后，我们可以在Execute Shell增加命令将文件目录移入到nginx代理的前端项目路径即可。