Nginx实现动静分离

时间 2019-11-12

标签 nginx 实现动静分离栏目 Nginx 繁體版

原文原文链接

结合本文场景，须要安装Nginx和Java环境（运行SpringBoot项目）。javascript

1.什么是动静分离？

在弄清动静分离以前，咱们要先明白什么是动，什么是静。css

在Web开发中，一般来讲，动态资源其实就是指那些后台资源，而静态资源就是指HTML，JavaScript，CSS，img等文件。html

通常来讲，都须要将动态资源和静态资源分开，将静态资源部署在Nginx上，当一个请求来的时候，若是是静态资源的请求，就直接到nginx配置的静态资源目录下面获取资源，若是是动态资源的请求，nginx利用反向代理的原理，把请求转发给后台应用去处理，从而实现动静分离。java

在使用先后端分离以后，能够很大程度的提高静态资源的访问速度，同时在开过程当中也能够让先后端开发并行能够有效的提升开发时间，也能够有些的减小联调时间。jquery

2.项目配置

修改SpringBoot应用启动类，作简单跳转，使访问根路径能够跳转到index.html，以下代码所示。nginx

@SpringBootApplication
@Controller
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/")
	public String index(){
		return "index";
	}
}
复制代码

index.html代码以下所示，注意引入jquery.js，在引用成功会使用jquery给div赋值，代码以下所示。后端

<!DOCTYPE html>
<!--解决th报错 -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
<h1>这是一个静态页面</h1>
<div id="test_div"></div>
</body>

<script type="text/javascript">
    $('#test_div').html('引用jquery.js成功');
</script>

</html>

复制代码

项目结构以下所示，能够看到没有jquery.js，咱们要作的就是使用Nginx来访问jquery.js。app

3.Nginx配置

修改nginx.conf配置，其中第一个location负责处理后台请求，第二个负责处理静态资源，以下所示。前后端分离

worker_processes  1;

events {
    worker_connections  1024;
}

http {

   server {
       listen       10000;
       server_name  localhost;
      
      #拦截后台请求
      location / {
        proxy_pass http://localhost:8888;
        proxy_set_header X-Real-IP $remote_addr;
      }

      #拦截静态资源
      location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
        root /Users/dalaoyang/Downloads/static;
       }

    }

}
复制代码