文章目录

  • 一、什么是动静分离
  • 1.1 动静分离原理
  • 1.2 Nginx实现动静分离的优势
  • 二、动静分离的实现
  • 2.1 先了解一下location语法
  • 2.1.1 nginx模块
  • 2.1.2 Nginx location匹配符与匹配优先级
  • 2.1.3 Nginx location匹配示例
  • 2.1.4 使用正则配置动静分离（重要）
  • 2.2 云服务器开放8080端口
  • 2.3 安装配置Tomcat
  • 2.4 实现动静分离：
  • 2.5 总结


一、什么是动静分离

1.1 动静分离原理

动静分离指的是将动态请求和静态请求分隔开，然后分别路由到相应的后端服务器。通常用户的请求中，一部分需要后台程序处理，例如查询数据库或者进行一些数据运算，这类请求我们称之为动态请求；还有一部分不需要后台程序处理，如请求 css、html、js、图片等静态资源，这类请求我们称之为静态请求。Nginx 实现动静分离的基础是它可以根据配置对不同的请求做不同的转发，动静分离有利于提高整个服务器系统的性能。

为了提高网站的响应速度，减轻程序服务器（Tomcat，Jboss等）的负载，对于静态资源，如图片、js、css等文件，可以在反向代理服务器中进行缓存，这样浏览器在请求一个静态资源时，代理服务器就可以直接处理，而不用将请求转发给后端服务器。对于用户请求的动态文件，如servlet、jsp，则转发给Tomcat，Jboss服务器处理，这就是动静分离。即动态文件与静态文件的分离。

nginx处理动态网页 nginx支持动态网页吗_tomcat


动静分离可通过location对请求url进行匹配，将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。通常将静态资源放到nginx中，动态资源转发到tomcat服务器中。

1.2 Nginx实现动静分离的优势

Nginx 服务器：

  • 首页使用精准匹配
  • 静态页面使用正则匹配自己处理
  • 动态页面使用正则匹配jsp结尾的请求，使用proxy_pass转发给Tomcat服务器

Nginx 静态处理优势

  • Nginx处理静态页面的效率远高于Tomcat的处理能力
  • 若Tomcat的请求量为1000次，则Nginx的请求量为6000次
  • Tomcat每秒的吞吐量为0.6M，Nginx的每秒吞吐量为3 .6M
  • Nginx处理静态资源的能力是Tomcat处理的6倍

简述Nginx动静分离原理：

  • 服务端接收来自客户端的请求中，既有静态资源也有动态资源
  • 静态资源有Nginx提供服务
  • 动态资源Nginx转发至后端

二、动静分离的实现

2.1 先了解一下location语法

2.1.1 nginx模块

location大量存在与Nginx的配置文件中，我们可以使用location的配置，来实现不同的文件进行不同的处理，Nginx配置文件中的location模块如下

nginx处理动态网页 nginx支持动态网页吗_网络_02

2.1.2 Nginx location匹配符与匹配优先级

location的匹配符一共有6种，如下表所示：

nginx处理动态网页 nginx支持动态网页吗_网络_03


尽管Nginx的配置文件中location的配置有先后顺序，但是Nginx在运行过程中对location模块的查找却并不是按照在配置文件中的位置进行的，而是有一定的匹配规则。

字面精确匹配会第一个被处理，接下来是最大前缀匹配的完整路径，再然后是两个正则匹配，其次是最大前缀的部分路径匹配，最后是不带任何前缀的默认匹配。总得来看，Nginx的location匹配顺序如下所示：

1、location =

2、location ^~（完整路径）

3、location ~或location ~*正则表达式匹配

4、location ^~（部分路径）

5、location /

当location按照顺序匹配到前一个时，就不会继续向下进行匹配。

2.1.3 Nginx location匹配示例

最后，为了使大家更好的理解Nginx中location模块的匹配，我以三个简单的例子进行展示Nginx location的匹配。

1、完整路径匹配

location = /index.php{
	【相关配置】
}

这种配置表示匹配/index.php文件，当HTTP请求访问URL为该文件时，进行location下配置的处理。

2、部分路径匹配

location = /images/ {
	【相关配置】
}

这种配置表示匹配/images/目录下的所有文件，当HTTP请求访问该目录下的所有文件时，按照该模块下的配置进行处理。

3、默认匹配

location / {
	【相关配置】
}

这种匹配方式为默认匹配，当所有其他的匹配都不生效时，会进行这种匹配。

4、正则表达式匹配

location ~* \.(php|jsp|asp)$ {
	【相关配置】
}

