30.Nginx配置动静分离

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

动静分离的实现

动静分离从目前实现角度来讲大致分为两种：

• 一种是纯粹把静态文件独立成单独的域名，放在独立的服务器上，动态资源则是在另一台服务器上，也是目前主流推崇的方案；
• 另外一种方法就是动态跟静态文件混合在一起发布，通过 nginx 来分开。

本文主要是实现第一种方式，需求：在服务器上准备2个文件夹，分别存放HTML文件和images文件，然后可以通过Nginx访问这些文件。

‍

‍

生活中的例子：就好比你去餐馆吃饭，nginx就相当于服务员，tomcat就相当于厨师，你要一瓶饮料（相当于静态资源），服务员就能给你拿，而你说你要一盘鱼香肉丝（动态资源），那服务员只好给厨师讲，让他给你做，做完后服务员再返回给你。

‍

‍

准备工作

准备静态资源：新建一个目录，然后新建2个文件夹：

• www：放html文件
• images：放图片

‍

mkdir /opt/staticFiles
cd /opt/staticFiles/
mkdir www
mkdir images
echo '<h1>static file<h1>' > www/static.html

‍

图片的话请自行准备几个放到images文件夹里，例如这是我准备的：

ll /opt/staticFiles/images
总用量 1348
-rw-r--r--. 1 root root   68874 12月 16 01:07 1.jpg
-rw-r--r--. 1 root root 1308287 12月 16 04:53 2.jpg

‍

配置Nginx

修改Nginx配置文件，重点是添加 location：

location /www/ {
	root /opt/staticFiles/;
}
location /images/ {
	root /opt/staticFiles/;
	autoindex on;
}

‍

配置的作用：

1. 第一个location，就是访问/www/的时候，会去/opt/staticFiles/www/目录下寻找文件；
2. 第二个location，就是访问/images/的时候，会去/opt/staticFiles/www/images/下寻找文件，autoindex的含义就是，如果没有指定文件名，就列出全部文件

‍

‍

完整配置：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    upstream myserver {
        server  127.0.0.1:8080;
        server  127.0.0.1:8081;
    }

    server {
        listen       9001;
        server_name  localhost;

        location /www/ {
            root /opt/staticFiles/;
        }
        location /images/ {
            root /opt/staticFiles/;
            autoindex on;
        }
        location / {
            proxy_pass http://myserver;
        }

        location ~ /edu/ {
            proxy_pass http://127.0.0.1:8080;
        }

        location ~ /vod/ {
            proxy_pass http://127.0.0.1:8081;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }
}

‍

‍

测试

分别访问http://localhost:9001/images/ 和 http://localhost:9001/images/

效果如下：

​​

‍

​​

‍

‍