SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
前言
给大家分享以下我是如何部署SpringBoot+Vue前后端分离的项目的,我用的Linux发行版是CentOS7.5
有了一个基于ElementUI的电商后台管理系统,在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用node完成的,对于我们Java开发者来说,用不到。我学习的是ElementUI的使用,就足够了,然后后端服务就全部可以自己使用SpringBoot来完成
最近貌似Vue3正式版也发布了,正好有空看可以去看一看
提示:以下是本篇文章正文内容,下面案例可供参考
一、Vue打包的项目如何部署?
1.1Vue项目打包
温馨提示:如果你的电脑上没有装vue环境的话,请先安装好node,下面使用Express(一个http框架,提供了快速搭建服务器的功能)也是基于node的。具体安装方法请自行百度,我这里就不介绍如何安装了
我的项目是使用vuecli4搭建的,使用脚手架搭建的项目,如果不知道自己的vuecli是什么版本的,可以输入如下命令进行查看
vue-V
使用脚手架搭建好处,就是什么都是可视化的,一键启动项目,一键编译项目,安装依赖也会变的非常非常的方便。效果图如下
我们点击build,然后运行,等待项目构建完成之后,就可以在项目根路径生成一个dist文件夹,这个文件就存放着我们vue项目打包好的所有内容
1.2使用Express代理静态资源文件
当然代理静态资源还有很多种方法,这是一种我认为比较轻松的方案,那么要如何来做呢?
提示:无论是Linux环境还是Windows环境,以下方案是通用的(前提是你已经安装好了node以及npm,我们要用npm包安装环境)
- 创建一个新的文件夹比如:myappmkdirmyapp然后进入该文件夹:cdmyapp
- 然后初始化node环境:npminit,
- 然后它会让你自己选择配置一些JSON信息
- 然后安装Express环境:npminstallexpress--save,--save表示仅在当前环境使用。这里也会提示你创建一个js文件,你可以忽略,也可以创建
- 然后创建app.js文件:touchapp.js,和dist文件夹在同一个目录哦
- 编写Express代理静态资源的代码,windows环境用文本编辑器,Linux环境用vim编辑器
constexpress=require('express') constapp=express() //代理静态资源 app.use(express.static('./dist')) //监听4000端口作为资源的访问路径 app.listen(4000,()=>{ console.log('serverrunningathttp://127.0.0.1:4000') })
编辑完毕,保存代码我们使用一个项目管理的工具包pm2
windows同理
安装这个我们可以实时查看项目的情况
使用这个,我们就不必用nodeapp.js运行项目了,这样直接运行的弊端就是当你关闭shell或者Linuxshell项目也会自动关闭。这样项目管理就会非常的方便哦
二、SpringBoot项目如何部署?
2.1数据库部署可能出现的问题
- 首先要确保我们的服务器上安装了mysql数据库
- 然后就是数据库的相关配置,设置远程访问等等
- 数据库默认是不支持远程连接的,如果需要请放开,设置%就代表运行外部用户访问
mysql>updatemysql.usersethost='%'whereuser='root'andhost='localhost'; mysql>FLUSHPRIVILEGES; //如果上面不起效果,请输入这条命令,应该就可以解决远程访问的问题了 mysql>grantallprivilegeson*.*toroot@'%'identifiedby'你的数据库登录密码';
2.2SpringBoot项目打包上传
通过在网上查找,我们得知SpringBoot项目打包有两种方式。
- 使用内嵌Tomcat直接运行
- 不使用内嵌Tomcat,将项目打包成war包,部署到Tomcat运行
第二种方案我在JavaEE阶段使用过,现在使用第一种
打包项目我们要在maven的pom依赖种添加如下插件
org.springframework.boot spring-boot-maven-plugin
然后我们可以通过命令,直接在命令行运行项目。
java-jarxxx.jar java-jarxxxx.war
三、服务器配置
3.1SpringBoot项目在Linux环境启动与停止
在这里将我们打包好的SpringBoot项目和vue项目上传到服务器中。
vue项目就按照上面的步骤,windows平台和Linux平台是通用的。
我们知道java-jar运行项目很方便,但是同样会遇到一个问题,那就是LinuxShell关闭时,服务也关闭了,因此我们要使用脚本保证我们的这个进程(SpringBoot服务)在后台也能保持运行。
我们编写一段bash脚本,我们只需要将demo-0.0.1-SNAPSHOT替换成你自己导出的jar包即可
#!/bin/sh nohupjava-jardemo-0.0.1-SNAPSHOT.jar&
这里的&不能省略,表示守护进程的意思,及这个进程可以运行在后台。
保存,运行脚本
shstartup.sh
ps:如果这里执行不了命令,需要给这个文件夹赋予读写的权限chmod777*
查看进程是否在运行
ps-ef|grepjava
找到项目名称的,第一列就是你的pid
输入kill-9pid即可停止你的java项目
3.2Nginx反向代理SpringBoot服务
鉴于一些业务需要使用https服务,所以我们需要将我们的后端服务反向代理成https服务。
前提是,我们假设你已经配置好了下面的环境,如果不会请移步Nginx的安装及SSL配置
- 你已经在装了Nginx服务器
- 你已经配置好了SSL证书,并实现了https服务,如果你不会,可以i查看这篇文章
在http里面配置后端服务的代称,SpringBoot项目的代称不可以使用‘_'
upstreamtikuApiServer{ server127.0.0.1:9999; }
然后在server为443的服务中这样配置
server{ listen443sslhttp2default_server; listen[::]:443sslhttp2default_server; server_name你的域名; roothttps项目的路径; indexindex.htmlindex.htm; # ssl_certificate"证书.crt"; ssl_certificate_key"证书.key"; ssl_session_cacheshared:SSL:1m; ssl_session_timeout10m; ssl_ciphersHIGH:!aNULL:!MD5; ssl_prefer_server_cipherson; #Loadconfigurationfilesforthedefaultserverblock. include/etc/nginx/default.d/*.conf; includemime.types; default_typeapplication/octet-stream; //==================在这里===================== location/tiku/{ proxy_passhttp://tikuApiServer/api/v1/; } error_page404/404.html; location=/40x.html{ } error_page500502503504/50x.html; location=/50x.html{ } }
这样我们的后端API就可以直接访问https://域名/tiku/xxxx就好了
总结
提示:这里对文章进行总结:
- 前后端分离SpirngBoot+Vue集成部署
- bash脚本编写(守护进程运行项目)
- mysql远程访问
到此这篇关于SpringBoot+Vue项目部署上线到Linux服务器的文章就介绍到这了,更多相关SpringBoot+Vue部署Linux服务器内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。