Jenkins前端和Vue项目部署步骤

1.构建部署前端项目

192.168.88.101 从机

[root@localhost ~]# mkdir myhtml
[root@localhost ~]# mkdir myhtml/sh
[root@localhost ~]# vim myhtml/sh/my.sh

安装nginx:

[root@localhost myhtml]# yum install nginx -y
[root@localhost myhtml]# systemctl start nginx

[root@localhost myhtml]# vim /root/myhtml/sh/my.sh
#!/bin/bash
rm -rf /usr/share/nginx/html/*
cp -r  /root/myhtml/* /usr/share/nginx/html/
[root@localhost ~]# chmod +x /root/myhtml/sh/my.sh

2.构建vue项目

1.安装node.js

问前端要他的node.js的版本

在目标服务器上（要部署项目的服务器）部署和前端相同的node.js的版本

node.js官网 https://nodejs.org/zh-cnhttps://nodejs.org/zh-cn

把压缩包传到服务器，解压就是安装

上次完成后
[root@localhost ~]# ls
anaconda-ks.cfg                git-2.9.5             jdk-11.0.16_linux-x64_bin.tar.gz
apache-maven-3.8.8-bin.tar.gz  git-2.9.5.tar.gz      jenkins.war
apache-tomcat-9.0.79.tar.gz    initial-setup-ks.cfg  node-v17.9.1-linux-x64.tar.xz

解压
[root@localhost ~]# tar -xvf node-v17.9.1-linux-x64.tar.xz -C /usr/local/

[root@localhost ~]# mv /usr/local/node-v17.9.1-linux-x64/ /usr/local/node

配置环境变量
[root@localhost ~]# vim /etc/profile.d/node_tools.sh
export NODE_HOME=/usr/local/node/
export PATH=$NODE_HOME/bin:$PATH

[root@localhost ~]# source /etc/profile.d/node_tools.sh

检查版本
[root@localhost ~]# node -v
v17.9.1
[root@localhost ~]# npm -v
8.11.0

成功

2、构建任务

192.168.88.101

[root@localhost ~]# mkdir /root/web

[root@localhost ~]# vim web.sh

# jenkins 拉取代码存放地址
cd /root/web
npm install
npm run build
rm -rf /usr/share/nginx/html/*
cp -r /root/web/dist/* /usr/share/nginx/html/
systemctl restart nginx.service

[root@localhost ~]# chmod +x /root/web.sh

http://ip