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 | |
---|---|
1 2 3 4 5 6 7 8 9 10 |
|
変更後¶
/etc/nginx/sites-enabled/default | |
---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Nginx を再起動する¶
systemctl restart nginx.service
Web ブラウザでアクセスする¶
Web ブラウザでディレクトリへアクセスしてみると以下のように「ディレクトリ内のファイル/ディレクトリ一覧」が表示されます。
autoindex を有効化した際の見え方は下記です。 Fancy Index と比較するとカラム名がなかったり、簡素です。
スタイルシートを適用する¶
Fancy Index にスタイルシートを適用することも出来ます。 例えば /usr/share/nginx/html/styles/fancy_index.css
に以下の内容でファイルを新規作成します。
/usr/share/nginx/html/styles/fancy_index.css | |
---|---|
1 2 3 4 5 6 7 8 9 10 |
|
Nginx の設定ファイルを以下のように修正します。
/etc/nginx/sites-enabled/default | |
---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
修正が完了したら Nginx を再起動して変更を反映します。
systemctl restart nginx.service
この状態で Fancy Index を表示するとスタイルシートが適用された結果が表示されます。