Nginx搭建静态WEB服务器

最新推荐文章于 2025-11-18 00:26:05 发布

原创最新推荐文章于 2025-11-18 00:26:05 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #web服务器

nginx 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Nginx配置中root和alias指令的区别，并通过实例展示了它们在处理请求路径时的不同行为。在root指令下，服务器直接拼接路径寻找文件，而在alias指令下，则会移除location后的参数再拼接路径。同时，文章提供了一个简单的网站素材示例，并指导如何根据这两个指令将文件上传至服务器。此外，还提及了开启gzip压缩以提升文件传输效率。

在搭建之前，我们先学习一下，两个指令 root 和 alias 。
在这里插入图片描述
比如，主机是 www.gosuncn.fun

location /i/ {
root /data/w3;
}

，那么我们的请求是 http://www.gosuncn.fun/i/top.gif，服务器会如何寻找文件呢？
服务器会把root后的值 /data/w3 和 URI 的值 /i/top.gif 直接拼接。
文件/data/w3/i/top.gif将会返回给你。
在这里插入图片描述
那么，alias呢？
比如，主机是 www.gosuncn.fun

location /i/ {
alias /data/w3/images/;
}

，那么我们的请求是 http://www.gosuncn.fun/i/top.gif，服务器会如何寻找文件呢？
服务器会把alias后的值 /data/w3 和 URI 的值 /i/top.gif 中的/i/去除之后，再进行拼串。
文件/data/w3/images/top.gif将会返回给你。

综上所述，你总结清楚了吗？

我再总结一遍，root 很简单，就是直接拼在一起；而 alias 略微的多了一步，就是去除 location 后的参数后再拼串。

那接下来我们准备，一个网站的素材。我们提供了3个页面，分别是首页、新闻页、游戏页。
首页代码（index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
这是我的测试网站
<a href="news.html">新闻</a>
<a href="games.html">游戏</a>
</body>
</html>

新闻页代码（news.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页</title>
</head>
<body>
<ul>
    <li>腾讯新闻</li>
    <li>新浪新闻</li>
    <li>百度新闻</li>
</ul>
</body>
</html>

游戏页代码（games.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏页面</title>
</head>
<body>
<ul>
    <li>王者荣耀</li>
    <li>英雄联盟</li>
    <li>穿越火线</li>
</ul>
</body>
</html>

将三个文件放置在名叫website的文件夹里。
在这里插入图片描述
然后，将这个文件夹，上传到服务器的/opt/nginx目录中。

[root@VM-0-9-centos nginx]# ls
conf html  logs  sbin website

修改一下配置：

在这里插入图片描述
如果，使用 root 指令就用 website ，如果使用 alias 指令就用 website/ 。看完上面的解释，理解原因了吧？启动nginx，测试运行即可。
其实，还有一点文本文件的压缩效果是十分明显的，因此我们可以加上压缩功能。

    gzip  on;
    gzip_min_length 1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/bmp application
/x-bmp image/x-ms-bmp application/vnd.ms-fontobject font/ttf font/opentype font/x-woff;