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

linux环境下的nginx下载、安装、使用

linux环境下的jdk8下载、安装、使用

linux环境下的tomcat下载、安装、使用

2.2 windows

windows环境下nginx下载解压后，即可使用。
Windows下Nginx的启动、停止等命令

由于使用SpringBoot，所以使用内嵌的tomcat。

3.正式部署

3.1 前台

前台使用一个ajax请求后端，新建一个index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>前后端分离</title>
  6.         <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  9.                 $("#loginBtn").click(function(){
  10.                     $.post(
  11.                     "http://localhost:8080/username",
  12.                     function(rtn){
  13.                         $("#name").text(rtn.username)
  14.                     });
  15.                 });
  16.             });
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <form>
  21.             <input type="button" value="查看当前用户" id="loginBtn">
  22.             <div id="name" style="color:#00FF00">
  24.             </div>
  25.         </form>
  26.     </body>
  27. </html>

将index.html放到nginx的html目录下（将nginx/html目录下的文件都删了）。

正式部署时，只需要将静态资源扔到html目录下即可

3.2 后台

后台使用SpringBoot，只需一个接收请求的controller即可，这里为了省事，直接在Application里面写controller了。

  1. package com.example.demo;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5. import org.springframework.web.bind.annotation.GetMapping;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RequestMethod;
  8. import org.springframework.web.bind.annotation.RestController;
  10. @SpringBootApplication
  11. @RestController
  12. public class DemoApplication {
  14.     public static void main(String[] args) {
  15.         SpringApplication.run(DemoApplication.class, args);
  16.     }
  18.     @RequestMapping(value = "/username", method = {RequestMethod.GET, RequestMethod.POST})
  19.     public User username() {
  20.         // 假装请求了数据库
  21.         User user = new User("tom");
  22.         return user;
  23.     }
  25.     class User {
  26.         private String username;
  28.         public User(String username) {
  29.             this.username = username;
  30.         }
  32.         public String getUsername() {
  33.             return username;
  34.         }
  36.         public void setUsername(String username) {
  37.             this.username = username;
  38.         }
  39.     }
  40. }

启动SpringBoot项目可以访问到

正式部署时，只需要将SpringBoot打的jar包扔到服务器上启动即可

  1. //打jar
  2. mvn clean package -Dmaven.test.skip=true
  3. //启动jar
  4. nohup java -jar ROOT.jar &

3.3 nginx.conf

  1. worker_processes  1;
  2. events {
  3.     worker_connections  1024;
  4. }
  5. http {
  6.     include       mime.types;
  7.     default_type  application/octet-stream;
  8.     sendfile        on;
  9.     keepalive_timeout  65;
  10.     server {
  11.         #监听8080端口，代理前端请求
  12.         listen       80;
  13.         server_name  localhost;
  14.         location / {
  15.             # 默认访问html下的index.html
  16.             index  index.html;
  17.         }
  18.     }
  19.     server {
  20.         #监听8080端口，代理后端请求
  21.         listen       8080;
  22.         server_name  localhost;
  23.         location / {
  24.         proxy_pass http://localhost:8080;
  25.         proxy_set_header X-Real-IP $remote_addr;
  26.       }
  28.     }
  29. }

启动nginx

  1. start nginx

nginx.conf的更多配置

Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问

nginx.conf详细配置

3.4前后端分离导致动静分离的跨域问题

访问http://localhost/

  1. 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解决跨域问题

Jsonp解决跨域问题

这里直接给出解决方案，使用CORS解决跨域问题

  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.cors.CorsConfiguration;
  4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  5. import org.springframework.web.filter.CorsFilter;
  7. @Configuration
  8. public class GlobalCorsConfig {
  9.     @Bean
  10.     public CorsFilter corsFilter() {
  11.         //1.添加CORS配置信息
  12.         CorsConfiguration config = new CorsConfiguration();
  13.         //1) 允许的域,不要写*，否则cookie就无法使用了
  14.         config.addAllowedOrigin("http://localhost");
  15.         //2) 是否发送Cookie信息
  16.         config.setAllowCredentials(true);
  17.         //3) 允许的请求方式
  18.         config.addAllowedMethod("GET");
  19.         config.addAllowedMethod("POST");
  20.         config.addAllowedMethod("OPTIONS");
  21.         config.addAllowedMethod("HEAD");
  22.         config.addAllowedMethod("PUT");
  23.         config.addAllowedMethod("DELETE");
  24.         config.addAllowedMethod("PATCH");
  25.         // 4）允许的头信息
  26.         config.addAllowedHeader("*");
  28.         //2.添加映射路径，我们拦截一切请求
  29.         UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
  30.         configSource.registerCorsConfiguration("/**", config);
  32.         //3.返回新的CorsFilter.
  33.         return new CorsFilter(configSource);
  34.     }
  35. }

