Nginx基本的负载均衡配置+静态资源分离

本教材搭建一个简单的Nginx负载均衡的配置,并实现静态资源的单独负载。配置过程中需要注意静态资源的location的正则表达式,还有本地配置负载的时候,不能用localhost,只能用127.0.0.1,不然图片加载有问题。

本地配置

在本地搭建三个目录,用来模拟两个web和一个静态资源的文件

web1和web2

需要在其中分别放置两个html文件,两个文件文本引用资源[icon_1.png]和[icon_2.png]

web1/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web1</title>
</head>
<body>
<h2>web1</h2>
<img src="/resource/image/icon_1.png">
</body>
</html>

web2/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web2</title>
</head>
<body>
<h2>web2</h2>
<img src="/resource/image/icon_2.png">
</body>
</html>

静态资源

静态资源目录,用来存储css,js,图片等我文件,现在只用来放置两个文件resource/image/icon_1.pngresource/image/icon_1.png
icon_1.png
icon_2.png

本地目录结构

1
2
3
4
5
6
7
8
9
- test_nginx_image
- resource
- image
icon_1.png
icon_2.png
- web1
index.html
- web2
index.html

本地目录截图

Nginx配置

Web系统

通过配置两个不同端口的server,来模拟两个相同功能的Web系统

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
# server_18080
server {
listen 18080;
server_name localhost;

charset utf-8;

#access_log logs/host.access.log main;

location / {
root D:/Workspace/Lab/test_nginx_image/web1;
index index.html index.htm;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

# server_28080
server {
listen 28080;
server_name localhost;

charset utf-8;

#access_log logs/host.access.log main;

location / {
root D:/Workspace/Lab/test_nginx_image/web2;
index index.html index.htm;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

文件服务

通过一个server模拟来模拟文件服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# server_38080
server {
listen 38080;
server_name localhost;

charset utf-8;

#access_log logs/host.access.log main;

location ^~ /resource {
root D:/Workspace/Lab/test_nginx_image;
index index.html index.htm;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

配置动态web和静态资源的负载均衡

1
2
3
4
5
6
7
8
upstream web {
server 127.0.0.1:18080;
server 127.0.0.1:28080;
}

upstream file {
server 127.0.0.1:38080;
}

配置负载均衡服务

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
server {
listen 8080;
server_name localhost;

charset utf-8;

#access_log logs/host.access.log main;

location / {
proxy_pass http://web;
}

location ~ .*\.(gif|png|css|js)$ {
proxy_pass http://file;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

测试

启动Nginx

1
start nginx.exe

在浏览器的窗口输入http://localhost:8080,不断的刷新,可以看到web1和web2在不断的循环,图片资源也可以正常的加载。

踩过的坑

图片载入问题

图片第一次可以载入,刷新后会卡死,之后怎么刷新,都会开始,重启nginx后正常。怀疑是nginx配置错误,隐约记得localhost在负载均衡配置的有问题。验证之后,还真是这个原因。我之前配置负载的时候,使用的是localhost,并没有使用127.0.0.1。