nginx配置多个前端项目,使用同一个后端

时间:2024-05-20 12:19:48

这几天一直在搞nginx配置的东西,踩了很多坑,特此记录。
前后端分离的项目有两种部署方案,第一种是把前端打包好的dist文件夹放在后端的static下面,然后打包后端,在服务器运行后端的这个jar包,没什么好说的。
第二种是使用nginx配置,这里所讲的是使用第二种方案。
  本项目开发框架:
    后端:SpringBoot+JPA
    前端:Vue+Element-UI

  • 1.首先先把后端打包运行起来
    nginx配置多个前端项目,使用同一个后端
    我已经运行了,顺便说一下停止运行的方法
    nginx配置多个前端项目,使用同一个后端
    我把jar放在了tomcat目录下的webapps,下面把jar运行起来,可以看到8080端口已经被占用了,运行成功。
    nginx配置多个前端项目,使用同一个后端
    有什么问题可以查看nohup.out的日志—vi nohuo.out。我这边启动成功。
    nginx配置多个前端项目,使用同一个后端
    2.打包第一个前端项目
      打开控制台,直接 npm run build ,之后会生成一个dist文件夹
      配置nginx
    打开conf目录下的nginx.conf,编辑框中如下内容,注意找准文件所在位置
    nginx配置多个前端项目,使用同一个后端
    下面解决跨域问题,我们可以看到所有的请求你是找不到后端的,后端运行在8080端口,下面就通过配置使前后端联系起来。
    nginx配置多个前端项目,使用同一个后端
    nginx配置多个前端项目,使用同一个后端
    然后再nginx的sbin目录下重新加载一下。
    nginx配置多个前端项目,使用同一个后端

配置一个前端项目就搞定了。

3.配置第二个前端项目
照常npm run build 打包好项目
同样配置的时候注意文件所在的位置。
nginx配置多个前端项目,使用同一个后端
使用alias注意最后一定要有 /
最重要的一点,前端打包生成的index.html也要修改,因为你的定位发生了变化,不修改是找不到的会报404。
nginx配置多个前端项目,使用同一个后端

修改成如下:就是在引用的前面加上你的定位名称 /webplatform

nginx配置多个前端项目,使用同一个后端
然后静态资源记得也要改下,我这里找图片就找不到。不可以直接 / 去找,要带上你的名称。
下面在nginx.conf中配置下:
nginx配置多个前端项目,使用同一个后端

然后重新加载下nginx就可以了。

不过我也看到他们直接在前端项目中配置 config下的index.js中如下的内容,我没有试过,感兴趣的同学可以自行尝试一下。
nginx配置多个前端项目,使用同一个后端