2023宝塔安装jenkins 自动部署vue到服务器
本人用的宝塔面板,现在软件商店中安装docker在服务器终端中输入如下命令:1.下载jenkins镜像docker pull jenkins/jenkins:lts//lts表示支持版本较长2、创立jenkins挂载目录并赋权限mkdir -p /mydata/jenkins_homechown -R 1000 /mydata/jenkins_home/3、创立并启动Jenkins容器docker
本人用的宝塔面板
有以下两种方式安装jenkins
一、通过docker安装
先在软件商店中安装docker
在服务器终端中输入如下命令:
1.下载jenkins镜像
docker pull jenkins/jenkins:lts //lts表示支持版本较长
2、创立jenkins挂载目录并赋权限
mkdir -p /mydata/jenkins_home
chown -R 1000 /mydata/jenkins_home/
3、创立并启动Jenkins容器
docker run -di --name=jenkins -p 8080:8080 -v /mydata/jenkins_home:/var/jenkins_home jenkins/jenkins:lts
-d 标识是让 docker 容器在后盾运行
-p 10240:8080 将镜像的8080端口映射到服务器的10240端口
-p 10241:50000 将镜像的50000端口映射到服务器的10241端口
-v /mydata/jenkins_home:/var/jenkins_home目录为容器jenkins工作目录,咱们将硬盘上的一个目录挂载到这个地位,不便后续更新镜像后持续应用原来的工作目录。这里咱们设置的就是下面咱们创立的 /var/jenkins_mount目录
--name定义一个容器的名字,如果没有指定,那么会主动生成一个随机数字符串当做UUID
4.搭建成功
到这个页面后等待即可
到这里后有个密码是要输入的,通过以下命令获取
docker logs jenkins
接着到新手入门界面
- 选择安装推荐的插件
- 创建第一个管理员用户,自己创建用户名和密码即可
- 实例配置的URL可以不用改,默认即可
- 保存并完成
- 点击重启按钮
5.配置插件
进入jenkins,在系统管理中安装插件
安装插件 NodeJS Plugin 、Publish Over SSH 、SSH plugin
6.添加凭据
点击全局后 进入新的页面,点击左侧的添加凭据
用户名:服务器账号
密码:服务器密码
ID:标识
描述:描述
填完后点击保存即可
7.全局工具配置
Dashboard》》》(左侧)系统管理》》》(右侧)全局工具配置
配置node
然后点击应用、保存按钮
切记,千万不要选择18版本的,不然构建的时候会出问题----血的教训
8.全局配置
Dashboard》》》(左侧)系统管理》》》(右侧)系统配置
配置 SSH remote hosts》SSH sites
配置Publish over SSH
这一步最重要,就是构建后把包部署到服务器上,首先这不是需要一个key
回到宝塔终端,以下步骤
1.终端输入: ssh-keygen (建立密钥对) ,一路回车键即可,如果要输入y的,请输入y
2.cd .ssh 会看到密钥和公钥
3.在宝塔中开放秘钥登录
接下来回到jenkins:
1.Dashboard》》》(左侧)系统管理》》》(右侧)系统配置
2.Publish over SSH》key》复制刚才的秘钥
3.配置SSH Servers
点击应用、保存按钮
9.新建任务(项目自动部署)
这里我用的是gitee,需要配置git凭证,回到步骤6,添加gitee登录的用户名和密码即可,直接上配置图
接下来点击构建步骤,添加执行shell
命令如下:
echo "开始构建"
node -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build
#进入到打包目录
cd dist
#删除上次打包生成的压缩文件
rm -rf *.tar.gz
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y-%m-%d-%H-%M-%S`.tar.gz *
#回到上层工作目录
cd ../
echo "构建结束"
继续点击增加构建步骤,选择如图所示,配置构建后部署到服务器上
命令如下:
#进入远程服务器的目录
cd /www/wwwroot/你的项目地址
#找到新的压缩包
tar -zxvf *.tar.gz -C ./
echo ">>>移除*.tar.gz"
rm -rf *.tar.gz
#发布完成
echo "发布完成"
点击应用、保存按钮即可
这个时候基本搭建完成了
点击构建即可自动打包部署
10.扩展(配置webhook,git仓库有推送时自动构建)
Dashboard》插件管理》搜索Generic Webhook Trigger并安装
这个时候需要一个token
Dashboard》用户列表中选择你的项目所对应的用户,在用户名列表最右侧有位于字段提示您该用户所包含的项目
此时会看到API Token选型,只需要点击添加新的Token即可获得一个token,复制token
配置仓库的webhook
URL地址如下:
http://<您的jenkins访问路径>/generic-webhook-trigger/invoke?token=<您刚刚复制的token>
回到jenkins中,重新配置项目,新增一项配置
选中后点击应用、保存即可
配置完后回到项目中重新推送代码,就能自动触发构建了
--------------------分割线–2020.5.14-----------------
二、通过war包方式安装(简单)
1.安装java管理器
注意:tomcat8端口默认是8082,需要放心宝塔8082端口和服务器比如我腾讯云安全组端口8082,不然访问不到
2.下载war包
下载jenkins包地址:https://www.jenkins.io/download/
注意:下载完后会自动解压
3.访问jenkins
http://你的ip:8082/jenkins
----------------2022年6月15号更新-----------------------------------------
三、参数化构建 不同分支、ip、端口等
通常,我们需要构建部署不同分支、域名、端口等信息,所以进一步进行动态配置。
1.npm传参
// 中间的-- 必须要传,当然,不传的话,也可以有别的方式获取,不做讨论
$ npm run serve -- --ip=888 --portNum=8080 --title=沐歌的网站
--ip:传入的IP地址
--portNum:端口号,由于--port会被覆盖原本的port端口,所以换了名
--title:网站名称
语法:--名称=你要传递的参数
2.配置webpack接收参数
这里要注意,必须要配置,不然只能在node环境接收到。
根目录下新建 vue.config.js
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
"process.argv": JSON.stringify(process.argv)
})
]
}
}
3.创建config.js(名字随意)
/*
* @Author: muge
* @Date: 2022-06-14 14:16:00
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-06-15 10:57:30
*/
//通过process.argv接收传递的参数
//这里可作为全局的变量导出
const argv = process.argv; //获取npm参入参数
const IP = "--ip"; //ip
const PORT = "--portNum"; //端口号
const TITLE = "--title"; //网页名称
export let ip = "locahost.1.1"; //ip
export let port = "22"; //端口
export let title = "沐歌"; //网页名称
for (let i = argv.length; i--; ) {
const element = argv[i];
const arrs = element.split("=");
if (arrs.length === 2) {
if (arrs[0] === IP) {
ip = arrs[1];
}
if (arrs[0] === PORT) {
port = arrs[1];
}
if (arrs[0] === TITLE) {
title = arrs[1];
}
}
}
四、配置jenkins参数
上面三部配置的都是vue项目,下面的才是jenkins的配置,直接上图
大功告成
-----------------------------------------分割线–2022.7.20---------------------------
四、归档成品
也就是构建完后的存档
**/*.gz
注意,多个文件存档需要通过 “,”分隔
最后构建之后就能看到了
更多推荐
所有评论(0)