Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)

这篇具有很好参考价值的文章主要介绍了Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)

1、系统环境准备,安装openjdk和nginx还有MySQL,咱们本文先连接主机mysql进行登录(linux上的mysql服务可以先不安装)

可以看我前面的文章
华为openEuler系统安装openjdk并配置环境变量
openEuler系统安装nginx
HUAWEI-OpenEuler系统安装MySQL服务器并使用详细步骤
Ubuntu安装MySQL服务器详细步骤

2、打包后端SpringBoot项目并部署到Linux系统中

2.1、打包

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理
在确定项目可以正常运行的前提下,进行package打出jar包
nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

2.2、将打的jar包放到咱们的linux系统中的opt目录下,可以在新建文件夹

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

3、打包前端Vue项目并部署到nginx中

3.1、在vue项目的package.json文件中将build配置做下面更改(删掉注释的那行,不然不能成功打包)

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

3.2、运行npm run build命令进行打包项目

npm run build

打包成功后在项目文件路径下出现dist文件夹
nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

3.3、将打包的dist文件夹放到linux系统中的nginx的html路径下

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

4、配置nginx代理前端项目并实现均衡负载

4.1、编辑nginx配置文件

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理
nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

4.2、重新加载nginx配置文件(nginx -s reload)

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

4.3然后就可以通过linux的ip的默认80端口看到vue项目的首页

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

5、在linux系统中运行该SpringBoot+Vue前后端分离项目

5.1、进入到jar包所在的文件夹运行SpringBoot后端服务

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理
如果不配置端口号则以你原本配置的端口号为默认端口,我原来的后端服务端口是8088
nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

5.2、再次打开一个命令窗口使用其他端口打开后端服务,测试nginx的均衡负载

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

注意:上面两个打开服务的端口号要和配置nginx均衡负载里面的两个端口号保持一致

5.3、再次打开命令窗口,打开这两个端口的防火墙

> firewall-cmd --zone=public --add-port=8088/tcp --permanent
> firewall-cmd --zone=public --add-port=8089/tcp --permanent
> firewall-cmd --reload

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

5.4、大家可以看我的这篇文章进行mysql的安装(如果使用主机mysql可以先不安装)

HUAWEI-OpenEuler系统安装MySQL服务器并使用详细步骤
Ubuntu安装MySQL服务器详细步骤

5.5、修改主机后端项目的mysql连接为通过本机ip连接

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

5.6、设置root用户允许远程连接

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

将重新打包的后端jar包重新导入到linux中再次运行

即可使用数据库成功登录
nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

6、nginx均衡负载测试

多次点击项目任意请求,观察虚拟机中两个命令窗口的控制台信息

8088服务窗口

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理

8089服务窗口

nginx部署springboot项目,# Linux,JAVA全栈学习路线,linux,spring boot,vue.js,openeuler,华为,nginx,均衡代理文章来源地址https://www.toymoban.com/news/detail-842861.html

可以看出两个服务端口轮流接收请求,满足之前nginx设置的权重!!!

到了这里,关于Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿鹄工程项目管理系统源码 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统

       鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展,企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性,公司对内部工程管理的提升提出了

    2023年04月11日
    浏览(43)
  • 鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统项目背景

     鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展,企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性,公司对内部工程管理的提升提出了更高

    2024年02月08日
    浏览(45)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(42)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【四】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【四】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(40)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】的,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,

    2024年02月11日
    浏览(42)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】的分享,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地

    2024年02月11日
    浏览(48)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月10日
    浏览(43)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(42)
  • 手把手教你搭建Spring Boot+Vue前后端分离

    1 什么是前后端分离 前后端分离是目前互联网开发中比较广泛使用的开发模式,主要是将前端和后端的项目业务进行分离,可以做到更好的解耦合,前后端之间的交互通过xml或json的方式,前端主要做用户界面的渲染,后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建

    2023年04月08日
    浏览(52)
  • Java之Spring Boot+Vue+Element UI前后端分离项目

    typeId : this.typeId, }).then((res) = { this.$router.push(“/”); this.$message.success(“文章发布成功!”); }).catch(() = { this.$message.error(“文章发布失败!”); }); }, handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); this.thumbnail = “http://localhost:9090/img/” + res; }, selectType(typename,id) { t

    2024年04月27日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包