jenkins自动构建部署vue

目录

简介

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.发布项目到远程服务器


简介

 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.csdn.net/ming19951224/article/details/109633920

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Jenkins来实现Vue项目的自动部署。下面是一个简单的步骤: 1. 安装Jenkins:首先,你需要在你的服务器上安装Jenkins。你可以根据官方文档或者其他资源来完成安装过程。 2. 配置Jenkins:一旦安装完成,你需要通过浏览器访问Jenkins的网址,并且按照指引完成初始设置。这可能包括创建管理员账户、安装插件等。 3. 创建一个新的Jenkins任务:在Jenkins主页,点击"新建任务"按钮,然后输入任务名称和选择"自由风格"项目类型。 4. 配置代码仓库:在任务配置页面的"源码管理"部分,选择你的代码仓库类型(如Git),并提供代码仓库的URL和凭据(如果有的话)。 5. 配置构建步骤:在任务配置页面的"构建"部分,添加构建步骤。对于Vue项目,你可以使用以下命令来构建: ``` npm install npm run build ``` 这将安装项目依赖并生成静态文件。 6. 配置部署步骤:在任务配置页面的"构建后操作"部分,添加部署步骤。你可以使用SSH插件或者其他适用的插件来实现远程部署。 如果你使用SSH插件,你需要提供远程服务器的地址、凭据和部署命令。部署命令应该包括将构建后的静态文件复制到远程服务器的指定目录。 如果你使用其他插件或者工具来进行部署,根据插件或者工具的文档进行配置即可。 7. 保存任务配置并运行任务:一旦你完成了任务配置,点击"保存"按钮,并运行任务。Jenkins将根据你的配置自动构建部署Vue项目。 请注意,这只是一个简单的示例,你可能需要根据你的具体情况进行适当的调整和配置。此外,确保你的服务器和部署目标环境已经正确配置,并且有足够的权限来执行构建部署操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值