如何在本地部署vue+springboot前后端分离应用

时间:2022-01-27 21:08:58

如何在本地部署vue+springboot前后端分离应用


今天想在windows本地搭建一个服务器跑整个vue+springboot项目,但始终访问不到后端接口,网上介绍这方面的博客也很少,现在我将我的搭建过程与大家分享一下。


我们知道,在平时的开发过程中,将springboot服务启动后,然后用npm run dev将前端项目运行起来,这样整个项目就跑起来了,在浏览器中就可以看到效果。这是因为node.js起了一个代理服务器的作用。但在服务器中vue项目是用npm run build打包出来的dist目录,那要怎么部署呢?


(1)首先下载安装nginx当作前端静态资源服务器和反向代理服务器;

(2)将npm run build出来的dist目录中的index.html和static目录拷贝至nginx中html目录下,会覆盖原有的index.html;

(3)用mvn clean package将springboot后端项目打包,会在target目录下出现一个终极.jar文件;

(4)进入target目录,用java -jar ****.jar运行后端项目,因为springboot是默认继承了web容器的,所以不用另外安装tomcat了;

(5)这时在浏览器中访问localhost就可以看到index.html页面了,但是访问后端接口会报404;

(6)这就要改下nginx的配置文件了,在nginx.conf文件中的server下新增location /api/ {proxy_pass http://192.168.1.19:9090/;}   这里要注意/的多少问题,很容易出错;

(7)另外转发到后端接口时不要写http://localhost,一定要写http://ip地址,不然会有莫名其妙的错误,而且很难发现。


另外修改了nginx的配置文件后先把nginx的进程结束掉,然后进入nginx目录,start nginx,  ./nginx -s reload


这样一个vue+springboot服务器就搭建起来了。