jenkins自动构建部署vue

已于 2024-09-04 08:44:16 修改
阅读量2.8k 收藏 8
点赞数 3
文章标签： jenkins vue.js 运维
于 2024-08-09 16:13:55 首次发布
原文链接：https://blog.youkuaiyun.com/ming19951224/article/details/109633920
版权

目录

简介

1.jenkins安装

1.1.安装JDK

1.2.安装jenkins

1.3.配置jenkis的端口

1.4.启动jenkins

1.5.打开jenkins

​2.发布vue项目

2.1.安装插件

2.1.1.安装NodeJS插件

​2.1.2.安装连接SSH的插件

​2.1.3.安装把应用发布到远程服务器的插件

​2.2.配置git和NodeJS环境

​2.2.1.安装配置git

​2.2.2.安装配置NodeJS

3.配置git凭证信息

4.新建任务配置部署信息

4.1.配置git地址和凭证信息

4.2.指定代码分支

​4.3.设置项目的自动发布的触发条件

4.4.配置构建环境

4.5.设置构建参数和执行的命令

4.5.1.发布项目到本机

4.5.2.发布项目到远程服务器

云服务器ECS省钱攻略

推广大使特惠产品合集页

简介

 Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写上，不做解释）。Jenkins用Java语言编写，可在Tomcat等流行的servlet容器中运行，也可独立运行。通常与版本管理工具(SCM)、构建工具结合使用。常用的版本控制工具有SVN、GIT，构建工具有Maven、Ant、Gradle。

1.jenkins安装

1.1.安装JDK
yum install -y java
1.2.安装jenkins

把Jenkins库添加到yum库,然后安装

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

如果yum安装jenkins出现签名认证失败,再启动命令后面加上- -nogpgcheck

yum install -y jenkins --nogpgcheck
1.3.配置jenkis的端口
vi /etc/sysconfig/jenkins
#此端口不冲突可以不修改 
JENKINS_PORT="8080"  
1.4.启动jenkins
# start 启动 stop停止,restart重启
service jenkins start/stop/restart

安装成功后Jenkins将作为一个守护进程随系统启动
系统会创建一个“jenkins”用户来允许这个服务，如果改变服务所有者，同时需要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的所有者
启动的时候将从/etc/sysconfig/jenkins获取配置参数

1.5.打开jenkins

在浏览器中访问
http://127.0.0.1:8080/
首次进入会要求输入初始密码如下图


初始密码在：/var/lib/jenkins/secrets/initialAdminPassword 文件里面

登陆进去之后,然后就点击安装推荐插件了

2.发布vue项目

2.1.安装插件

如果jenkins和vue应用部署在同一台电脑,后面2个插件不用安装

2.1.1.安装NodeJS插件

点击系统管理,然后点击插件管理,在可选插件里面搜索NodeJS插件,然后安装

2.1.2.安装连接SSH的插件

Publish Over SSH用于连接远程服务器


2.1.3.安装把应用发布到远程服务器的插件

Deploy to container插件用于把打包的应用发布到远程服务器


2.2.配置git和NodeJS环境

打开系统管理里面的全局工具配置

2.2.1.安装配置git

如果 下载过就不需要再下载了。

#安装git
yum install git
#查看git的执行文件位置, 默认是在 /usr/bin/git
whereis git

配置git执行命令目录


2.2.2.安装配置NodeJS

按照nodejs可以选择自动下载或手动下载。
自动下载
可能会出现在构建任务的时候卡半天 (不推荐);
自动下载的NodeJS文件保存在/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/ 下面

手动下载
手动下载完NodeJS压缩包上传到服务器指定位置
我本地开发环境用的NodeJS是 v12.18.3版本下载路径是https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.gz,你们可以去https://nodejs.org/dist/ 页面去找你们对应的版本文件
建议别用网页下载,网页下载特别慢,打开迅雷把文件链接放进去几秒钟就下完了.

