这几天一直在搞nginx配置的东西,踩了很多坑,特此记录。
前后端分离的项目有两种部署方案,第一种是把前端打包好的dist文件夹放在后端的static下面,然后打包后端,在服务器运行后端的这个jar包,没什么好说的。
第二种是使用nginx配置,这里所讲的是使用第二种方案。
本项目开发框架:
后端:SpringBoot+JPA
前端:Vue+Element-UI
- 1.首先先把后端打包运行起来
我已经运行了,顺便说一下停止运行的方法
我把jar放在了tomcat目录下的webapps,下面把jar运行起来,可以看到8080端口已经被占用了,运行成功。
有什么问题可以查看nohup.out的日志—vi nohuo.out。我这边启动成功。
2.打包第一个前端项目
打开控制台,直接 npm run build ,之后会生成一个dist文件夹
配置nginx
打开conf目录下的nginx.conf,编辑框中如下内容,注意找准文件所在位置
下面解决跨域问题,我们可以看到所有的请求你是找不到后端的,后端运行在8080端口,下面就通过配置使前后端联系起来。
然后再nginx的sbin目录下重新加载一下。
配置一个前端项目就搞定了。
3.配置第二个前端项目
照常npm run build 打包好项目
同样配置的时候注意文件所在的位置。
使用alias注意最后一定要有 / 。
最重要的一点,前端打包生成的index.html也要修改,因为你的定位发生了变化,不修改是找不到的会报404。
修改成如下:就是在引用的前面加上你的定位名称 /webplatform
然后静态资源记得也要改下,我这里找图片就找不到。不可以直接 / 去找,要带上你的名称。
下面在nginx.conf中配置下:
然后重新加载下nginx就可以了。
不过我也看到他们直接在前端项目中配置 config下的index.js中如下的内容,我没有试过,感兴趣的同学可以自行尝试一下。