一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署

这篇具有很好参考价值的文章主要介绍了一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🧑‍💻作者名称:DaenCode
🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。
😎人生感悟:尝尽人生百味,方知世间冷暖。
📖所属专栏:SpringBoot实战


一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器


思维导图

一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

🌟前言

日常开发项目上线或者部署个人博客网站,都离不开线上服务器部署应用。本文带你学会线上部署应用。以腾讯云轻量应用服务器部署SpringBoot、Vue项目为例。

🌟云服务器配置

域名配置

1.进入到轻量应用服务器控制台,选中域名。如下图所示
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
2.如果是首次购买域名,点击添加域名。之后点击添加域名解析
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
3.此时是A记录,主机名前方命名根据个人需要起名称。一定要勾选实例
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

端口开放-防火墙配置

1.找到服务器中的防火墙配置,进行开发端口。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
2.添加规则。进行端口号添加即可。但是平常不使用ssh登录时,尽量关闭22端口,为了服务器安全。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

🌟JDK安装及配置

这里我在linux中的/usr/local/下创建了software文件夹用于后续文件的上传。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

1.上传JDK包到linux中,我这里采用的是xftp。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
2.通过tar -zxvf jdk-8u171-linux-x64.tar.gz进行解压。这里我已经提前安装过就不再演示了。
3.通过vim /ect/profile配置环境变量。vim的使用方法大家可网上查阅,这里不进行赘述。注意JAVA_HOME的路径为你jdk安装的路径。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
4.通过source /ect/profile使环境变量生效。
5.通过java -version验证是否安装成功。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

🌟Nginx安装以及配置

1.安装依赖。

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel​

2.上传nginx包,并使用tar -zxvf nginx-1.13.7.tar.gz ​解压。需要服务器开放80端口。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
3.进入到配置文件目录/usr/local/nginx/conf。这里注意nginx默认安装目录为/usr/local/nginx。

cd /usr/local/nginx/conf

4.修改配置文件。vim nginx.conf。其中红框部分为新增或者修改内容。
解释:

  • upstream部分为你服务器的ip地址+后端项目的访问端口。lbs命名相当于变量名,随意即可。
  • server中的location第一个是接口代理地址配置。proxy_pass中//后的名称要和你上方upstream后的名称一致。
  • server中的location第二个location是前端项目路径的地址配置。写在root处即可。
    一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
    5.重新启动nginx加载配置文件,使其生效。
./nginx -s reload

🌟MySQL安装

1.通过以下命令进行MySQL环境的准备。

#下载mysql的Yum仓库
wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

yum -y install mysql57-community-release-el7-10.noarch.rpm

#安装 mysql服务
yum -y install mysql-community-server

#启动数据库服务, systemctl 该命令可用于查看系统状态和管理系统及服务,centos7上开始使用
systemctl start  mysqld.service

#查看状态
systemctl status mysqld.service

#在日志文件中查看初始密码
grep "password" /var/log/mysqld.log

#进入时输入默认密码,之后修改Mysql密码

mysql -uroot -p

#新密码设置必须由大小写字母、数字和特殊符号组成
ALTER USER 'root'@'localhost' IDENTIFIED BY '你的密码';

#开启mysql的远程访问, %是指全部
grant all privileges on *.* to 'root'@'%' identified by '你的密码' with grant option;

#刷新权限
flush privileges; 

在执行yum -y install mysql57-community-release-el7-10.noarch.rpm遇到问题:
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
通过以下方式解决:

rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
//再次执行
yum -y install mysql57-community-release-el7-10.noarch.rpm

2.在mysql数据库中导入项目中用到的数据库脚本。注意红框处填写ip地址,同时数据库名称要与项目中名称保持一致。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

🌟打包项目,进行上传

后端项目

1.配置文件的修改。注意要和线上数据库用户名、密码、ip地址一致。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
2.mvn install打包。之后会在target目录下生成jar包。生成之后上传到服务器路径下即可。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
下图是我的路径,请根据个人需求。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

