宝塔+jenkins 部署vue项目(2024最全步骤手把手教程)

已于 2024-07-27 18:15:38 修改
阅读量466 收藏 5
点赞数 6
文章标签： jenkins vue.js 运维 javascript 前端 java
于 2024-07-26 23:18:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52132550/article/details/140726372
版权

宝塔+jenkins 部署vue项目(2024最全步骤手把手教程)

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

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

购买服务器教程: http://t.csdnimg.cn/j86iB

二、有自己的服务器后进入宝塔面板

使用宝塔安装docker

在软件商城安装Docker管理器

在这里插入图片描述

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

docker pull jenkins/jenkins:lts        //lts表示支持版本较长

在这里插入图片描述

1.创立jenkins挂载目录并赋权限

mkdir -p /mydata/jenkins_home
chown -R 1000 /mydata/jenkins_home/

2.创立并启动Jenkins容器

我这里设置的端口为8080
启动之前需要在云服务器管理平台和宝塔开通相应端口号

docker run -di --name=jenkins -p 8080:8080 -v  /jenkins_home:/var/jenkins_home jenkins/jenkins:lts

-d 标识是让 docker 容器在后盾运行
-p 8080:8080 将镜像的8080端口映射到服务器的8080端口
-v  /jenkins_home:/var/jenkins_home目录为容器jenkins工作目录，咱们将硬盘上的一个目录挂载到这个地位，不便后续更新镜像后持续应用原来的工作目录。这里咱们设置的就是下面咱们创立的 /var/jenkins_mount目录
--name定义一个容器的名字，如果没有指定，那么会主动生成一个随机数字符串当做UUID

在这里插入图片描述

在这里插入图片描述

第二种方法： 下载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 plugin， Localization: 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. 应用保存,就可以去尝试部署了

在这里插入图片描述

成功！

在这里插入图片描述

在这里插入图片描述

