NGINX에서 사용자 지정 404 오류 페이지를 만드는 방법
NGINX는 클라이언트의 요청을 처리하려고 시도할 때 오류가 발생할 때마다 오류를 반환합니다. 각 오류에는 HTTP 응답 코드와 간단한 설명이 포함됩니다. 오류는 일반적으로 간단한 기본 HTML 페이지를 통해 사용자에게 표시됩니다.
다행히도 NGINX를 구성하여 사이트 또는 웹 애플리케이션 사용자에게 사용자 지정 오류 페이지를 표시할 수 있습니다. 이것은 지정된 오류에 대해 표시될 URI를 정의하는 데 사용되는 NGINX의 error_page 지시문을 사용하여 달성할 수 있습니다. 또한 선택적으로 이를 사용하여 클라이언트에 전송된 응답 헤더의 HTTP 상태 코드를 수정할 수 있습니다.
이 가이드에서는 사용자 지정 오류 페이지를 사용하도록 NGINX를 구성하는 방법을 보여줍니다.
모든 NGINX 오류에 대한 단일 사용자 정의 페이지 생성
클라이언트에 반환하는 모든 오류에 대해 단일 사용자 지정 오류 페이지를 사용하도록 NGINX를 구성할 수 있습니다. 오류 페이지를 만드는 것으로 시작하십시오. 다음은 메시지를 표시하는 간단한 HTML 페이지의 예입니다.
“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.
샘플 HTML Nginx 사용자 정의 페이지 코드.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-error {
position: relative;
height: 200px;
margin: 0px auto 20px;
z-index: -1;
}
.notfound .notfound-error h1 {
font-family: 'Montserrat', sans-serif;
font-size: 200px;
font-weight: 300;
margin: 0px;
color: #211b19;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-error h1 {
font-size: 148px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-error {
height: 148px;
margin: 0px auto 10px;
}
.notfound .notfound-error h1 {
font-size: 120px;
font-weight: 200px;
}
.notfound .notfound-error h2 {
font-size: 30px;
}
.notfound a {
padding: 7px 15px;
font-size: 24px;
}
.h2 {
font-size: 148px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<h1>Sorry the page can't be loaded!</a></h1>
<div class="notfound-error">
<p>Contact the site's administrator or support for assistance.</p>
</div>
</div>
</div>
</body>
</html>
error-page.html과 같은 적절한 이름으로 파일을 저장하고 닫습니다.
그런 다음 파일을 문서 루트 디렉터리(/var/www/html/)로 이동합니다. 디렉토리가 존재하지 않으면 다음과 같이 mkdir 명령을 사용하여 생성할 수 있습니다.
$ sudo mkdir -p /var/www/html/ $ sudo cp error-page.html /var/www/html/
그런 다음 error_page 지시문을 사용하여 사용자 지정 오류 페이지를 사용하도록 NGINX를 구성합니다. 표시된 대로 /etc/nginx/snippets/ 아래에 custom-error-page.conf라는 구성 파일을 만듭니다.
$ sudo mkdir /etc/nginx/snippets/ $ sudo vim /etc/nginx/snippets/custom-error-page.conf
다음 줄을 추가하십시오.
error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}
이 구성은 NGINX가 지정된 HTTP 오류 404, 403, 500 및 503을 만날 때마다 URI/error-page.html로 내부 리디렉션을 발생시킵니다. 위치 컨텍스트는 NGINX에 오류 페이지를 찾을 위치를 알려줍니다.
파일을 저장하고 닫습니다.
이제 모든 서버 블록이 /etc/nginx/nginx.conf 파일에서 오류 페이지를 사용하도록 http 컨텍스트에 파일을 포함합니다.
$ sudo vim /etc/nginx/nginx.conf
포함 디렉토리는 NGINX에 지정된 .conf 파일에 구성을 포함하도록 지시합니다.
include snippets/custom-error-page.conf;
또는 /etc/nginx/conf.d/mywebsite.conf와 같이 특정 서버 블록(일반적으로 vhost라고 함)에 대한 파일을 포함할 수 있습니다. 서버 {} 컨텍스트에 위의 include 지시문을 추가합니다.
NGINX 구성 파일을 저장하고 다음과 같이 서비스를 다시 로드합니다.
$ sudo systemctl reload nginx.service
설정이 제대로 작동하는지 브라우저에서 테스트하십시오.
각 NGINX 오류에 대해 다른 사용자 정의 페이지 만들기
NGINX의 각 HTTP 오류에 대해 다른 사용자 정의 오류 페이지를 설정할 수도 있습니다. Denys Vitali가 Github에서 만든 사용자 지정 nginx 오류 페이지 모음을 발견했습니다.
서버에 리포지토리를 설정하려면 다음 명령을 실행합니다.
$ sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default $ sudo mkdir /etc/nginx/snippets/ $ sudo ln -s /srv/http/default/snippets/error_pages.conf /etc/nginx/snippets/error_pages.conf $ sudo ln -s /srv/http/default/snippets/error_pages_content.conf /etc/nginx/snippets/error_pages_content.conf
다음으로 http 컨텍스트 또는 각 서버 블록/가상 호스트에 다음 구성을 추가합니다.
include snippets/error_pages.conf;
NGINX 구성 파일을 저장하고 다음과 같이 서비스를 다시 로드합니다.
$ sudo systemctl reload nginx.service
또한 구성이 의도한 대로 작동하는지 브라우저에서 테스트하십시오. 이 예에서는 404 오류 페이지를 테스트했습니다.
이것이 이 가이드에서 제공한 모든 것입니다. NGINX의 error_page 지시문을 사용하면 오류가 발생할 때 정의된 페이지나 리소스 또는 URL로 사용자를 리디렉션할 수 있습니다. 또한 선택적으로 클라이언트에 대한 응답에서 HTTP 상태 코드를 수정할 수 있습니다. 자세한 내용은 nginx 오류 페이지 설명서를 참조하세요.