5분 안에 NGINX상에 사용자 정의 오류 페이지 설정

웹 사이트를 운영하다 보면, 사용자가 존재하지 않는 페이지나 서버 오류로 인해 특정 오류 코드를 마주할 수 있다. 이런 경우, 사용자에게 친숙한 오류 페이지를 제공하는 것이 중요한다. 이 글에서는 NGINX에서 github에 공유된 custom error page를 사용하여 사용자 정의 오류 페이지를 설정하는 방법을 알아보겠다.

1. 오류 페이지 clone

먼저, GitHub에서 원하는 오류 페이지를 복제한다.

git clone https://github.com/shiftpsh/error-codes-motion-graphic.git

2. HTML 파일 내 경로 변경

복제한 오류 페이지 HTML 파일 내에서 일부 경로를 변경해야 한다. 특히, 아래 표에 나타난 패턴을 찾아 변경해야 한다.

이렇게 변경하면 NGINX 설정과 일치하는 경로로 리소스를 로드할 수 있다.

3. NGINX 설정

NGINX 설정 파일을 열어 사용자 정의 오류 페이지를 설정한다.

server {
    listen 80;
    server_name mylogin.example.com;

    error_page 403 404 500 502 503 504 /errors/$status.html;

    location /errors/ {
        alias /var/www/errors/;
    }

    location / {
        proxy_pass http://localhost:7700;
        proxy_intercept_errors on;
    }
}

4. 오류 페이지 전역 설정 (선택사항)

전역 설정을 통해 모든 서버 블록에 동일한 오류 페이지 설정을 적용할 수 있다.

http {
    error_page 403 404 500 502 503 504 /errors/$status.html;
}

5. NGINX 재시작

설정을 완료한 후, NGINX를 재시작한다.

sudo systemctl restart nginx

결론

이제 NGINX에서 shiftpsh의 error-codes-motion-graphic 리포지토리를 사용하여 멋진 사용자 정의 오류 페이지를 설정하였다. 특정 오류 코드를 마주칠 경우, 사용자에게 친숙하고 이해하기 쉬운 오류 페이지를 제공하게 되어, 전반적인 사용자 경험을 향상시킬 수 있다.