Ubuntu の Nginx で Fancy Index を利用する

以前に以下のメモを書きました。

• Nginx で Fancy Index を有効化し、DirectoryIndex 表示を改善する
• Ubuntu の Nginx で autoindex を使い、ファイル・ディレクトリの一覧を表示する

改めて Ubuntu 環境下の Nginx で Fancy Index を有効化する方法をメモしておきます。 Nginx のバージョンですが、Ubuntu 標準リポジトリのものは Nginx 公式リポジトリ上のものより、ややバージョンが古いです。 Nginx 公式のものを使いたくなる… のですが、モジュールを追加したい場合は Ubuntu 標準リポジトリ上の Nginx を使った方が簡単です。 今回は Fancy Index モジュールを使うことになる為、(Nginx 公式版では無く) Ubuntu 標準リポジトリ上の Nginx を使うことにします。

検証環境¶

Nginx と Fancy Index のインストール¶

apt -y install nginx libnginx-mod-http-fancyindex

デフォルトの index.html を削除する¶

ファイル・ディレクトリを表示する際に邪魔になる為、デフォルトの index.html ファイルは削除します。

rm -f /usr/share/nginx/html/index.html

Apache 風ドキュメントルートのシンボリックリンクを作成¶

Nginx のドキュメントルートはデフォルトで /usr/share/nginx/html に設定されています。 これは階層が深く、やや覚えづらい為、Apache のドキュメントルートである /var/www/html が使えるようにシンボリックリンクを追加します。

mkdir -p /var/www/ && \
rm -rf /var/www/html/ && \
ln -s /usr/share/nginx/html /var/www/

/etc/nginx/sites-enabled/default

Fancy Index を有効化する¶

Fancy Index を有効化します。 Nginx の設定ファイルは /etc/nginx/sites-enabled/default にあります (※ Ubuntu 標準リポジトリ版と Nginx 公式リポジトリ版ではディレクトリ構造が異なります)。 これを以下のように修正します。

変更前 (コメント除外版)¶

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name _;
    location / {
        try_files $uri $uri/ =404;
    }
}

変更後¶

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name _;
    fancyindex on;
    fancyindex_exact_size off;
    fancyindex_localtime on;
    location / {
        try_files $uri $uri/ =404;
    }
}

Nginx を再起動する¶

systemctl restart nginx.service

Web ブラウザでアクセスする¶

Web ブラウザでディレクトリへアクセスしてみると以下のように「ディレクトリ内のファイル/ディレクトリ一覧」が表示されます。

autoindex を有効化した際の見え方は下記です。 Fancy Index と比較するとカラム名がなかったり、簡素です。

スタイルシートを適用する¶

Fancy Index にスタイルシートを適用することも出来ます。 例えば /usr/share/nginx/html/styles/fancy_index.css に以下の内容でファイルを新規作成します。

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
a:-webkit-any-link:focus {text-decoration: underline; color: #f4ee41;}
a:-webkit-any-link:hover {color: #e33;}
td:hover {
  background-color: #FFEEFF;
}

Nginx の設定ファイルを以下のように修正します。

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name _;
    fancyindex on;
    fancyindex_exact_size off;
    fancyindex_localtime on;
    fancyindex_css_href /styles/fancy_index.css;
    location / {
        try_files $uri $uri/ =404;
    }
}

修正が完了したら Nginx を再起動して変更を反映します。

systemctl restart nginx.service

この状態で Fancy Index を表示するとスタイルシートが適用された結果が表示されます。