2023宝塔安装jenkins 自动部署vue到服务器

2023宝塔安装jenkins 自动部署vue到服务器

本人用的宝塔面板
有以下两种方式安装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

接着到新手入门界面

1. 选择安装推荐的插件
2. 创建第一个管理员用户，自己创建用户名和密码即可
3. 实例配置的URL可以不用改，默认即可
4. 保存并完成
5. 点击重启按钮

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=
cnpm install
npm run build
#进入到打包目录
cd dist
#删除上次打包生成的压缩文件
rm -rf *.
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y-%m-%d-%H-%M-%S`. *
#回到上层工作目录
cd ../
echo "构建结束"

继续点击增加构建步骤，选择如图所示，配置构建后部署到服务器上


命令如下：

#进入远程服务器的目录
cd /www/wwwroot/你的项目地址
#找到新的压缩包
tar -zxvf *. -C ./
echo ">>>移除*."
rm -rf *.
#发布完成
echo "发布完成"

点击应用、保存按钮即可

这个时候基本搭建完成了


点击构建即可自动打包部署

10.扩展（配置webhook，git仓库有推送时自动构建）

Dashboard》插件管理》搜索Generic Webhook Trigger并安装
这个时候需要一个token
Dashboard》用户列表中选择你的项目所对应的用户，在用户名列表最右侧有位于字段提示您该用户所包含的项目
此时会看到API Token选型，只需要点击添加新的Token即可获得一个token,复制token
配置仓库的webhook

URL地址如下：

<您的jenkins访问路径>/generic-webhook-trigger/invoke?token=<您刚刚复制的token>

回到jenkins中，重新配置项目，新增一项配置

选中后点击应用、保存即可

配置完后回到项目中重新推送代码，就能自动触发构建了

--------------------分割线–2020.5.14-----------------

二、通过war包方式安装（简单）

1.安装java管理器

注意：tomcat8端口默认是8082，需要放心宝塔8082端口和服务器比如我腾讯云安全组端口8082，不然访问不到

2.下载war包

下载jenkins包地址：/

注意：下载完后会自动解压

3.访问jenkins

你的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环境接收到。
根目录下新建

const webpack = require('webpack');
ports = {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

注意，多个文件存档需要通过 “,”分隔
最后构建之后就能看到了