Appearance
Nginx 檔案服務 Server
用 Nginx 建立靜態檔案目錄瀏覽服務,含原生 autoindex 與美化版 fancyindex 兩種方案。
概述
Nginx 的 autoindex 模組可將指定目錄下的檔案自動列成索引頁,是快速建立內部檔案共享服務的輕量選項。若需要更美觀的介面,可安裝 nginx-mod-http-fancyindex 模組,搭配自訂主題提供更現代的瀏覽體驗。
兩者的適用情境:
| 方案 | 特色 | 適用情境 |
|---|---|---|
| autoindex(原生) | 無需額外模組,設定簡單 | 快速內部分享、不在乎樣式 |
| fancyindex | 美觀介面,支援自訂主題 | 對外展示、漫畫/媒體檔案瀏覽 |
注意: fancyindex 是額外模組,必須使用自訂建置的 Nginx Image(官方 Nginx image 不包含此模組)。
核心內容
autoindex 設定重點
| 指令 | 效果 |
|---|---|
autoindex on | 啟用目錄列表 |
autoindex_exact_size off | 檔案大小以 KB/MB 顯示,而非精確 bytes |
autoindex_localtime on | 使用伺服器本地時間顯示檔案時間(預設為 UTC) |
charset utf-8 | 確保中文檔名正確顯示 |
try_files 嘗試順序:
| 嘗試順序 | 說明 |
|---|---|
$uri | 直接匹配請求路徑 |
$uri.html | 嘗試加上 .html 副檔名 |
$uri.xhtml | 嘗試加上 .xhtml 副檔名 |
$uri/ | 嘗試作為目錄處理(觸發 autoindex) |
=404 | 以上皆不符,回傳 404 |
注意: Nginx 預設不會自動補全
.html副檔名,需在try_files中明確加入$uri.html。
可在同一個 server 下設定多個 location block,不同路徑使用不同根目錄。
fancyindex 方案的架構
fancyindex 需要在 Nginx build 時包含模組,Alpine 版本可透過 apk add nginx-mod-http-fancyindex 安裝。常見的部署流程是:
- 基於 Alpine 建置自訂 Nginx Docker Image,安裝 fancyindex 模組
- 將自訂主題複製進 Image
- 以 Docker Compose 啟動,掛載資料目錄與設定檔
Alpine 路徑差異: Alpine 版本 Nginx 的設定檔路徑與官方 Image 不同,掛載設定檔時應使用
/etc/nginx/http.d/default.conf,而非官方 Image 的/etc/nginx/conf.d/default.conf。
推薦主題
nginx-fancyindex-flat-theme — 扁平化現代設計,開源免費,適合漫畫或一般檔案瀏覽。
關鍵要點
- autoindex 是 Nginx 原生功能,零依賴,設定簡單
- fancyindex 需要自訂 Image,但介面更適合對外或長期使用
- Alpine 的 Nginx 設定路徑是
/etc/nginx/http.d/default.conf,掛載時須注意 charset utf-8確保中文檔名正確顯示
實際應用
- 內部漫畫、影片或文件共享
- 部署結果或靜態資源的瀏覽服務
- 搭配 Samba 或 SFTP 提供 Web 瀏覽介面(參考 Samba + Nginx 檔案分享服務)
- 相較之下,Caddy 靜態檔案伺服器 提供更豐富的原生快取策略與 Prometheus metrics,適合進階需求
部署設定參考
以下為實際部署時使用的完整設定,供日後查詢與複製使用。
環境參數
| 項目 | 值 |
|---|---|
| 暴露 Port | 9889 |
| 資料目錄 | ./data → /usr/share/nginx/html |
| 設定檔路徑(Alpine) | /etc/nginx/http.d/default.conf |
| 已打包 Image | wyhqbizautacr.azurecr.io/nginxfancyindex:latest |
方案 A:基本 autoindex 設定
nginx.conf
nginx
server {
listen 80;
root /usr/share/nginx/html/root;
charset utf-8;
location / {
try_files $uri $uri.html $uri.xhtml $uri/ =404;
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
}
location /comic/ {
root /usr/share/nginx/html;
try_files $uri $uri.html $uri/ =404;
}
}方案 B:fancyindex 美化版
Dockerfile
dockerfile
FROM alpine:latest
RUN apk add --no-cache nginx nginx-mod-http-fancyindex
COPY ./theme /etc/nginx/theme
RUN sed -i '1s/^/daemon off;\n/' /etc/nginx/nginx.conf && \
ln -sf /dev/stdout /var/log/nginx/access.log && \
ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
CMD ["nginx"]nginx.conf(fancyindex 版)
nginx
server {
listen 80;
root /usr/share/nginx/html;
charset utf-8;
location / {
fancyindex on;
fancyindex_header "/theme/header.html";
fancyindex_footer "/theme/footer.html";
fancyindex_show_path off;
fancyindex_name_length 255;
fancyindex_exact_size off;
fancyindex_localtime on;
}
location /theme/ {
alias /etc/nginx/theme/;
}
}若只需預設樣式(不用自訂主題),僅加
fancyindex on;即可,無需設定 header/footer。
docker-compose.yml
yaml
version: '3'
services:
nginx_fancy:
image: nginxfancyindex:0.1
container_name: nginx_fancy
restart: always
ports:
- "9889:80"
volumes:
- "./nginx.conf:/etc/nginx/http.d/default.conf"
- "./data:/usr/share/nginx/html"
- "./theme:/etc/nginx/theme"操作指令
bash
# 建置自訂 fancyindex Image
docker build -t nginxfancyindex:0.1 .
# 啟動服務
docker compose up -d
# 重新載入 Nginx 設定(不重啟容器)
docker exec nginx_fancy nginx -s reload相關概念
- Nginx Reverse Proxy to Self — Nginx 反向代理回自身的設計模式
- Samba + Nginx 檔案分享服務(Kubernetes 部署) — Samba SMB 分享搭配 Nginx Web 瀏覽
- Caddy 靜態檔案伺服器 — 以 Caddy 替代 Nginx 的靜態服務,含 Prometheus metrics 與分層快取
來源
- KeyCDN — Nginx Directory Index — autoindex 設定參考
- nginx-fancyindex-flat-theme — 推薦 fancyindex 主題
- 原始素材:Nginx 檔案服務 Server 建立指南
- 原始素材:Nginx 靜態檔案伺服器(autoindex 目錄瀏覽)