宝塔+docker+jenkins 自动化部署vue项目(2025最全步骤手把手教程)

一、首先咱们先要有自己的服务器

可以参考这篇文章怎么购买服武器

购买服务器教程: 购买服务器教程

二、服务器安装jenkins

第一种方法:使用docker下载jenkins镜像

点击看我这篇文章使用docker安装jenkins

第二种方法: 下载jenkins war包

1.注意:Jenkins只支持Java 11 或 17 , 把下载的jenkins.war包上传服务器

下载地址: http://mirrors.jenkins.io/war-stable/latest/jenkins.war

2.上传war包

在这里插入图片描述

3.点击添加java项目,jar路径设置为jenkins.war文件
端口放行6788

在这里插入图片描述

4.输入http://服务器地址:6788

在这里插入图片描述

在这里插入图片描述

直接安装推荐插件

在这里插入图片描述

如果一直都是红色的 x 号,这里需要看下自己的 war 包是不是最新的 ,另外 jdk 版本是不是太低了,建议安装17的jdk

在这里插入图片描述

安装成功后创建管理员账号(一定要记住这个也是登录账号密码)

在这里插入图片描述

这里实例配置直接默认 就行

在这里插入图片描述

安装成功

在这里插入图片描述

三、配置jenkins

首先打开下载插件的页面

在这里插入图片描述
可以先安装中文插件 Locale pluginLocalization: Chinese (Simplified)
在这里插入图片描述
应用中文
在这里插入图片描述
在这里插入图片描述

1.安装插件 NodeJS、Publish Over SSH 、gitee 下面的都照这样安装

在这里插入图片描述

  1. 接下来添加凭证(这里我认为的是添加全局账号密码例如服务器账号、git账号密码)部署时候用

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

这里我创建了服务器账号密码和git账号密码

在这里插入图片描述

成功

在这里插入图片描述

4.接下来配置node工具

在这里插入图片描述

在这里插入图片描述

设置好 勾选自动安装然后应用=》保存(听说不要选择18版本的node)

  1. 接下来配置服务器SSH , 首先在宝塔中开启SSH

在这里插入图片描述

6.点击 system ,设置ssh,进去划到最下面

在这里插入图片描述

找到 Publish over SSH
需要配置
Passphrase 服务器SSH远程连接密码
SSH Servers中
Name 服务器名称(随便起名)
Hostname 主机号 例如192.168.0.1 (实际主机号,不需要端口号)
Username 服务器SSH远程连接账号
Remote Directory 进入的路径

配置好后点击测试 ,success 表示成功了

在这里插入图片描述

输入完成之后点击右下角测试 显示成功说明成功连接,失败发现没添加密匙

去宝塔把ssh密匙复制过来

在这里插入图片描述

复制到Publish over SSH key中,再点测试连接后成功

在这里插入图片描述

在这里插入图片描述

四、创建项目并且配置

1.创建项目

在这里插入图片描述

在这里插入图片描述

2.输入项目git地址并且选择配置好的git账号密码

在这里插入图片描述

  1. 构建触发器 勾选 我使用的是gitee,所以需要在jenkins中安装gitee插件

在这里插入图片描述

在这里插入图片描述

通过 「仓库主页」->「管理页面」->「WebHooks」 添加 WebHook

URL:接收 WebHook 数据的 http 地址,Gitee会发送 Post 请求到这个地址。 WebHook
密码/签名密钥:保证安全以及识别数据来源 Tips: URL以及密码根据刚才Jenkins中配置的Gitee
Webhooks触发构建生成的信息填入

在这里插入图片描述
先保存我们刚刚配置好的一些数据,后面还可以再进行修改编辑配置,我们可以先去测试一下看看,有没有触发构建器,去到我们的项目代码,随便改点东西,并提交到仓库,在我们的jenkins中观察我们有没有触发自动构建。
在这里插入图片描述

4.构建环境

在这里插入图片描述

5.构建步骤
tips:更换镜像源可以不要
在这里插入图片描述

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

6.下一步应该发到你的服务器,这里点击添加构建步骤

在这里插入图片描述

在这里插入图片描述

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

  1. 应用保存,就可以去尝试部署了

在这里插入图片描述

成功!

在这里插入图片描述

在这里插入图片描述

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