有時候我們需要將服務器上的某些目錄共享出來，讓其他人可以直接通過瀏覽器去訪問、瀏覽或者下載這些目錄里的一些文件。

最近我就正好需要將一些靜態的 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 版本比較低的緣故。

下圖是配置完后的最終效果：