配置 Nginx 的目錄瀏覽功能
有時候我們需要將服務器上的某些目錄共享出來，讓其他人可以直接通過瀏覽器去訪問、瀏覽或者下載這些目錄里的一些文件。
最近我就正好需要將一些靜態的 HTML 頁面部署到服務器上，讓自己的多臺設備能隨時隨地進行查看。
經過搜索之后找到了兩個方法：一是使用 Node 的 http-server ，二是使用 Nginx 自帶的 ngx_http_autoindex_module 模塊。由于我自己的博客就是使用 Nginx 部署的，所以我就選擇了第二種方法。
本篇文章介紹如何打開 Nginx 的目錄瀏覽功能，配置簡單的密碼保護，并對索引頁面進行美化。
配置目錄瀏覽
要開啟 Nginx 的目錄瀏覽功能很簡單，只需要打開 nginx.conf 或者對應的虛擬主機配置文件，在 server 或 location 段里面中上 autoindex on; 就可以了。
除了 autoindex 外，該模塊還有兩個可用的字段：
autoindex_exact_size on;
# 默認為 on，以 bytes 為單位顯示文件大小；
# 切換為 off 后，以可讀的方式顯示文件大小，單位為 KB、MB 或者 GB。
autoindex_localtime on;
# 默認為 off，以 GMT 時間作為顯示的文件時間；
# 切換為 on 后，以服務器的文件時間作為顯示的文件時間。
除此之外，如果二級目錄使用的是虛擬目錄，則需要使用 alias 字段進行配置。
下面是一個完整的配置文件：
location /download {
alias /home/user/static_files/;
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
}
中文亂碼問題
如果開啟了 Nginx 的目錄瀏覽功能后發現中文目錄名或者文件名顯示為亂碼，則要加上 charset 字段：
location /download {
# ... 其它同上
charset utf-8,gbk; # 兩個字符集間不要加空格
}
添加目錄密碼保護
如果該目錄是隱私目錄，就需要為其增加密碼保護。方法如下：
location /download {
# ... 其它同上
auth_basic "Enter your name and password";
auth_basic_user_file /var/www/html/.htpasswd;
}
其中， auth_basic 字段是用戶名、密碼彈框上顯示的文字（貌似在 Chrome 和 Safari 上面都沒有用到），而 auth_basic_user_file 指定了記錄登錄用戶名與密碼的文件 .htpasswd ，這個文件需要使用 htpasswd 命令或者 在線工具 來生成。
htpasswd 命令是 MacOS 系統自帶的命令，如果是 Windows 系統，建議直接使用在線生成工具比較方便。
# 創建一個全新的文件，會清除文件里的全部用戶
$ htpasswd -c /var/www/html/.htpasswd user1
# 添加一個用戶，如果用戶已存在，則修改密碼
$ htpasswd -b /var/www/html/.htpasswd user2 password
# 刪除一個用戶
$ htpasswd -D /var/www/html/.htpasswd user2
到目前為止，我們已經完成了對 Nginx 目錄瀏覽的全部配置。但是，默認的頁面樣式有點難看，我們要對其進行一些美化（裝扮QQ空間即視感）。
如果對頁面樣式沒有要求，下面的部分就不需要閱讀了。
使用 FancyIndex 進行美化
安裝 FancyIndex
網上的 FancyIndex 安裝教程大多數是在編譯 nginx 時，添加這個插件。但是，由于我的服務器是 ubuntu 系統，安裝時圖方便直接使用了 apt-get install nginx 安裝了 nginx。如果說現在為了安裝一個 FancyIndex 要重新進行一次 nginx 的編譯和配置，我想我也沒那個折騰的心情。
幸好 ubuntu 最好的地方就在于它的倉庫源很多。在 ubuntu 系統上，我們可以通過安裝 nginx-extras 來安裝 FancyIndex 插件。
$ sudo apt-get install nginx-extras
安裝完成之后，就要對頁面進行美化了。
由于我不是前端，要真讓我自己手寫來對頁面進行調整，那估計就不是美化，而是對頁面的摧毀了。幸好，對于美化的東西，網上正常都能找到主題或者模板，FancyIndex 也不例外。 這里 就有一個簡潔大方的主題可以直接拿來使用。
配置 FancyIndex
首先，將 這個主題 克隆下來。
在網站根目錄（如 /var/www/html ）下新建一個 fancyindex 目錄，然后將下面的文件復制到該目錄中：
- header.html
- footer.html
- css/fancyindex.css
- fonts/*
- images/breadcrumb.png
最后修改 nginx 配置文件，下面是完整的配置文件：
location /download {
alias /home/user/static_files/;
charset utf-8,gbk;
auth_basic "Enter your name and password";
auth_basic_user_file /var/www/html/.htpasswd;
fancyindex on;
fancyindex_exact_size off;
fancyindex_localtime on;
fancyindex_header "/fancyindex/header.html";
fancyindex_footer "/fancyindex/footer.html";
fancyindex_ignore "fancyindex";
}
注意，使用 fancyindex 之后需要將 autoindex 相關的字段去掉，否則可能會造成沖突。
文檔 上面說明了有兩個字段 fancyindex_default_sort 和 fancyindex_name_length 可以分別用來指定文件排序和文件名的最大長度，但是我試過之后都不起作用，可能是由于 nginx-extras 里面的 FancyIndex 版本比較低的緣故。
下圖是配置完后的最終效果：
來自：http://www.swiftyper.com/2016/12/08/nginx-autoindex-configuration/