基于前后端分离的Nginx+Tomcat动静分离
1.什么是动静分离
“动”与“静”
在弄清动静分离之前，我们要先明白什么是动，什么是静。
在Web开发中，通常来说，动态资源其实就是指那些后台资源，而静态资源就是指Html、img、js、css等文件。
动静分离就是将动态资源和静态资源分开，将静态资源部署在Nginx上，当一个请求来的时候，如果是静态资源的请求，就直接到nginx配置的静态资源目录下面获取资源，如果是动态资源的请求，nginx利用反向代理的原理，把请求转发给后台应用去处理，从而实现动静分离。
好处
tomcat的优势在于少量的接收并处理复杂的http请求（将用户请求读写数据库等），nginx的优势在于能够大量的接收并处理简单的http请求（将http请求转发或者加个header、body等）。
将Html、img、js、css等这种静态资源交给nginx，将用户需要读写数据库等请求交给tomcat是对各自优势的最大利用。
详解
Nginx与tomcat各自的优势与区别详解参考：tomcat 与 nginx，apache的区别是什么？.
2.环境准备
需要nginx、tomcat、SpringBoot
2.1 linux
2.2 windows
windows环境下nginx下载解压后，即可使用。
Windows下Nginx的启动、停止等命令
由于使用SpringBoot，所以使用内嵌的tomcat。
3.正式部署
3.1 前台
前台使用一个ajax请求后端，新建一个index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前后端分离</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#loginBtn").click(function(){
$.post(
"http://localhost:8080/username",
function(rtn){
$("#name").text(rtn.username)
});
});
});
</script>
</head>
<body>
<form>
<input type="button" value="查看当前用户" id="loginBtn">
<div id="name" style="color:#00FF00">
</div>
</form>
</body>
</html>将index.html放到nginx的html目录下（将nginx/html目录下的文件都删了）。
正式部署时，只需要将静态资源扔到html目录下即可
3.2 后台
后台使用SpringBoot，只需一个接收请求的controller即可，这里为了省事，直接在Application里面写controller了。
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
@RestController
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
@RequestMapping(value = "/username", method = {RequestMethod.GET, RequestMethod.POST})
public User username() {
// 假装请求了数据库
User user = new User("tom");
return user;
}
class User {
private String username;
public User(String username) {
this.username = username;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
}
启动SpringBoot项目可以访问到
正式部署时，只需要将SpringBoot打的jar包扔到服务器上启动即可
//打jar
mvn clean package -Dmaven.test.skip=true
//启动jar
nohup java -jar ROOT.jar &3.3 nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
#监听8080端口，代理前端请求
listen 80;
server_name localhost;
location / {
# 默认访问html下的index.html
index index.html;
}
}
server {
#监听8080端口，代理后端请求
listen 8080;
server_name localhost;
location / {
proxy_pass http://localhost:8080;
proxy_set_header X-Real-IP $remote_addr;
}
}
}
启动nginx
start nginxnginx.conf的更多配置
Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问
3.4前后端分离导致动静分离的跨域问题
访问http://localhost/
Access to XMLHttpRequest at 'http://localhost:8080/username' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.由于前后端分离了，所以前端http://localhost/使用ajax请求http://localhost:8080/发生了跨域问题。
详解：
这里直接给出解决方案，使用CORS解决跨域问题
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*，否则cookie就无法使用了
config.addAllowedOrigin("http://localhost");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("GET");
config.addAllowedMethod("POST");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("PUT");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4）允许的头信息
config.addAllowedHeader("*");
//2.添加映射路径，我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}放到Application.java同目录及以下即可
结构：
重启项目，再次访问http://localhost/，访问成功。
4.总结
总的来说就是将静态资源html、js、css等放入nginx中，将动态请求交给tomcat。
如果发生跨域，需要在解决跨域问题。
5.答疑
Q：该例子就一个html静态资源为什么不放到项目的static下？放到static下不就不会跨域了吗？
A：因为这只是一个例子，模拟动静分离。一个真实的项目，可能将html等静态资源放到不同于后台的服务、或者CDN上，那时候就一定会发生跨域问题。
基于前后端分离的Nginx+Tomcat动静分离的更多相关文章
- nginx+tomcat动静分离结构
本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...
- 企业实战Nginx+Tomcat动静分离架构的技术分享
Nginx动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx处理静态页面,Tomcat.Re ...
- 【转载】Nginx+Tomcat 动静分离实现负载均衡
0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 1 # 定义Nginx运行的用户 和 用户组 如 ...
- Nginx + Tomcat动静分离 （转）
什么是动静分离 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时 ...
- nginx tomcat 动静分离
所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件</span>,从而达到动静页面 ...
- Nginx+Tomcat动静分离
需求:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...
- Nginx + Tomcat 动静分离实现负载均衡（转）
0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户 和 用户组 如果对 ...
- Nginx + Tomcat 动静分离实现负载均衡
0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户 和 用户组 如果对 ...
- Nginx+Tomcat动静分离及Nginx优化
目的:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...
随机推荐
- 人脸识别ArcFace C#DEMO 开发应用全过程
手上有一个项目,需要检验使用本程序的,是否本人!因为在程序使用前,我们都已经做过头像现场采集,所以源头呢是不成问题的,那么人脸检测,人脸比对,怎么办呢?度娘了下,目前流行的几个人脸检测,人脸比对核心, ...
- 关于Android Studio 3.2 运行应用时提示 “Instant Run requires that the platform corresponding to your target device (Android 7.0 (Nougat)) is installed.” 的说明
点击"Run",运行App后,Android Studio显示如图1-1界面: 图1-1 这是因为你连接的外部设备(比如Android手机或AVD)的SDK版本在你的电脑上没有安装 ...
- 深入理解group by 语句的执行顺序 from→where→group by→select（含聚合函数）
由于之前没有对group by 语句的执行顺序(执行原理)做深入的了解,所以导致在实际应用过程中出现了一些问题.举个简单的粟子,比如一个表testA中的所有数据如下图: 我现在想从testA中查询us ...
- 突破瓶颈，再出发 - PM过程能力成熟度5级
尽管程度不同,但PM的每个级别都在践行过程改进,并在4级借助数据,达到了“登峰造极”的程度.随着量化与统计分析的深入,项目会被优化到极其稳定的状态,组织的过程改进也就此进入了平台期. 平台期可以被视为 ...
- 使用Log4Net进行错误日志记录
http://blog.csdn.net/zdw_wym/article/details/48802821
- qt5.11.2+vs2017环境下配置pcl1.8.1以及第三方依赖库vtk的编译
1.准备工作 我所用的开发环境是win10下的qt5.11.2配置了vs2017的编译器,根据自己所用的VS的版本去官网下载对应版本的pcl库,如下 PCL-1.8.1-AllInOne-msvc20 ...
- 卸载或安装Git出现Invalid drive错误的解决方案【简记】
前言:工作中由于公司的电脑(SSD+HDD)硬盘(HDD)突然坏了,只剩下一个系统盘(SSD).然后就是有个比较紧急的需求正在做,申请换的新硬盘不能立刻换上,因为工作的机器不在公司,操作远程机器工作, ...
- javaEmail发邮件是问号乱码，已解决
寒假学习了ssm,就把之前看过的一个商城项目用ssm重构了. 然后在本地一切都正常,放到个人服务器上就凉了. 因为这个项目注册需要邮箱激活,然后就在发邮件的时候出了问题. 一.发送端口 因为源程序是用 ...
- from语法导入
"""# 在执行文件中能不能直接使用模块中的名字 # import m1# import m1 as m# print(m1.a)# print(m1.b)# print ...
- 随心测试_软测基础_006<测试人职业发展>
接上篇:熟悉了_测试人员的工作职责范围与具体的工作内容 ,如何规划:测试人员的职业路线呢? 贴心小提示:以下内容,仅供参考,不挖坑 Q1:如何规划测试工程师的职业发展路线? A1:SX的观点:预定目标 ...