正文

nginx反向代理前后端分离项目（后端多台）

liuxiutianxia  liuxiutianxia  2022-12-20  360

关键词：

目前软件架构都比较流行前后端分离，前后端的分离也实现了前后端架构的分离，带来的好处 —— 整个项目的开发权重往前移，实现真正的前后端解耦，动态资源和静态资源分离，提高了性能和扩展性。

通常SpringBoot与vue 进行前后端分离，主要有两种方式：

1.打包（npm run build命令）vue项目出来的dist文件夹拷贝到springboot项目的static文件目录，部署到tomcat即可。

2.利用nginx的反向代理。

本文主要讲解第二种

首先打包前端项目到指定目录：E:\fjgh\dist

然后部署后端项目到不同的Tomcat服务器，请求地址分别是：

　　http://localhost:8086/un/

　　http://localhost:8087/un/

重点是nginx配置

1.在配置文件http模块添加后端服务负载均衡策略配置，常用有三种策略，本例使用默认轮询

#负载均衡配置：轮询（默认） 指定权重 IP绑定;
	upstream fjghmultiple
		server localhost:8086;
		server localhost:8087;

2.添加server配置

    server 
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / 
			#root  html;
            root   E:\fjgh\dist ;#vue项目的打包后的dist
            index  index.html index.htm;
			#开启gzip压缩，降低传输流量，减少响应时间
			gzip  on;
			gzip_min_length    1k;
			gzip_buffers    4 16k;
			gzip_http_version  1.1;
			gzip_comp_level  2;
			gzip_types  text/plain application/x-javascript text/css  application/xml  application/json ;
			gzip_vary on;
        
        location /un/ 
			#代理后端服务
            proxy_pass http://fjghmultiple/un/;

3.通过start nginx 命令启动nignx 访问地址 http://localhost 即可

补充：多个后台需要考虑用户登录状态同步的问题，我们使用的是通过spring-session实现session共享：当web服务器接收到http请求后，请求进入到对应的Filter进行过滤，原表需要由web服务器创建会话的过程转交给spring-session进行创建，本来创建的会话保持在web服务器内存中，通过spring-session创建的会话信息可以保存在第三方的服务中，比如：redis，mysql等。各个web服务器之间通过连接第三方服务来共享数据，实现session共享。

django+vue前后端分离项目部署

...一个服务器，监听的端口不同。3、vue部署需要注意的是反向代理地址：以及后面的端口问题4、后端的Server需要注意location中的uwsgi_pass后面的端口号要和uwsgi.ini中配的相同，否则监听不到5、后端跨域问题。如果遇到跨域需要自己... 查看详情

vue+springboot+nginx：开发环境npmrundev下，通过nginx解决前后端分离造成的跨域问题(代码片段)

　　前面看了很多的博客，在使用nginx进行反向代理的时候，都是讲通过build后...但是，我只是希望在npmrundev的时候进行nginx的反向代理，因为我只是在开发环境啊！！！build个锤子...　　前提：后端环境已经搭建完成、前端页面... 查看详情

如何在开发时部署和运行前后端分离的javawe

在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用dubbo+zo... 查看详情

jsp与前后端分离谁更快

...全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数查看详情

docker+nginx部署springboot+vue前后端分离项目(代码片段)

目录一、windows环境1.1、windows环境前端部署1.2、windows环境后端部署二、linux环境2.1、安装docker2.2、安装dockercompose2.3、编写Dockerfile文件2.4、编写docker-compose.yml文件2.5、修改application-pro.yml2.6、准备好nginx的挂载目录和配置2.7、上传... 查看详情

前后端分离:vue项目部署服务器操作步骤详细(代码片段)

...后端给前端处理相应返回数据结果整个时候需要Nginx进行反向代理这个分离项目推荐使用服务器宝塔面板安装可以减少很多的操作和出错概率对应的还是需要设置自己的端口不建议使用熟知的端口号码也不建议用默认的80可以直... 查看详情

部署前后端分离项目(代码片段)

...统环境virtulenv在虚拟环境中部署后端项目nginx使用nginx做反向代理redis存储数据mysql(mariadb)存储数据supervisorLinux/Unix系统下的一个进程管理工具，不支持Windows系统。它可以很方便的监听、启动、停止、重启一个或多个进程。用Supervi... 查看详情

vue发布中的前后端分离和前后端不分离

前后端分离思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端，后端进行数据的请求（ajax）前后端分离就是前端和后台在不同的服务器上。基本是前端一个nginx加css和js后端nginx加index.html当用户访问的时候... 查看详情

5_前后端分离

前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情

5_前后端分离

docker-compose+nginx部署springboot+vue前后端分离项目(代码片段)

java网络商城项目springboot+springcloud+vue网络商城（ssm前后端分离项目）九（设置nginx保存图片的代理路径，修改和删除品牌）(代码片段)

...分离项目）八一、将图片保存到虚拟机（设置nginx代理路径）1、上传相关图片https://download.csdn.net/download/qq_44757034/20929216下载相关图片将图片上传到Linux当中的/ley 查看详情

基于springboot架构的前后端完全分离项目api路径问题(代码片段)

最近的一个项目采用前后端完全分离的架构，前端组件：vue+vue-router+vuex+element-ui+axios，后端组件：SpringBoot+MyBatis。之所以这样做是为了考虑后端水平扩容的便利性，在部署的时候完全可以将前后端彼此独立部署，前端部署可以直... 查看详情

NGINX 反向代理响应

】NGINX反向代理响应【英文标题】：NGINXReverseproxyresponse【发布时间】：2019-11-1404:54:35【问题描述】：我使用NGINX服务器作为反向代理。NGINX服务器接受来自外部客户端的请求（HTTP或HTTPS无关紧要）并将该请求传递给后端服务器。... 查看详情

《nginx》二nginx反向代理(代码片段)

...;进而提升整个服务访问性能和可维护性二、使用Nginx作为反向代理时支持的协议三、用于定义上游服务的upstream模块解释：查看详情

解决前后端分离开发，后端重定向不到前端页面问题

参考技术A公司项目使用的是springboot+angularjs这种前后端不完全分离的开发方式，前段时间把项目改成springboot+vue前后端完全分离，开发过程中有个后端重定向问题。后端项目地址：http://localhost:8080/，前端项目地址：http://localhost:9... 查看详情

解决前后端分离开发，后端重定向不到前端页面问题

使用宝塔nginx布署前后端分离目录代理注意事项

参考技术A注意事项：宝塔默认生成的配置文件会有要自己手动删除掉，不然前端的资源也会被代理掉如果要访问后端的静态资源，可以尝试以下设置完整配置：查看详情