前言

作为一名前端开发者，使用nginx配置静态web服务器是我们经常使用的功能之一。此外对于nginx的其他功能，比如说负载均衡，反向代理之类的我们接触的比较少。但是我认为要想掌握nginx这一大利器，我们就需要去多多了解他所具备的功能，以及nginx的设计架构和原理，而如果想要快速的掌握这块，我觉得动手去使用nginx是最快的途径之一。本章记录下搭建nginx的过程。

基本实现

基本功能

文件目录查看
点击文件目录展示下一级
文件目录下文件数量显示（待定）
点击文件下载功能
文件信息展示（更新时间文件类型文件大小）
文件上传功能（待定）
文件目录搜索功能（待定）
文件目录自定义样式（待定 fancyindex）

实现步骤

服务器（百度云ubuntu）
安装nginx

apt install nginx

配置nginx

http{
    server{
        location /test{
            alias /var/www; //目录路径
            autoindex on;
        }
    }
}

测试/启用nginx

nginx -t //返回ok则说名语法没问题
nginx -s start

打开浏览器页面

这个是nginx自带的文件处理，样式不够美观，在真实项目中我们常常使用Nginx-Fancyindex-Theme来美化目录样式。

facyindex的配置使用

当我们不满足于nginx自带的文件服务器样式时候，我们可以使用facyindex来重新格式化其目录样式，具体操作如下

环境安装（必须在linux机器上，window没试过）

下载nginx和fancyindex源代码(centos)

yum install https://extras.getpagespeed.com/redhat/7/x86_64/RPMS/nginx-module-fancyindex-1.12.0.0.4.1-1.el7.gps.x86_64.rpm

安装fancyindex

yum install nginx-module-fancyindex

加载fancyindex

load_module "modules/ngx_http_fancyindex_module.so";

//如果系统是ubuntu那比较简单

安装fancyindex

sudo apt-get install nginx-extras

配置fancyindex

基础配置

location /teset {
  alias /var/www; //目录路径
  fancyindex on;              # Enable fancy indexes.
  fancyindex_exact_size off;  # Output human-readable file sizes.
}

其他fancyindex配置

//允许在生成的清单中插入指向CSS样式表的链接。该链接将插入到内置CSS规则之后，因此您可以覆盖默认样式。
fancyindex_css_href
//指定应该将哪个文件插入到目录清单的底部。如果设置为空字符串，则发送模块提供的默认页脚。
fancyindex_footer
//指定应该将哪个文件插入到目录清单头部。如果设置为空字符串，则发送模块提供的默认页眉。
fancyindex_header
//指定将不会在生成的清单中显示的文件名列表
fancyindex_ignore
//Enables showing file times as local time. Default is “off” (GMT time).
fancyindex_localtime

启动nginx

nginx -t
nginx -s reload

至此我们可以实现一个比默认格式更美观的文件服务器，如下图：这样肯定还不够的，为此我们可以引入个开源插件fancyindex-theme,这个提供了两种主题light和dark我选择了light主题进行搭建

引入fancyindex-theme

注：fancyindex-theme是基于fancyindex的插件，提供了更加优美的文件展示页面。以及一些检索操作。

准备好前两步的环境
clone fancyindex-theme仓库

git clone https://github.com/Naereen/Nginx-Fancyindex-Theme

将light主题文件放到对应的文件夹下（及在配置文件中alias定义的路径）

cp Nginx-Fancyindex-Theme-light /var/www/Nginx-Fancyindex-Theme-light

修改nginx配置文件

{
       fancyindex_localtime on;
        fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
}

注：如果我们在nginx中的配置location 为/test，那我们在引入fancyindex_header和fancyindex_footer是就要如下写

{
     fancyindex_header "/test/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/test/Nginx-Fancyindex-Theme-light/footer.html";
}

另外在/Nginx-Fancyindex-Theme-light/footer.html和fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html"文件中需要在引入外部文件的地方都加上前缀test

 <link rel="stylesheet" href="/test/Nginx-Fancyindex-Theme/styles.css">
<script type="text/javascript" src="/test/Nginx-Fancyindex-Theme/jquery.min.js"></script>

这个是因为nginx路由匹配规则导致。

重新启动后刷新页面如下图：

总结

本节主要是了解下nginx在搭建静态文件服务器中的使用，虽然默认的nginx文件模块已经能满足我们功能需求，但作为一名前端工程是追求友好交互是必不可少的品质之一。另外，在这个大前端时代，对于前端开发来说掌握nginx那我们就相当于在前端领域多了另一种可能。

命令总结：

1.autoindex打开文件服务器功能
2.alias设置文件服务器的路径
3.fancyindex文件展示样式优化

服务器端知识库nginx搭建文件服务器

前言