Ubuntu の Nginx で Fancy Index を利用する

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

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

検証環境¶

対象	バージョン
Ubuntu	24.04.2 LTS
Nginx	1.24.0

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 公式リポジトリ版ではディレクトリ構造が異なります)。これを以下のように修正します。

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

/etc/nginx/sites-enabled/default
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;
    }
}

変更後¶

/etc/nginx/sites-enabled/default
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 ブラウザでディレクトリへアクセスしてみると以下のように「ディレクトリ内のファイル/ディレクトリ一覧」が表示されます。

file

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

file

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

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

/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 の設定ファイルを以下のように修正します。

/etc/nginx/sites-enabled/default
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 を表示するとスタイルシートが適用された結果が表示されます。

file