心肝到爆
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jenkins部署前后端分离项目最全图文教程（手把手教学）
黄团团的个人博客
07-20 2961
最近Jenkins部署的热度比较高，于是就想出一篇关于我是如何使用Jenkins部署前后端分离项目的，本篇记录了我是如何一步一步去配置、搭建和部署的完整流程，每一行代码都进行了实测和讲解，通过图文的教学写成博客分享给大家！
手把手教学使用宝塔面板部署前后端分离项目（全面详细）
黄团团的个人博客
07-01 5152
平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。
【小白福音】手把手教学搭建Vue+SpringBoot开发环境完整教程
黄团团的个人博客
11-03 318
前言：在很多新手小白在准备开发一个属于自己的前后端分离项目的时候需要准备一些例如Java环境配置、Node.Js配置、Maven配置以及软件安装等等，于本次博主亲自录制了一套完整的安装配置教程，提供到最后给大家进行下载。
手把手通过Docker部署前后端分离项目（亲测可用）
黄团团的个人博客
08-21 7500
Docker基本安装和部署Nginx、MySQL、Vue和SpringBoot项目学习笔记（亲测可用），这里我用的是阿里云的服务器，环境是CentOS7！分享一些自己在学习路上的一些笔记，欢迎大家共同交流与探讨！
Linux系统部署若依前后端分离项目（手把手教学）
黄团团的个人博客
11-08 668
若依框架是目前一款非常优秀的开源框架，包括我自己也在用，本篇博客我就出一篇完整的部署若依前后端的博客，我这边以及提前部署好了MySQL、Redis以及Nginx，没有部署的可以看博主的部署教程，都汇总在了下方。
【完整详细】使用Alibaba Cloud Toolkit插件一键部署前后端分离项目
黄团团的个人博客
11-08 2412
在实际项目开发当中，如果需要更新项目的jar包或者dist文件夹，需要手动替换掉服务器当前的jar包或者dist文件夹，再通过shell脚本重新启动，久而久之就会被这种重复且繁琐的操作感到厌烦，本篇博客带大家如何通过一个插件实现一键部署。
【完整详细】IntelliJ IDEA中使用Docker插件一键部署前后端分离项目
黄团团的个人博客
11-16 913
在使用Docker部署我们的前后端分离项目的时候，会涉及到一堆且重复的Docker命令，久而久之就会被这些重复性的操作感到繁琐，本篇博客教学大家如何通过IDEA自带的一款插件就可以实现一键部署前后端分离项目的操作，从头到尾我写的非常详细，大家逐步阅读即可。
Linux系统部署Nginx详细教程（图文讲解）
黄团团的个人博客
07-19 3186
本篇博客记录了我是如何使用Linux系统一步一步部署Nginx的完整过程，也是我学习之路上的一个笔记总结，每一行代码都进行了严格的测试，特此做一个技术分享！
手把手教你搭建一个漫画小说网站？（有斗罗大陆和斗破苍穹漫画的福利哦）
热门推荐
lianzhang861的博客
01-12 2万+
由于《斗罗大陆》和《斗破苍穹》动漫的热播，让我深深沉迷其中，因为动画更新的太慢了，搞得我只能去找小说，找漫画去过瘾，来来回回也刷了不少遍了。 在这个过程中，由于热爱，我甚至把他们的漫画全都下载了下来，想随时随地的看，啊哈哈哈哈哈哈哈哈嗝 然后下载下来图片，在电脑上一张一张翻着看并不方便，所以便萌生了自己搭建一个小说网站的想法，真正的在手机上随时随地的看。 如何搭建一个漫画小说网站？ PS：小说和漫画都有版权，本文主要交流技术，请勿用做商用盈利 ...
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
gitlab+jenkins+docker自动化部署脚本
12-30
gitlab+jenkins+docker自动化部署脚本，采用shell与python开发，其中python部分均为封装成型的逻辑，只接受shell传参就能完成项目构建
使用Jenkins部署React项目的方法步骤
10-17
在本文中，我们将探讨如何使用Jenkins部署React项目，这是一个自动化构建和部署的过程，可以极大地提高开发效率并减少人为错误。Jenkins作为一个流行的持续集成和持续部署(CI/CD)工具，可以帮助我们实现React项目的...
jenkins结合gitlab部署vue项目
11-25
本篇文章将详细讲解如何在Windows环境下，利用Jenkins结合GitLab来部署Vue.js（版本3）项目。我们将涵盖所需的软件环境、配置步骤以及操作过程中的关键点。 首先，确保你的系统已经安装了以下组件： 1. **Jenkins**...
jenkins删除历史构建记录
qq_39495959的博客
07-23 517
2、点击运行即可删除历史构建记录。
jenkins流水线语法--withCredentials篇
最新发布
qq_70531838的博客
07-24 354
在代码中不怎么严谨，也缺失安全性；在网上查找资料和大佬们的博客，得出一篇完整详细步骤，大家共同学习，也当为自己作个备忘录。在jenkinsfile中进行harbor登录上传镜像时。#2 安装Credentials Binding。Dashboard > 系统管理 > 凭证管理。#1 进入项目 或 创建新流水线。#3 使用流水线语法来自动生成。print("完结撒花")
jenkins集成allure测试报告
qq_39495959的博客
07-23 887
（2）选择【Available】选项，搜索输入框输入Allure，搜索出来的名字就叫Allure，当安装后名字会变为Allure Jenkins Plugin。（2）全局配置页下拉到最后一项，你会看到“Allure Commandline”项， 按下图配置之后保存即可。（1）点击首页的【Manage Jenkins】-【Global Tool Configuration】（1）点击首页的【Manage Jenkins】-【Manage Plugins】（3）进入项目的配置。
Jenkins Job构建自动化流程
weixin_41605826的博客
07-23 1056
在Jenkins中，Job代表一个任务或项目，是可配置与可执行的。执行后的记录称为Build，包括日志监控与记录，所有文件集中保存，便于后续查看和管理。Jenkins提供了多种类型的Job，如Freestyle project、Pipeline Job、External job和Multi-configuration project等，每种类型都有其特定的应用场景和优势。
jenkins部署vue项目
03-29
Jenkins是一个开源的自动化构建工具，可以用来部署各种类型的应用程序，包括Vue.js项目。下面是一些步骤，可以帮助您使用Jenkins来部署Vue.js项目。 1. 安装Jenkins：Jenkins可以在Windows、Linux和macOS等操作系统上运行，您可以根据自己的需求选择适合的版本并安装。 2. 安装Jenkins插件：Jenkins有许多有用的插件，可以帮助您完成各种任务。对于Vue.js项目，您需要安装以下插件： - NodeJS插件：用于安装和管理Node.js环境。 - Git插件：用于从GitHub或其他Git存储库中获取源代码。 - Publish Over SSH插件：用于将构建好的文件上传到服务器。 3. 配置Node.js环境：在Jenkins中配置Node.js环境可以让您在构建时使用npm和其他Node.js工具。 - 在Jenkins管理界面中，选择“Global Tool Configuration”。 - 在“NodeJS”部分，单击“Add NodeJS”按钮。 - 输入Node.js的名称和安装路径，并保存配置。 4. 创建Jenkins构建任务：在Jenkins中创建一个新的构建任务，用于构建和部署Vue.js项目。 - 在Jenkins主页面上，单击“New Item”按钮。 - 输入任务名称，并选择“Freestyle project”。 - 在“Source Code Management”部分，选择Git，并输入GitHub存储库的URL和凭据。 - 在“Build”部分，单击“Add build step”，选择“Execute shell”。 - 在“Execute shell”中，输入以下命令： ``` npm install npm run build ``` 这将安装项目所需的所有依赖项，并构建Vue.js项目。 - 在“Post-build Actions”部分，单击“Add post-build action”，选择“Send build artifacts over SSH”。 - 在“SSH Server”部分，输入服务器的IP地址、用户名和密码，并保存配置。 - 在“Transfers”部分，输入构建好的文件的路径和服务器上的目标路径。可以使用通配符来指定文件路径。 5. 运行构建任务：现在，您可以运行构建任务，并等待Jenkins将构建好的文件上传到服务器。 - 在Jenkins主页面上，单击构建任务名称。 - 在任务页面上，单击“Build Now”按钮。 - 等待构建完成，并检查Jenkins控制台输出是否有任何错误。 - 检查服务器上的目标路径，确保上传的文件已经到达目标路径。 6. 访问Vue.js项目：现在，您可以在Web浏览器中访问Vue.js项目，并查看它是否已经成功部署到服务器上。 以上是使用Jenkins部署Vue.js项目的基本步骤。您可以根据自己的需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值