山地人

Nginx配置Web静态站点

山地人
山地人
2021-07-26

这一篇,我们学习如何使用Nginx来配置静态站点。

最简单的静态站点配置

/home目录下有一个www的静态站点。

/home
|--www
|---index.html
|---hello.html

启动终端,查看这个站点的结构。

现在修改/etc/nginx/nginx.conf,在其中配置如下内容。

events {}
http {
server {
root /home/www/;
}
}
  • events是一个必须要配置的项,这里配了一个空的events指定块。
  • server是我们配置要配置web服务,这个模块放置在http模块下。
  • root用来指定静态服务器资源放置的根目录。

在这个最简单的静态服务器中,我们只设置了root这一个指令,其他都是使用的Nginx的默认参数。

启动右下角的终端,然后点击运行,观察浏览器变化。

指定首页

现在,假设我们要把默认的首页从index.html更改为指向hello.html,可以通过index指令来完成这个需求。

index指令

定义可以用来作为首页的文件,可以将一个或多个文件设置为首页,并且定义中可以包含变量。

语法默认值上下文(Context)
index file …;index index.html;http, server, location
  • 默认值index.html,默认情况下Nginx将index.html作为首页入口。
  • index指令可以用在http,server,location这三种上下文Context中都可以定义index。

为了完成前面的任务,将首页换成hello.html,只需要在server块中添加下面这行:

index hello.html;

记得不要忘记结尾的分号。

运行,观察浏览器首页的变化。

你也可以将上面的index hello.html;放置到http模块中,这样,所有http块中的server的首页都会变成hello.html

自定义错误页

如果用户访问了一个不存在的页面,会触发404错误,然后我们会看到Nginx默认配置的404 Not Found页面。

我们可以使用error_page指令对404错误指定自己的错误页。

error_page指令

语法默认值上下文(Context)
error_page code … [=[response]] uri;-http, server, location, if in location
  • code 指定要处理的错误状态码,比如:404、500、502、503、504。 在一条error_page中可以指定多个错误状态码:error_page 500 502 503 504 /50x.html;
  • =respose 如果设置为=后面不加其他状态码,则是返回200,如果要指定成其他状态码,可以设置为如:=500将之前匹配的错误状态码变为500的状态码返回。
  • uri是返回要显示的页面,可以是一个具体的URI或者一个内部定义的命名的location。
location / {
error_page 404 = @fallback;
}
location @fallback {
proxy_pass http://backend;
}

对于我们上面的问题,我们希望将404错误,统一用我们自己定义的404.html页面来展示,因此使用下面的方式来定义:

error_page 404 = /404.html;

运行,点击访问不存在的页面

location块

location指令用于对特定的URI进行配置。

语法默认值上下文(Context)
location [ = | ~ | ~* | ^~ ] uri { … }-server, location
  • uri部分指定要处理的URI,这个部分可以是一个正则。

对于uri部分,前面定义的修饰符指明了后面的匹配采用什么样的策略进行匹配。

修饰符含义
=精确匹配
~用于区分大小写的匹配
~*用于不区分大小写的匹配
^~最长匹配

为了理清楚不同的匹配修饰符的含义,下面是一组location块的配置:

location = / {
[A配置]
}
location / {
[B配置]
}
location /doc/ {
[C配置]
}
location ^~ /images/ {
[D配置]
}
location ~* \.(gif|jpg|jpeg)$ {
[E配置]
}

Nginx在收到请求后,会根据请求的URI和定义的location按照从上到下的顺序依次进行匹配,一旦匹配成功,就会使用对应的location来进行处理。

点击运行,访问不同的页面,观察页面跳转。

分析请求匹配

请求/index.html,由于第一个location = /是一个精确匹配/的模式,因此匹配失败,而location /会被匹配上,因此会被应用B配置

请求/doc/about.html,会被location /doc/匹配上,所以会被应用C配置

请求/images/header.png,会匹配location ^~ /images/^~使用的是最长匹配

请求/about/me.jpg,会匹配location ~* \.(gif|jpg|jpeg)$,因为这条正则匹配以.gif或.jpg或者.jpeg结尾的请求。~*会忽略大小写。所以对于,me.JPG这样的请求也会被匹配上。

try_files指令

按照指定的循序检查文件是否存在,使用第一个匹配到的文件处理请求。

语法默认值上下文(Context)
try_files file … uri; 或 try_files file … =code;-server, location

try_files指令支持两种写法。两种写法中间的file ...表明可以定义多个尝试查找的路径。最后一个参数可以是uri或者设置一个状态码=code

样例1

下面的try_files指令会先尝试查找/a.html如果找不到则使用/b.html来处理。

try_files /a.html /b.html;

样例2

下面这句会先尝试查找当前root目录下是否有/a.html文件,如果找到则使用/a.html来返回响应,如果没有找到,就返回404状态码。

try_files /a.html =404;

样例3

location / {
try_files $uri $uri/ @default;
}
location @default {
try_files /404.html =404;
}

点击运行,访问不同的页面,观察页面跳转。

过程分析

当请求首页时,URL匹配location /,此时的$uri的值为/,所以在try_files指令中,尝试查找$uri/index.html也就是查找/index.html匹配成功,返回index.html的内容。

当点击了index.html中的访问/abc的链接后,页面请求/abc还是匹配location /的块,这次$uri/index.html就是查找/abc/index.html结果查找不到,于是转到@default处理,在location @default块中,try_files /404.html =404先尝试查找/404.html,找到了,所以返回了404.html的结果。

至此,本篇教程也到了该和你说再见的时候了,我们下期再见。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。