这种匹配为正则表达式匹配，大括号前面的是一个正则表达式，表示当访问.php文件或者.asp文件或者.asp文件时，进行该location下的匹配处理，这种匹配方式经常用在Nginx动静分离场景下进行使用。

2.1.4 使用正则配置动静分离（重要）

常见的Nginx正则表达式

^ ：匹配输入字符串的起始位置
$ ：匹配输入字符串的结束位置
* ：匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll”
+ ：匹配前面的字符一次或多次。如“ol+”能匹配“ol”及“oll”、“olll”，但不能匹配“o”
? ：匹配前面的字符零次或一次，例如“do(es)?”能匹配“do”或者“does”，”?”等效于”{0,1}”
. ：匹配除“\n”之外的任何单个字符，若要匹配包括“\n”在内的任意字符，请使用诸如“[.\n]”之类的模式
\ ：将后面接着的字符标记为一个特殊字符或一个原义字符或一个向后引用。如“\n”匹配一个换行符，而“\$”则匹配“$”
\d ：匹配纯数字
{n} ：重复 n 次
{n,} ：重复 n 次或更多次
{n,m} ：重复 n 到 m 次
[] ：定义匹配的字符范围
[c] ：匹配单个字符 c
[a-z] ：匹配 a-z 小写字母的任意一个
[a-zA-Z0-9] ：匹配所有大小写字母或数字
() ：表达式的开始和结束位置
| ：或运算符  //例(js|img|css)

location正则：

//location大致可以分为三类
精准匹配：location = /{}
一般匹配：location /{}
正则匹配：location ~/{}
//location常用的匹配规则：
= ：进行普通字符精确匹配，也就是完全匹配。
^~ ：表示前缀字符串匹配（不是正则匹配，需要使用字符串），如果匹配成功，则不再匹配其它 location。
~ ：区分大小写的匹配（需要使用正则表达式）。
~* ：不区分大小写的匹配（需要使用正则表达式）。
!~ ：区分大小写的匹配取非（需要使用正则表达式）。
!~* ：不区分大小写的匹配取非（需要使用正则表达式）。
//优先级
首先精确匹配 =
其次前缀匹配 ^~
其次是按文件中顺序的正则匹配 ~或~*
然后匹配不带任何修饰的前缀匹配
最后是交给 / 通用匹配

注意：

  • 精确匹配： = ， 后面的表达式中写的是纯字符串
  • 字符串匹配： ^~ 和 无符号匹配 ， 后面的表达式中写的是纯字符串
  • 正则匹配： ~ 和 ~* 和 !~ 和 !~* ， 后面的表达式中写的是正则表达式

location的说明

