Jenkins部署vue

Jenkins自动化部署实践

参考网址:https://blog.youkuaiyun.com/jonsonler/article/details/81317352

1.系统设置--添加插件,配置好node.js。参考网址:https://blog.51cto.com/13760351/2382464

2.添加服务器,添加Credentials。

3.搭建配置:

3.1添加git

3.2构建环境

 

echo $PATH
cd /root/xzx/mom-ui
tar -zxvf dist.tar.gz 

#这是构建完成,传输完成,以后的操作

 

 

 

 

echo $PATH
node -v
npm -v
npm install
npm run build:prod		#打包
cd dist					#进入文件夹,,一定要进入,不然下一步不能打包
tar -zcvf dist.tar.gz *	#打包所有文件,后边的*要有。不打包,static文件夹穿不过去

 

 

### Jenkins 部署 Vue 项目的配置步骤 #### 环境准备 在开始部署之前,需要确保服务器上已经安装了必要的软件和工具。首先,Jenkins 必须能够访问到用于构建的 Node.js 环境。为此,可以通过编辑 `/etc/profile.d/` 目录下的脚本文件来设置全局环境变量,例如创建 `node_tools.sh` 文件并添加以下内容: ```bash export NODE_HOME=/usr/local/node/ export PATH=$NODE_HOME/bin:$PATH ``` 保存后,通过运行 `source /etc/profile.d/node_tools.sh` 命令使新设置生效 [^4]。 #### Jenkins 权限配置 为了保证 Jenkins 可以操作工作目录中的文件,可能需要调整 Jenkins 用户对特定目录的权限。如果项目计划存放在 `/work` 目录下,则可以使用如下命令更改该目录的所有权给 Jenkins 用户: ```bash chown -R jenkins:jenkins /work ``` #### 创建 Jenkins 任务 登录到 Jenkins 控制台,选择“新建任务”选项,并指定一个合适的名称。接着,在向导中挑选“自由风格项目”作为任务类型 [^3]。 #### 源码管理 根据你的需求配置源代码仓库的信息。这通常包括 Git 仓库地址、认证信息以及分支等细节。这样做的目的是让 Jenkins 能够从版本控制系统拉取最新的代码进行构建。 #### 构建触发器 可以根据实际情况设定触发器,比如定检查 SCM 更新或者通过 Webhook 自动触发构建流程。对于大多数持续集成场景来说,推荐启用“轮询 SCM”功能,并提供一个 cron 表达式定义检查频率。 #### 构建环境 在此阶段,确认所有必需的依赖项都已正确安装并且可用。特别是要确保 Node.js 和 npm 已经被正确地安装到了 Jenkins 所使用的路径中。此外,还可以考虑在此处激活虚拟环境或其它定制化的构建条件。 #### 构建过程 最后一步是定义具体的构建指令。一般而言,这将涉及执行一系列 shell 命令以完成从获取依赖包到生成最终产物的过程。典型的操作序列如下所示: ```bash # 查看当前 node 版本 node -v # 安装项目所需的依赖 npm install # 清理之前的构建输出 rm -rf ./dist # 执行打包命令 npm run build # 将生成的结果复制至 Nginx 的网站根目录 cp dist/* -rf D:/nginx-1.22.1/html/dist ``` 这段脚本假设你正在使用 Windows 平台上的 Nginx;如果你是在 Linux 或 macOS 上运行,请相应修改路径 [^5]。 #### 后续处理 一旦构建成功结束,你可以进一步配置后续动作,如发送邮件通知、归档生成物或是重启服务等。这些额外的动作有助于自动化整个开发周期,提高效率同减少人为错误的可能性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值