Profile picture

[Linux] Nginx FancyIndex를 사용하여 미러 페이지 예쁘게 정렬하는 방법?

JaehyoJJAng2024년 12월 17일

Nginx FancyIndex

Nginx에서는 특정 디렉토리 안에 있는 파일들을 자동으로 정렬해주는 기능이 있어요!

location / {
  autoindex on;
}

근데 autoindex는 너무 단조로워요 ..
Image


이러한 단조로움을 nginx-fancyindex를 사용해서 개선할 수가 있는데요!

nginx-fancyindex는 nginx에서 기본으로 제공하는 단순한 디렉토리 목록(파일 리스트)을 스타일리시하고 기능적으로 개선해주는 모듈이예요!


기본 디렉토리 인덱스는 위 사진처럼 매우 단조롭지만,

FancyIndex를 사용하면 HTML 테이블 형식에 스타일과 정렬 기능을 추가할 수 있어요.

예를 들어 파일 이름, 크기, 수정 날짜 등을 보기 좋게 표시할 수도 있구요,

또한 사용자가 html을 직접 커스텀해서 불러올 수도 있답니다!


nginx fancyindex 설치 방법

Nginx 자체는 모듈을 동적으로 추가하는 기능이 제한적이라,

FancyIndex를 사용하려면 Nginx를 소스에서 컴파일하거나, 이미 모듈이 포함된 패키지를 설치해야 합니다.


여기서는 Ubuntu/Debian 환경에서 작업한다고 가정하고 실습을 진행할게요!

OS에 따라 사용 명령어가 달라질 수 있으니 시스템에 맞게 조정해주세요.


패키지 매니저로 설치하기

Ubuntu/Debian 계열에서는 nginx-extras 패키지에 FancyIndex 모듈이 포함되어 있어 쉽게 설치할 수 있어요!


1. 기존 Nginx 확인 및 제거

  • 이미 nginx가 설치되어 있다면, FancyIndex가 포함된 버전으로 교체해야 해요.

현재 설치된 nginx 버전을 확인해보죠.

nginx -V | grep -i "fancyindex"

출력에 --with-http_fancyindex_module이 없으면 FancyIndex가 포함되지 않은 버전이에요.


2. nginx-extras 설치

sudo apt update
sudo apt install nginx-extras

설치 후 버전 확인!

nginx -V

--with-http_fancyindex_module이 포함되어 있다면 성공~


3. Nginx 재시작

sudo systemctl restart nginx

nginx 설정 파일에서 FancyIndex 적용하기

설치가 끝났으니 이제 nginx 설정 파일을 수정해서 FancyIndex를 활성화하고,

경로별로 다르게 적용하는 방법을 알아볼게요.

기본 설정 파일은 보통 /etc/nginx/nginx.conf 또는 /etc/nginx/conf.d/ 디렉토리에 있어요.


기본 FancyIndex 활성화

1. 설정 파일 열기

sudo nano /etc/nginx/conf.d/default.conf

2. 기본 디렉토리 설정

server 블록 안에 FancyIndex를 적용할 디렉토리를 지정해줘요.

server {
    listen 80;
    server_name your.domain.com;

    location /mirror {
        root /path/to/mirror/data;  # 미러 데이터가 있는 실제 경로
        autoindex on;              # 디렉토리 목록 활성화
        fancyindex on;             # FancyIndex 활성화
        fancyindex_exact_size off; # 파일 크기를 KB/MB로 표시
    }
}

3. 설정 테스트 및 적용

설정 문법 확인

sudo nginx -t

문제 없으면 재시작!

sudo systemctl restart nginx

4. 브라우저로 확인

http://<your.domain.com/mirror>로 접속하면 예쁜 디렉토리 목록이 표시돼요!
Image


경로별로 FancyIndex 적용하기

미러 서버에서 특정 경로에만 FancyIndex를 적용하거나,

경로마다 다르게 설정하고 싶을 수 있어요.

이때에는 location 블록을 활용하면 됩니다.

server {
    listen 80;
    server_name your.domain.com;

    # 기본 루트 경로 (FancyIndex 미적용)
    location / {
        root /var/www/html;
        autoindex on;  # 기본 디렉토리 목록만 사용
    }

    # 미러 데이터 경로 1 (FancyIndex 적용)
    location /mirror1 {
        root /path/to/mirror1;
        autoindex on;
        fancyindex on;
        fancyindex_exact_size off;  # 파일 크기 단위 변환
        fancyindex_header "/fancy-header.html";  # 커스텀 헤더 추가 (선택)
    }

    # 미러 데이터 경로 2 (FancyIndex + 다른 스타일)
    location /mirror2 {
        root /path/to/mirror2;
        autoindex on;
        fancyindex on;
        fancyindex_exact_size on;   # 정확한 바이트 단위로 표시
        fancyindex_footer "/fancy-footer.html";  # 커스텀 푸터 추가 (선택)
    }
}

커스텀 스타일 적용 (썬택)

  • FancyIndex의 기본 스타일은 심플하지만, 헤더/푸터 파일을 만들어 CSS로 꾸밀 수 있어요.
  • 예: /fancy-header.html 파일 생성
<style>
    table { border-collapse: collapse; }
    th, td { padding: 8px; border: 1px solid #ddd; }
    th { background-color: #f2f2f2; }
</style>

TIP!

  • 보안 주의: 디렉토리 목록을 공개하면 파일이 노출되니, 민감한 데이터가 있는 경로는 autoindex off;로 비활성화하세요.
  • 성능 최적화: 대용량 디렉토리의 경우 FancyIndex가 약간 느려질 수 있으니, 캐싱을 고려해 보세요.
  • 테마 사용: ngx-fancyindex GitHub에서 제공하는 테마를 다운로드해 더 멋진 디자인을 적용할 수도 있어요.
    Tag -
Loading script...