前端项目

1.配置文件修改成自己的域名地址。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

2.使用npm run build打包。打包完成之后会生成一个dist文件夹,将此文件上传即可。一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器
下图是我的个人路径,要与nginx配置文件中的地址配置一致。
一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器

🌟项目启动

进入到项目路径中,通过nohup java -jar xxxx.jar &启动。如项目报错,则可以用过tail -f nohup.out查看日志情况。

🌟写在最后

有关于SpringBoot、Vue线上应用部署到此就结束了。感谢大家的阅读,如有部署问题,大家可以在评论区进行留言。


一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,SpringBoot实战,spring boot,vue.js,后端,服务器文章来源地址https://www.toymoban.com/news/detail-625761.html

到了这里,关于一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 一张思维导图带你打通SpringBoot自定义拦截器的思路

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:SpringBoot实战 在开发中,都离不开拦截器的使用。比如说在开发登录功能时,采用JWT登录时通过对token进行验证实现登

    2024年02月14日
    浏览(43)
  • 一张流程图带你学会SpringBoot结合JWT实现登录功能

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:SpringBoot实战 JWT(JsonWebToken)是 一种轻量级的跨域身份验证解决方案 。通常被用于无状态身份验证机制,将用户信息签名

    2024年02月11日
    浏览(70)
  • 一张图带你学会入门级别的SpringBoot实现文件上传、下载功能

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:SpringBoot实战 标题 一文带你学会使用SpringBoot+Avue实现短信通知功能(含重要文件代码) 一张思维导图带你学会Springboot创

    2024年02月12日
    浏览(63)
  • Vue加SpringBoot实现项目前后端分离

    首先需要搭建一个Vue的脚手架项目(已经放在gitee里面了,下面是gitee网址,可以直接拉) (vue-web: 这个是Vue项目模板,没有后台数据) 那么接下来就是实现前后端分离的步骤 首先我们需要有一个登录页面 登录的点击事件利用axios提交到后台去,代码放在后面(没有样式也可以

    2024年02月06日
    浏览(43)
  • SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月09日
    浏览(40)
  • 后端SpringBoot+前端Vue前后端分离的项目(二)

    前言:完成一个列表,实现表头的切换,字段的筛选,排序,分页功能。 目录 一、数据库表的设计 二、后端实现 环境配置 model层  mapper层 service层  service层单元测试 controller层 三、前端实现 interface接口 接口api层 主要代码 效果展示 引入mybatis-plus依赖 MerchandiseDetailsService文

    2024年02月09日
    浏览(35)
  • SpringBoot+Vue前后端分离项目国际化支持

    i18n.js文件 language.en_US.js文件 language.zh_CN.js文件 messages_en_US.properties文件 messages_zh_CN.properties文件

    2024年02月04日
    浏览(40)
  • 后端SpringBoot+前端Vue前后端分离的项目(一)

    前言:后端使用SpringBoot框架,前端使用Vue框架,做一个前后端分离的小项目,需求:实现一个表格,具备新增、删除、修改的功能。 目录 一、数据库表的设计 二、后端实现 环境配置 数据处理-增删改查 model层 mapper层 XML配置 Service层 controller层 单元测试 三、前后端交互 配置

    2024年02月10日
    浏览(46)
  • 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇

    如何高效学习Java? 毕业设计项目应该怎么做?入门实战项目应该怎么做? 做Java开发都应该学习哪些框架技术?到底应该往哪个方向努力? 📢 这是专栏的第一篇文章,我想来跟你聊聊 为什么要学习此专栏 ?我们经常说,看一个事儿千万不要直接陷入细节里,你应该 先鸟瞰

    2024年02月03日
    浏览(36)
  • Springboot+vue的时间管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

    Springboot+vue的时间管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 本文设计了一个基于Springboot+vue的前后端分离的时间管理系统,采用M(model)V(

    2024年02月07日
    浏览(33)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包