#把下载好的压缩包上传到服务器的这个目录下面
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
#压缩
cd /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
tar zxvf node-v12.18.3-linux-x64.tar.gz

3.配置git凭证信息

配置git账号密码信息

点击系统管理下面的 Manage Credentials

点击Jenkins

点击全局凭据

点击添加凭据

设置连接git的账号密码信息,然后再设置凭据的唯一ID

4.新建任务配置部署信息

新建任务,然后点构建一个自由风格的软件项目

4.1.配置git地址和凭证信息

点击源码管理，然后配置代码仓库和对应的凭据信息

4.2.指定代码分支
4.3.设置项目的自动发布的触发条件

目前使用的是轮询,
H/5 * * * * 表示每5分钟去查看git代码有没有更新,有更新自动发布

4.4.配置构建环境

选中之前在全局配置添加的NodeJS名称

4.5.设置构建参数和执行的命令

下面2种情况,根据实际需求选择配置

4.5.1.发布项目到本机

设置构建命令
点击增加构建步骤,选择执行shell

把构建项目的命令放进去,然后点击保存就行

#切换目录(我的vue项目在git源码根路径的ocrweb目录下，你们的如果是在根路径下面,cd这个命令请忽略)
#cd ocrweb
#加载依赖
npm install 
#构建代码
npm run build
#复制构建后的文件到nginx里面项目对应的部署目录下
cp dist/* -rf /usr/local/nginx/jenkins/www/ocrweb


由于jenkins服务默认是有jenkins用户启动的,所以要给vue项目发布的目录授权

chmod 777 /usr/local/nginx/jenkins/www/ocrweb

立即构建项目

1.点击我的视图

2.点击刚刚新建的任务

3.点击立即构建

4.点击查看控制台日志

可以看到打印了我们之前配置命令

看到下面的Finished: SUCCESS代表着已经发布成功了。

最后看到文件已经发布到了我配置的nginx容器的目录下面了。

4.5.2.发布项目到远程服务器

需要先设置远程服务器的host,账号,密码
点击系统管理->点击系统配置,找到Publish over SSH选项

需要配置Name,Hostname,Username,Remote Directory
账号认证可以使用密码,key文件,key内容

参数说明

字段描述
Passphrase服务器的密码
Path to key连接远程服务器密钥文件的路径
Key密钥文件的内容
Name自定义服务器名
HostName服务器IP外网地址
UserName服务器用户名
Remote Directory连接上ssh后的默认路径


设置构建命令
比上面写的单机部署的少了cp命令,多个打包命令

#加载依赖
npm install 
#构建程序
npm run build
#切换了编译后的目录
cd dist
#移除之前的压缩包
rm -f ocrweb.tar.gz
#把当前目录的所有文件打包成ocrweb.tar.gz
tar -zcvf ocrweb.tar.gz *



构建后操作
点击增加构建后操作，选中Send build artifacts over SSH

#Source files
dist/ocrweb.tar.gz
#Remove prefix
dist
#Remote directory
usr/local/nginx/jenkins/www/ocrweb
#Exec command
cd /usr/local/nginx/jenkins/www/ocrweb
tar -zxvf ocrweb.tar.gz
rm -f ocrweb.tar.gz 



参数说明

字段描述
Source files项目构建后在工作空间的相对目录(我这边构建时候打包的文件名是ocrweb,所以填写的 dist/ocrweb.tar.gz)
Remove prefix去前缀 (如果不去除的话,会在发布的目录后面新增dist目录)
Remote directoty发布的目录 (系统配置的路径/这个目录, 由于我配置ssh根路径写了/,所以我这里写的路径是usr/local/nginx/jenkins/www/ocrweb)
Exec command发布完执行的命令 (先cd切换到文件发布的目录,然后执行解压操作,然后删除压缩包)


配置完成后,保存,然后点击立即构建，查看控制台日志,看到SSH: Transferred 1 file(s)
Finished: SUCCESS就代表文件已经上传到远程服务了。

登录远程服务器验证文件是否存在。

到这里,大概把jenkins部署vue项目步骤写的差不多了
                        
原文链接：https://blog.youkuaiyun.com/ming19951224/article/details/109633920

Jenkins自动化部署Vue3项目至K8S实践
算法小生
11-21 546
在项目根目录新建builds\k8stest目录，然后新建insole-tool.yaml文件,建好命名空间insole后，修改镜像名，可以直接拿来用。在Vue项目根目录新建default.conf文件，主要进行代理配置、首页配置、端口配置，需修改实际api与IP端口配置。我们希望提交uat分支时，UAT项目能够自动发布，提交master分支时，无需自动发布，管理员手工发布。在Vue项目根目录新建nginx.conf文件，主要配置请求体大小等，不需要修改。我们装好Webhook触发插件后，配置如图所示。
vue项目jenkins自动化部署
2301_78850344的博客
05-15 1461
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
【Vue】——Jenkins自动打包部署VUE项目
...
10-22 3008
个人理解，Jenkins其实是把我们平时打包部署项目的操作弄成一个流程了，按照我们平时打包部署项目的流程去思考，然后找到对应在Jenkins中如何配置就可以实现基础的打包上传部署。
如何通过Jenkins进行自动化构建项目
最新发布
格物致知的专栏 [音视频编解码 网络协议 计算机视觉 计算机图形学 图像理解 语音识别 机器学习 模拟电路 传感器]
04-08 751
Pipeline（流水线项目）：这个选项允许用户创建一个Jenkins Pipeline，在Pipeline中定义了一系列流程和任务，可以自动化构建、测试、打包、发布和部署过程。Freestyle project（自由风格项目）：这个选项允许用户创建一个自定义的项目，可以执行任何任务，无论是构建、测试、部署还是其他工作。新建Item，输入工程的名称(例如 My Pipeline) ，选择多分支流水线（Multibranch Pipeline），确定。配置构建的具体步骤，如编译、打包、测试等。
让 Jenkins 帮你自动布署 Vue 项目
油墨香^-^的博客
03-23 759
Jenkins是开源的,使用Java编写的持续集成的工具，在Centos上可以通过yum命令行直接安装。Jenkins只是一个平台，真正运作的都是插件。这就是jenkins流行的原因，因为jenkins什么插件都有。首先登录服务器更新系统软件安装Java和git安装nginx$ yum install nginx //安装$ service nginx start //启动出现Redirecting to /bin/systemctl start nginx.service。
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
Jenkins自动化部署Vue项目
热门推荐
前端小丑
02-18 2万+
Jenkins 自动化部署vue项目
【Jenkins】部署vue项目（多种方式部署）
怀着一颗学徒的心
07-24 1万+
🥕第一种 （npm run build）打包的形式 🥕第二种 （npm run test）直接启动的形式 🥕第三种 使用docker镜像打包脚本
Jenkins 自动部署VUE项目
weixin_42555971的博客
03-19 4335
文章目录CI/CD的总流程配置 NodeJS 环境安装插件安装环境新建任务配置构建环境编写构建脚本项目配置配置 Dockerfile配置 nginx CI/CD的总流程 持续集成和持续发布的流程 流程简述： 1 用户提交代码 2.1 从 gitlab 拉取最新代码 2.2 使用 maven 构建成 jar 2.3 制作镜像 2.4 推送镜像到 Harbor 3.1 从 Harbor 拉取镜像 3.2 运行镜像 架构搭建可以参考本人另一篇文章，基于GitLab Jenkins DockerHub Sprin
详解jenkins自动化部署vue
11-29
这样我们就能在自动构建发布的配置里看到nodejs的编译选项了 二、发布配置 首先新建一个自由风格的项目 然后配置构建保留天数和参数化构建 这里选择在svn上的资源，配置好访问的用户信息   这样我们在构建的...
jenkins自动化部署vue项目
lxw的博客
05-27 1822
jenkins自动化部署vue项目
[手把手系列之] Jenkins自动化部署vue前端项目
XieStrong
12-27 4011
简介：Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成点击下面的链接进入官网选择最新的版本下载，然后一键安装即可。windows版本Jenkins下载。
使用Jenkins自动部署vue项目
andyLyysh的博客
01-07 2629
超详细的Jenkins自动化部署Vue项目教程
Jenkins nginx自动化构建前端vue项目
lchmyhua88的博客
06-23 1554
在现代的Web开发中，Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目，使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署（CI/CD）工具，为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自动化构建Vue.js项目的步骤。
jenkins 自动化部署vue项目（最简版）
m0_61452987的博客
02-28 6808
1、安装jenkins: 参考链接： （1）centos安装jdk和jenkins_骑着骆驼去看海的博客-优快云博客 （2）centos7.3安装配置jenkins完整版_lxw的博客-优快云博客 2、CentOS安装 node.js 和 git 参考链接： （1）CentOS7 安装 nodejs - klvchen - 博客园 （2）CentOS 安装最新版本 Git - 江湖小小白 - 博客园 (cnblogs.com) 3、打开jenkins进行配置 * 任务名字按自己的需...
自动化部署—Jenkins集成Vue项目（内网环境版）
IT侠客行的博客
10-10 1335
最近由于公司项目，所有开发和环境都在内网环境下实现，由于内网无法访问外网，我不得已在本地电脑上安装虚拟机VM，装上了CentOS7，在CentOS7下载了相关Jenkins，GitLab，Nginx+Nexus依赖包（rpm方式），前端平台架搭好了要把项目放到服务器运行，但是每次更新网站内容就要手动部署一次，实在很麻烦，于是就想搭建一套自动化部署的服务。看了一些案例最后选用现在比较主流的Jenkins+GitLab+Nginx+Git+Nexus实现CI/CD的方案来搭建。
Jenkins 构建Vue项目
Leiante的专栏
12-14 593
一、配置构建环境 通过Docker安装的Jenkins都会自带安装JDK 查看Jenkins 容器中的环境变量 $ echo $PATH $ vi /etc/profile #JDK export JAVA_HOME=/usr/local/openjdk-8 export PATH=$PATH:$JAVA_HOME/bin: export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar 进入Jenkins管理页面配置J
Jenkins Vue项目部署
01-11
### 使用 Jenkins 部署 Vue 项目的教程 #### 准备工作 为了成功使用 Jenkins 来部署 Vue 项目，需先完成一些准备工作。确保已安装并配置好了 Java 环境以及 Docker 环境，因为 Jenkins 是基于 Java 开发的应用程序，并且通过 Docker 可简化其部署过程[^2]。 #### 创建 Jenkins 工程 进入 Jenkins 控制面板创建一个新的自由风格软件项目工程，在此过程中需要指定 Git 存储库地址以便于获取源码。务必提供拥有访问权限的凭证以确保能够顺利克隆仓库中的代码[^1]。 ```bash git clone https://your-repo-url.git ``` #### 构建与测试阶段 对于 Vue.js 应用来说，构建流程通常涉及执行 `npm install` 和 `npm run build` 命令来编译应用程序到生产版本。可以在 Jenkinsfile 中定义这些步骤： ```groovy pipeline { agent any stages { stage('Install Dependencies') { steps { sh 'npm ci' } } stage('Build Project') { steps { sh 'npm run build' } } // 测试可以在此处加入单元测试或其他自动化测试脚本 } } ``` #### 发布至服务器 当构建完成后，下一步就是将生成好的静态资源发布到目标 Web 服务器上。这一步骤可以通过多种方式实现，比如 SCP 协议传输文件、利用 FTP/SFTP 或者直接调用 API 接口上传文件等。如果是在 Linux 上，则可能涉及到 SSH 远程登录操作[^3]。 ```bash scp -r dist/* user@remote:/var/www/html/ ``` 或者采用更现代的方式——借助 CI/CD 平台内置插件或工具链来进行无缝集成和服务端更新动作。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值