Jenkens 发布配置Vue

1、环境

1.1 、检查nodejs

检查nodejs 如果安装则跳过,如果没有安装则进入

Dashboard->Manage Jenkins-Plugins

选择Available plugins 输入nodejs 如果有自己需要的版本则选中直接安装,如果没有,则需要自己下载安装。

自己下载

可以去阿里云去下载nodejs 的包

CNPM Binaries Mirror (npmmirror.com)

下载完后上传linux 服务器 解压

tar -zxvf filename.tar.gz

加压后复制权限

# 更改文件所属的用户和用户组
chown -R jenkins:jenkins node-v14.17.3-linux-x64
# 为文件夹添加权限
chmod o+rwx node-v14.17.3-linux-x64

配置nodejs。

在Dashbord->Manage Jenkins->Tools 找到NodeJS 安装

新增NodeJS,填写别名,版本,和刚才node加压根目录,注意这里的Global npm package to install 保持为空。否则后面会找不到 package.json

1.2 、检查 git

查看是否安装git 和版本

git --version

如果没有则可以用下面命令安装

yum install git

git的默认安装路径是 /usr/bin/git

配置git

在Dashbord->Manage Jenkins->Tools 找到Git installations

将Path to Git executable 改成git 安装目录 默认为/usr/bin/git

2、构建item

新建item,进入配置

源码管理

选择git 的仓库地址,添加git仓库凭证,指定分支

构建环境

选择 Provide Node & npm bin /folder to PATH。

选择刚才的nodejs 别名

找到Build Steps

选择Build Steps,选择Execute shell

添加下面代码,表示安装依赖包和打包vue项目

bash 复制代码
npm install
npm run build

点击构建,绿色表示构建成功

3、发布vue项目

首先在服务器上安装个tomcat 用于发布服务。

2.1、下载和解压tomcat

bash 复制代码
wget https://archive.apache.org/dist/tomcat/tomcat-8/v8.5.87/bin/apache-tomcat-8.5.87.tar.gz
 
# 解压
tar -zxvf apache-tomcat-8.5.87.tar.gz

配置环境变量

bash 复制代码
vim /etc/profile
export CATALINA_HOME=/home/centos/workspace/apache-tomcat-8.5.87
 
# 生效命令
source /etc/profile
# 启动
cd /opt/apache-tomcat-8.5.87/bin
./startup.sh

访问端口,默认8080。

2.2、发布配置

安装插件,Publish Over SSH

路径:Manage Jenkins > plugin > Available plugins

搜索:Publish Over SSH,勾选后,点击Install without restart

我已经安装过了,所以这里没有

配置Publish Over SSH

路径:Manage Jenkins > Configure System > Publish over SSH > SSH Servers

点击新增,填写 Name(名称)、Hostname(服务器IP)、Username(服务器用户名)、Remote Directory(远程目录)

点击高级 , 高级中勾选 Use password authentication, or use a different key ,在 Passphrase / Password 中填写服务器密码。我已经填过了,这里是隐藏的

点击右下角 Test Configuration ,测试服务器是否连接成功。连接成功点击保存。

2.3、部署打包内容

点击刚刚配置的任务,选择配置,修改 构建 > Execute shell

bash 复制代码
PYTHON=/usr/bin/python
npm config set registry https://registry.npmmirror.com/
rm -rf ./dist
rm -rf ./dist.tar.gz
npm install -g yarn
yarn config set registry https://registry.npmmirror.com/
npm install 
npm run build

tar -zcvf dist.tar.gz  ./dist/*

配置 构建后操作 > 选择 增加构建后操作步骤 > 选择 Send build artifacts over SSH

其中Exec command 的配置如下。注意我们 /jenkins 的地址实际是 /root/jenkins 地址。远程的目录一般都在root下面。所以找tomcat的时候需要使用 ../../ 来找根目录的home。

bash 复制代码
cd  ./jenkins
tar -xzvf  dist.tar.gz
mkdir -p  ../../home/centos/workspace/apache-tomcat-8.5.87/webapps/planeView
rm  ../../home/centos/workspace/apache-tomcat-8.5.87/webapps/planeView -rf

mv dist ../../home/centos/workspace/apache-tomcat-8.5.87/webapps/planeView

rm dist.tar.gz -f
相关推荐
煸橙干儿~~几秒前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒2 分钟前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od
安冬的码畜日常9 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
杨荧28 分钟前
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
java·开发语言·vue.js·spring boot·spring cloud·开源
l1x1n037 分钟前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
Q_w774241 分钟前
一个真实可用的登录界面!
javascript·mysql·php·html5·网站登录
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
一丝晨光1 小时前
C++、Ruby和JavaScript
java·开发语言·javascript·c++·python·c·ruby
Front思1 小时前
vue使用高德地图
javascript·vue.js·ecmascript
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架