码迷,mamicode.com
首页 > 系统相关 > 详细

前后端分离项目部署到Linux虚拟机

时间:2020-07-05 13:43:24      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:ttf   接下来   本地   缓存   html   nginx   通过   dea   nginx代理   

最近做了一个springboot+vue的前后端分离项目,把它部署到Linux虚拟机上。下面是我的步骤和遇到的问题,需要的朋友可以看下(看的时候注意要全部看完到底部,因为我习惯是把我遇到的问题放到最后面的,不是到了哪一步遇到了问题就顺便讲下)。

1.打包前后端项目

后端我使用的是idea编辑器,所以打包只要点击下图就可以了。

技术图片

 

 

就生成了下面这个jar包

技术图片

 

 好,后端打包完成,接下来打包前端项目。

我前端使用的编辑器是webstorm。打包方式也很简单,只要在终端中执行:npm run build命令即可,如下图

技术图片

 

之后便会生成一个  dist 文件夹,如下图

技术图片

 

 

   

2.将文件放到虚拟机上

在Linux的目录下 mkdir 建一个放这两个打包文件的文件夹(我的是marble),之后用rz命令,或者 filezilla 等上传工具,找到你本地的那个后端jar和前端dist,上传到marble

如下图:

技术图片

 

 

3.我这里使用nginx进行代理,把前端部署到nginx上。那你需要在你的Linux上安装一个nginx,nginx的安装我就不再赘述,没有安装朋友的可以参考这个:

https://www.cnblogs.com/qwg-/p/13054715.html

安装完成之后,别着急,需要重新配置一下nginx的配置文件。

 说明:这里要讲下,前端是通过nginx代理的,后端启动jar包,前端的请求使用nginx代理发送到后端.

找到你的nginx的安装目录下的 conf/nginx.conf文件(默认的位置是:/usr/local/nginx/conf 下的nginx.conf),配置成以下即可。

技术图片

 

 

稍微解释一下:

upstream javaboy.org{
server 127.0.0.1:8088;
}

这个javaboy.org只是个名字,你随便怎么起都可以,同理,下面的proxy_pass http://javaboy.org用的就是上面的这个,也就是说,我们使用nginx的默认的80端口,访问这个接口的时候,nginx就会给把请求代理到后端的那个8088接口上。这个8088是后端项目的端口

技术图片

 

 

 

location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html) {
#所有静态文件直接读取硬盘
root /marble/dist/;
expires 30d; #缓存30天
}

这个就是说,以 js|css|ico|png|jpg|eot|svg|ttf|woff|html 这种结尾的页面,就不用请求后端,直接前端展示。

那下面的root /marble/dist/,就是我上面说的我的前端打包成的 dist 在Linux的位置,这个要改成你自己的前端打包文件 dist 在Linux的路径。

配置完成以后记得要重新启动nginx,配置文件才会生效。

4.启动后端的jar包

这里先进入到你的jar包所在位置(我的是marble文件夹),执行命令:nohup java -jar xxx.jar & 

这个命令如果不太了解的可以看下这个:https://www.cnblogs.com/qingmuchuanqi48/p/11723541.html

执行这个命令以后会有个下一行:

 nohup: 忽略输入并把输出追加到"nohup.out,这个意思是说你的启动项目日志在你的jar包同级目录nohup.out文件内(执行上面的启动命令,它会自动给你创建一个nohup.out文件),你可以通过vi  nohup.out 看到你的日志。

jar包启动完成,nginx启动完成,就可以在你window的浏览器上输入:

 

技术图片

 

这里说明一下,前端的IP是你的Linux的IP ,为什么不写端口,因为我们使用的是nginx默认的80端口,后面的index.html页面是因为vue项目是一个单页面应用,也就是下图的:

技术图片

 

 

等项目出现页面,成功请求到后端的数据,就说明部署成功!

下面说下我遇到的问题

问题1:

我用的数据库不是我Linux上的数据库,而是我window本地mysql数据库,然后我把后端springboot的配置url 的地址换成window的IP地址

技术图片

,发现报一个没有访问权限的错误,错误的截图我忘记写了,但是解决方案我记得,在数据库执行以下SQL:

GRANT ALL `user`PRIVILEGES ON *.* TO ‘root‘@‘%‘
IDENTIFIED BY ‘123456‘ WITH GRANT OPTION;

FLUSH PRIVILEGES

说明一下: user是你的用户登录的那张表的表名,后面的123456是你的root用户的密码。

问题2

假如一直登录不成功,可以尝试关闭一下你的window防火墙和Linux的防火墙,因为比如我的mysql在window,而我window浏览器需要访问Linux,那么这两者的防火墙可能

会阻挡住互相的访问。

 

前后端分离项目部署到Linux虚拟机

标签:ttf   接下来   本地   缓存   html   nginx   通过   dea   nginx代理   

原文地址:https://www.cnblogs.com/qwg-/p/13237210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!