(1）location = / {}
=为精确匹配 / ，主机名后面不能带任何字符串，比如访问 / 和 /data，则 / 匹配，/data 不匹配
再比如 location = /abc，则只匹配/abc ，/abc/或 /abcd不匹配。若 location  /abc，则即匹配/abc 、/abcd/ 同时也匹配 /abc/。

（2）location / {}
因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求 比如访问 / 和 /data, 则 / 匹配， /data 也匹配，
但若后面是正则表达式会和最长字符串优先匹配（最长匹配）

（3）location /documents/ {}
匹配任何以 /documents/ 开头的地址，匹配符合以后，还要继续往下搜索其它 location
只有其它 location后面的正则表达式没有匹配到时，才会采用这一条

（4）location /documents/abc {}
匹配任何以 /documents/abc 开头的地址，匹配符合以后，还要继续往下搜索其它 location
只有其它 location后面的正则表达式没有匹配到时，才会采用这一条

（5）location ^~ /images/ {}
匹配任何以 /images/ 开头的地址，匹配符合以后，停止往下搜索正则，采用这一条

（6）location ~* \.(gif|jpg|jpeg)$ {}
匹配所有以 gif、jpg或jpeg 结尾的请求
然而，所有请求 /images/ 下的图片会被 location ^~ /images/ 处理，因为 ^~ 的优先级更高，所以到达不了这一条正则

（7）location /images/abc {}
最长字符匹配到 /images/abc，优先级最低，继续往下搜索其它 location，会发现 ^~ 和 ~ 存在

（8）location ~ /images/abc {}
匹配以/images/abc 开头的，优先级次之，只有去掉 location ^~ /images/ 才会采用这一条

（9）location /images/abc/1.html {}
匹配/images/abc/1.html 文件，如果和正则 ~ /images/abc/1.html 相比，正则优先级更高

优先级总结：
(location =) > (location 完整路径) > (location ^~ 路径) > (location ~,~* 正则顺序) > (location 部分起始路径) > (location /)

实际网站使用中，至少有三个匹配规则定义

第一个必选规则

location = / {
    proxy_pass http://127.0.0.1:8080/; 
}

直接匹配网站根，通过域名访问网站首页比较频繁，使用这个会加速处理，比如说官网。这里是直接转发给后端应用服务器了，也可以是一个静态首页

第二个必选规则

location ^~ /static/ {
    root /webroot/static/;
}

location ~* \.(html|gif|jpg|jpeg|png|css|js|ico)$ {
    root /webroot/res/;
}

处理静态文件请求，这是nginx作为http服务器的强项,有两种配置模式，目录匹配或后缀匹配,任选其一或搭配使用

第三个规则

location /api/ {
    proxy_pass http://127.0.0.1:3000/api/
}

通用规则，用来转发动态请求到后端应用服务器

2.2 云服务器开放8080端口

nginx处理动态网页 nginx支持动态网页吗_nginx处理动态网页_04


点进来后，点击防火墙：

Tomcat需要开放宝塔依赖的端口号是8080，所以需要在防火墙增加开放对应的端口号。如下：

nginx处理动态网页 nginx支持动态网页吗_Nginx_05

按照上图操作，添加8080端口；

2.3 安装配置Tomcat

首先使用宝塔面板安装tomcat，如果你还没安装宝塔，请参考上篇文章：

【网络编程】腾讯云服务器安装宝塔面板 安装tomcat的过程如下：

在宝塔软件商店搜索找到Tomcat，安装

nginx处理动态网页 nginx支持动态网页吗_tomcat_06


安装完成后，在宝塔页面添加放行端口，把8080添加进去：

nginx处理动态网页 nginx支持动态网页吗_nginx_07


此时，Tomcat安装配置成功了，我们访问试一下：在浏览器上输入你的云服务器公网ip:8080,结果如下：

nginx处理动态网页 nginx支持动态网页吗_nginx处理动态网页_08


这是Tomcat的默认界面，安装成功。

2.4 实现动静分离：

借用博客中的例子来演示，并进行相应的讲解：

先将原来的宝塔中Tomcat目录下的原文件删除：

nginx处理动态网页 nginx支持动态网页吗_Nginx_09

然后下载charts-project.zip并解压并放入如下位置，charts-project.zip下载地址：https://pan.baidu.com/s/1baD910BQD1DGdwdMmK0qTg?pwd=aaaa

nginx处理动态网页 nginx支持动态网页吗_nginx处理动态网页_10


此时再访问我们的公网ip:8080,如：http://192.168.8.101:8080/

nginx处理动态网页 nginx支持动态网页吗_tomcat_11


可以看到已经呈现出了我们自己的网页。

然后利用nginx配置反向代理，使192.168.8.102:8080来代理192.168.8.101:8080,即访问192.168.8.102:8080时，实际访问的是192.168.8.101:8080；配置如下：
在192.168.8.102的nginx.conf中，

worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;


        location / {
            proxy_pass http://192.168.8.101:8080;

        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }


}

试一下试一下，我们访问http://192.168.8.102/，结果如下：

nginx处理动态网页 nginx支持动态网页吗_nginx_12


跟我们直接访问http://192.168.8.101:8080/是一样的。

此时我们把101上的imagew文件夹删除（即宝塔中的Tomcat中的，我们刚上传的文件夹中的images文件夹）

nginx处理动态网页 nginx支持动态网页吗_网络_13


删除后，再去访问http://192.168.8.102/，发现访问到的网页中没有图片了：

nginx处理动态网页 nginx支持动态网页吗_tomcat_14


接下来，我们将静态资源（images）配置到代理服务器102：

nginx处理动态网页 nginx支持动态网页吗_网络_15

然后配置102的nginx.cfg，

#user  nobody;
worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;

        location / {
            proxy_pass http://192.168.8.101:8080;
        }
        
        location /images {
            root   /www/resources;
            index  index.html index.htm;
        }
        

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

访问192.168.8.102，发现图片又出现了：

nginx处理动态网页 nginx支持动态网页吗_Nginx_16

2.5 总结

在本例中，我们使用192.168.8.102服务器来代理192.168.8.101:8080,然后，动态资源依旧放在被代理服务器192.168.8.101:8080上，但是静态资源放在代理服务器192.168.8.102上，通过102的nginx.conf配置文件，当有客户端访问192.168.8.102时，通过location进行区分，如果发现是请求image（即静态资源）的，就访问/www/resources，其他的，则利用一般匹配，访问到http://192.168.8.101:8080（即动态资源）；只有前面不匹配，才会最后访问动态资源，因为location /的优先级是最低的，详细优先级顺序请去看第2.1.2和2.1.4节。

nginx处理动态网页 nginx支持动态网页吗_nginx处理动态网页_17