当前位置: 首页 > news >正文

Linux之Ubuntu环境Jenkins部署前端项目

今天分享Ubuntu环境Jenkins部署前端vue项目

一、插件安装

1、前端项目依赖nodejs,需要安装相关插件

点击插件管理,输入node模糊查询

选择NodeJS安装

 安装成功

2、配置nodejs

点击后进入

点击新增 NodeJS 

配置脚手架类型:如果不填 默认npm ,目前流行配置 yarn

 

无论使用npm还是yarn均要在服务器上安装插件,命令如下

apt install npm 
#或者
apt install cmdtest #yarn的脚手架npm install -g yarn #yarn的脚手架

安装之前可以先验证一下是否已经安装:

npm -versionyarn --version

  先自动安装,点击保存。 

3、开始创建前端项目任务,点击新建Item

4、配置分支

选择

填写

5、配置源码地址

配置分支占位符:$branch  

 注意:此处占位符一定要填,否则,构件时,无论你选择哪个分支,最后都是执行的master分支。 

6、配置构件环境

选中后默认填充 

7、开始构建

选择

进入

填上脚本

yarn
yarn run build
rm -rf /data/app/dist/*
cp -rf /var/lib/jenkins/workspace/test_vue/dist /data/app/

也可以不复制,nginx直接指向 :/var/lib/jenkins/workspace/test_vue/dist

这样减少节约资源,具体业务,具体情况。

8、然后构建时报错:

此处是nidejs版本问题,现在是21.5,需要调整到8-18行就行

继续构件出现文件权限问题

配置权限

vim /etc/default/jenkins

找到

均改成 root  ,然后

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
chown -R root:root /data/app/dist

重新构建,又报错

继续查看

 好像看不到原因,继续查看jenkin启动日志

sudo journalctl -xe | grep jenkins

看到关键信息

 还是权限问题

sudo useradd -m jenkins
sudo groupadd jenkins
sudo usermod -a -G jenkins jenkinssudo chown -R jenkins:jenkins /var/lib/jenkins
sudo chown -R jenkins:jenkins /var/cache/jenkins 
sudo chown -R jenkins:jenkins /var/log/jenkins
sudo chown -R jenkins:jenkins /data/app/dist   

重启jenkins服务器:

cd /etc/init.d/./jenkins status./jenkins stop./jenkins start

或者新版本

vim /usr/lib/systemd/system/jenkins.servicesystemctl daemon-reloadsystemctl start jenkins.servicesystemctl stop jenkins.servicesystemctl status jenkins.service#设置开机自启
systemctl enable jenkins.service## 服务关闭自动启动
systemctl disable jenkins.service## 检查服务状态
systemctl status jenkins.service## 显示所有已启动的服务
systemctl list-units  --type=servicenetstat -ntap | grep 8080

 或者

systemctl enable jenkins
systemctl start jenkins
systemctl status jenkin

或者

sudo service jenkins startsudo service jenkins start|stop|restart

最后重新构建,就成功了。

到此,Linux之Ubuntu环境Jenkins部署前端项目分享完毕,下篇我们分享其更高级的用法,敬请期待!

相关文章:

  • 【uniapp】APP打包上架应用商-注意事项
  • 2024年度 ROTS - 实时操作系统 Top 15
  • 【管理篇 / 登录】❀ 06. macOS下使用USB配置线登录 ❀ FortiGate 防火墙
  • 【Nodejs】基于node http模块的博客demo代码实现
  • Go后端开发 -- Go Modules
  • x-cmd pkg | trafilatura - 网络爬虫和搜索引擎优化工具
  • async和await关键字
  • 解析千兆多模光模块SFP-GE-SX
  • 可视化速通知识点
  • kotlin isEmpty/isNotEmpty/isNullOrEmpty和isBlank/isNotBlank/isNullOrBlank
  • 数据结构期末复习(1)数据结构和算法 线性表
  • 个人实际开发心得感悟及学习方法
  • Vue中的组件通信方式及应用场景
  • 2024年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析
  • 各种基础环境搭建
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 345-反转字符串中的元音字母
  • E-HPC支持多队列管理和自动伸缩
  • HTTP中GET与POST的区别 99%的错误认识
  • mysql 5.6 原生Online DDL解析
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • SpingCloudBus整合RabbitMQ
  • springboot_database项目介绍
  • SSH 免密登录
  • Terraform入门 - 1. 安装Terraform
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • 从零搭建Koa2 Server
  • 订阅Forge Viewer所有的事件
  • - 概述 - 《设计模式(极简c++版)》
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 实战|智能家居行业移动应用性能分析
  • 06-01 点餐小程序前台界面搭建
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (十一)c52学习之旅-动态数码管
  • (转)c++ std::pair 与 std::make
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .NET开源快速、强大、免费的电子表格组件
  • .net中应用SQL缓存(实例使用)
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • :not(:first-child)和:not(:last-child)的用法
  • @ComponentScan比较
  • @RequestBody与@ModelAttribute
  • [1181]linux两台服务器之间传输文件和文件夹
  • [AIGC] Java 和 Kotlin 的区别
  • [android]-如何在向服务器发送request时附加已保存的cookie数据
  • [bug总结]: Feign调用GET请求找不到请求体实体类