放到Application.java同目录及以下即可

结构：

重启项目，再次访问http://localhost/，访问成功。

4.总结

总的来说就是将静态资源html、js、css等放入nginx中，将动态请求交给tomcat。

如果发生跨域，需要在解决跨域问题。

5.答疑

Q：该例子就一个html静态资源为什么不放到项目的static下？放到static下不就不会跨域了吗？
A：因为这只是一个例子，模拟动静分离。一个真实的项目，可能将html等静态资源放到不同于后台的服务、或者CDN上，那时候就一定会发生跨域问题。

基于前后端分离的Nginx+Tomcat动静分离的更多相关文章

  1. nginx+tomcat动静分离结构

    本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...

  2. 企业实战Nginx+Tomcat动静分离架构的技术分享

    Nginx动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx处理静态页面,Tomcat.Re ...

  3. 【转载】Nginx+Tomcat 动静分离实现负载均衡

    0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 1 # 定义Nginx运行的用户 和 用户组 如 ...

  4. Nginx + Tomcat动静分离 （转）

    什么是动静分离 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时 ...

  5. nginx tomcat 动静分离

    所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件</span>,从而达到动静页面 ...

  6. Nginx+Tomcat动静分离

    需求:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...

  7. Nginx + Tomcat 动静分离实现负载均衡（转）

    0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户 和 用户组 如果对 ...

  8. Nginx + Tomcat 动静分离实现负载均衡

    0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户 和 用户组 如果对 ...

  9. Nginx+Tomcat动静分离及Nginx优化

    目的:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...

随机推荐

  1. Android防止按钮快速重复点击

    在用户使用 Android 应用的时候,经常会出现过快且多次点击同一按钮的情况,一方面这是因为应用或手机当前有些卡顿,另一方面也可能是由于很多应用并没有设置按钮点击时的 selector 或者其它按钮 ...

  2. 【工作分解法】IT人，你的工作“轻松”么？

    一.前言 假如读者是一个老板,下面有两位员工,工作难度一样,完成量一样,人品和责任心也一样.一位每天加班加点,废寝忘食的工作:而另外一位每天在座位上喝着咖啡,非常的轻松自如的工作.您会更器重哪一位? ...

  3. JS的正则表达式及回文

    function palindrome(str) { str = str.replace(/\s/g,"").replace(/[^a-zA-Z0-9]/g,"" ...

  4. jquery字符串操作

    目的:把自己常用到的jquery操作字符串总结一下 w3cSchool关于js字符串的整理:有需要的时候可以查 http://www.w3school.com.cn/js/jsref_obj_stri ...

  5. 如何在本地编译Fabric Code

    之前的博客都是拿官方现成的Docker镜像来用,但是并没有自己动手做镜像,也没有说到如何去开发和测试Fabric的代码.这一篇博客就从入门的角度讲解如何编译.测试和开发Fabric. 一.环境准备 要 ...

  6. CentOS7.x安装cobbler无人值守安装系统

    CentOS7.x cobbler无人值守安装 cobbler介绍 自打若干年前 Red Hat,推出了 Kickstart,不再需要刻了光盘一台一台地安装 Linux,只要搞定 PXE.DHCP.T ...

  7. destruct析构函数里操作文件出现的问题

    这几天要给后台加一个记录操作日志的功能,可是项目已经开发完了不可能再去改以前的代码了,那有什么快捷的方法呢? 项目使用的ThinkPHP3.23 ,为了方便权限控制,后台控制器结构为:普通控制器 ex ...

  8. iOS 快捷下载和安装并使用CocoaPods

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,手动一个个去下载所需类库十 ...

  9. nginx安装,启动亲测有效

    一:安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel 二:安装PCRE,让 N ...

  10. 使用python抓取数据之菜鸟爬虫1

    ''' Created on 2018-5-27 @author: yaoshuangqi ''' #本代码获取百度乐彩网站上的信息,只获取最近100期的双色球 import urllib.reque ...