iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >聊聊jenkins部署vue/react项目的问题
  • 792
分享到

聊聊jenkins部署vue/react项目的问题

2024-04-02 19:04:59 792人浏览 泡泡鱼
摘要

目录准备工作1、安装参数化部署插件2、安装好插件后,配置nodejs环境创建项目构建Centos安装jenkins1、安装jdk2、安装jenkins3、配置jenkis的端口4、启

jenkins安装请参考文末centOS安装jenkins。

准备工作

1、安装参数化部署插件

git Parameter Plug-In git参数化构建,可选择分支、标签构建Extended Choice Parameter Plug-In 自定义参数化构建,可根据需要任意添加参数nodejs Plugin Node环境,打包Vue项目

2、安装好插件后,配置Nodejs环境

打开全局工具配置

找到NodeJS,填写别名,选择需要安装的node版本

创建项目

1、创建一个job,选择构建一个自由风格的软件项目

2、选择根据分支选项构建项目,也可以根据刚才安装的Extended Choice Parameter Plug-In插件选择自定义参数,已选值建议使用TOP,即第一个

3、添加Git仓库,校验填写Git账号和密码,指定分支使用第2步的参数名,用${}包裹

4、构建环境添加node

5、添加执行shell脚本

shell脚本注解

// 安装依赖包
npm install
// 删除原有dist目录
rm -rf ./dist/*
// 打包
npm run build
// 删除Nginx服务前端资源目录
rm -rf /usr/share/nginx/html/vue-demo/*
// 将打包后的新资源添加到nginx服务前端目录
cp -rf ./dist/* /usr/share/nginx/html/vue-demo/

上传到外部服务器

// 通过ssh-keygen命令生成公钥
ssh-keygen -t rsa
// 在/root/.ssh/目录下会生成一个'id_isa.pub'的文件,将其拷贝到目标主机
// 部署到外部服务器shell脚本
scp -r ./dist/* root@47.100.51.191:/usr/share/nginx/html/vue-demo/

6、构建成功后自动打tag,方便找到对应部署版本。tag内容可根据需求自己填写,我使用时间加分支形式,${BUILD_TIMESTAMP}为当前时间,${GIT_BRANCH}为分支

需要安装全局时间插件,Build Timestamp Plugin,然后,系统管理->系统配置(tag不能有冒号)

构建

1、选择分支参数,开始构建

2、开始构建后,可以查看左下构建历史,查看当前构建信息

3、如有报错,查看控制台输出

补充:下面看下centOS安装jenkins

centOS安装jenkins

1、安装JDK

yum install -y java

2、安装jenkins

添加Jenkins库到yum库,Jenkins将从这里下载安装。

wget -O /etc/yum.repos.d/jenkins.repo Http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
yum install -y jenkins

如果不能安装就到官网下载jenkis的rmp包,官网地址(http://pkg.jenkins-ci.org/redhat-stable/)

wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.277.2-1.1.noarch.rpm
rpm -ivh jenkins-2.277.2-1.1.noarch.rpm

3、配置jenkis的端口

vi /etc/sysconfig/jenkins

找到修改端口号:

JENKINS_PORT="8080"  此端口不冲突可以不修改 

4、启动jenkins

service jenkins start/stop/restart

到此这篇关于jenkins部署vue/React项目的文章就介绍到这了,更多相关jenkins部署vue/react项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 聊聊jenkins部署vue/react项目的问题

本文链接: https://www.lsjlt.com/news/140284.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 聊聊jenkins部署vue/react项目的问题
    目录准备工作1、安装参数化部署插件2、安装好插件后,配置Nodejs环境创建项目构建centOS安装jenkins1、安装JDK2、安装jenkins3、配置jenkis的端口4、启...
    99+
    2024-04-02
  • 聊聊Node.js中部署项目的各种选项
    Node.js是非常流行的开发框架,许多开发者喜欢使用它开发Web应用程序。然而,许多开发者不知道如何在Node.js中部署他们的应用程序。本文将介绍有关在Node.js中部署项目的各种选项。一:使用Node.js内置的HTTP模块Node...
    99+
    2023-05-14
  • 聊聊Vue项目的访问流程
    随着前端技术的发展,越来越多的公司和开发者选择使用Vue框架来开发Web应用程序。Vue是一个轻量级但功能强大的JavaScript框架,它借鉴了Angular的一些特性以及React的一些思想,同时也具有自己的优点。Vue的开发过程中,访...
    99+
    2023-05-14
  • 聊聊docker 单机部署redis集群的问题
    目录docker部署redis集群1、创建redis网卡2、创建redis配置使用cluster集群配置3、创建redis集群测试docker 部署redis集群 1、创建redis...
    99+
    2024-04-02
  • jenkins分环境部署vue/react项目的方法步骤
    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境、测试环境、生产环境,每个环境部署都...
    99+
    2024-04-02
  • 聊聊Django+uwsgi+nginx服务器部署问题
    目录准备工作安装anaconda:安装需要的组件创建django程序(本地)使用文件传输工具将django程序传输到服务器部署工作配置uwsgi配置nginx配置ssl证书以提供ht...
    99+
    2024-04-02
  • Vue项目部署到jenkins的实现
    目录服务器配置环境配置到jenkins上看看jenkins干了什么服务器配置环境 需要安装yarn命令,但是yarn是通过npm安装的,所以要先安装npm,npm又是node附带的,...
    99+
    2024-04-02
  • 聊聊MongoDB 带访问控制的副本集部署问题
    目录一、下载MongoDBServer及MongoDBShell二、副本集初始化三、增加访问控制  当你需要用到一个MongoDB 副本集集群,用于开发测试时, 可以通过下面的步骤简...
    99+
    2024-04-02
  • 一文聊聊Node多进程模型和项目部署
    使用 node 命令执行该文件,再看下原来的控制台:打印出了具体处理请求的不同子进程的进程ID。这就是通过 cluster 模块实现的 nodd.js 的多进程架构。当然,我们在部署 node.js 项目时不会这么干巴巴的写和使用 clus...
    99+
    2023-05-14
    前端 Node.js
  • 聊聊React onClick 传递参数的问题
     背景说明 在下图这样的列表中,点击删除按钮需要执行删除操作  列表产生: { title: '操作', dataIndex: 'rowguid'...
    99+
    2024-04-02
  • 聊聊部署GitLab的流程和注意事项
    随着现今工程管理的快速发展,版本控制系统也越来越重要。Git是一个目前非常流行的分布式版本控制工具。GitLab则是Git的web管理界面。它是一个完整的DevOps平台,可以让团队协作更加方便,代码管理更加便捷。在本文中,我们将会介绍部署...
    99+
    2023-10-22
  • 聊聊SpringMVC项目依赖和静态资源导出问题
    Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。...
    99+
    2024-04-02
  • Jenkins自动化部署Vue项目的方法实现
    目录jenkins介绍1. 环境准备2. 首先登录服务器更新系统软件3. 安装Java和git4. 安装nginx5. 安装Jenkins6. 用jenkins创建一个构建任务7. ...
    99+
    2024-04-02
  • 聊聊vue集成sweetalert2提示组件的问题
    目录一、项目集成1. 引入方式 CDN引入方式:2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果 一、项目集成 官网链接:https://sweet...
    99+
    2024-04-02
  • vue项目部署跨域问题怎么解决
    这篇文章主要介绍“vue项目部署跨域问题怎么解决”,在日常操作中,相信很多人在vue项目部署跨域问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目部署跨域问题怎么解决”的疑惑有所帮助!接下来...
    99+
    2023-06-30
  • vue项目部署到非根目录下的问题及解决
    目录问题描述解决方案1、Vue配置2、修改路由vue项目部署在非根目录下的配置版本vue项目配置nginx配置问题描述 同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名...
    99+
    2024-04-02
  • Rainbond对前端项目Vue及React的持续部署
    目录前言:部署前检查1.1 添加 nodestatic.json 文件1.2 添加 web.conf 文件1.3 源码部署Vue项目常见问题前言: 以往我们在部署 Vue、React...
    99+
    2024-04-02
  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目
    目录前提:思路:步骤:配置nodejs工具git代码文件目录如下Dockerfile的文件内容nginx.conf主配置文件的内容最近比较闲,尝试了一下docker部署业务测试环境的...
    99+
    2024-04-02
  • 浅谈vue+vite项目部署会遇到的几个问题
    今天来打包硅谷外卖项目,通过解决项目中遇到的问题来加深对vite打包的理解。 运行yarn build 报错,报[WARNING] Expected identifier but f...
    99+
    2023-05-18
    vue vite 项目部署 vue vite部署
  • 如何解决vue项目部署上线遇到的问题
    这篇文章将为大家详细讲解有关如何解决vue项目部署上线遇到的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。流程     1.服...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作