前言
作为一名前端开发者，使用nginx配置静态web服务器是我们经常使用的功能之一。此外对于nginx的其他功能，比如说负载均衡，反向代理之类的我们接触的比较少。但是我认为要想掌握nginx这一大利器，我们就需要去多多了解他所具备的功能，以及nginx的设计架构和原理，而如果想要快速的掌握这块，我觉得动手去使用nginx是最快的途径之一。本章记录下搭建nginx的过程。
基本实现
基本功能
- 文件目录查看
- 点击文件目录展示下一级
- 文件目录下文件数量显示（待定）
- 点击文件下载功能
- 文件信息展示（更新时间 文件类型 文件大小）
- 文件上传功能（待定）
- 文件目录搜索功能（待定）
- 文件目录自定义样式（待定 fancyindex）
相关api
在开始搭建文件服务器之前我们先要了解下实现这块的相关api，在nginx模块中有如下 ngx_http_autoindex_module，模块处理以斜杠（'/'）结尾的请求，并生成目录列表。
- autoindex ：启用或禁用目录列表输出。
- autoindex_exact_size：默认为on，显示出文件的确切大小，单位是bytes。改为off后，显示出文件的大概大小，单位是kB或者MB或者GB
- autoindex_format：html | xml | json | jsonp;
- autoindex_localtime：默认为off，显示的文件时间为GMT时间。 改为on后，显示的文件时间为文件的服务器时间
实现步骤
- 服务器（百度云ubuntu）
- 安装nginx
apt install nginx
- 配置nginx
http{ server{ location /test{ alias /var/www; //目录路径 autoindex on; } } }
- 测试/启用nginx
nginx -t //返回ok则说名语法没问题 nginx -s start
- 打开浏览器页面
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
注：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文件展示样式优化
