Nginx 配置动静分离

# 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

1
2
3
4
5

‍

图片的话请自行准备几个放到 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

1
2
3
4

‍

# 配置 Nginx

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

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

1
2
3
4
5
6
7

‍

配置的作用：

第一个 location，就是访问 /www/ 的时候，会去 /opt/staticFiles/www/ 目录下寻找文件；
第二个 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;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

‍

# 测试

分别访问 http://localhost:9001/images/ 和 http://localhost:9001/images/，效果如下：

‍

上次更新: 2024/9/4 21:34:04

← Nginx 配置负载均衡 Nginx 集群概念→