웹사이트 검색

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. 위치 컨텍스트는 NGINX에 오류 페이지를 찾을 수 있는 위치를 알려줍니다.

파일을 저장하고 닫습니다.

이제 모든 서버 블록이 /etc/nginx/nginx.conf 파일에서 오류 페이지를 사용하도록 http 컨텍스트에 파일을 포함시킵니다.

sudo vim /etc/nginx/nginx.conf

include 디렉토리는 NGINX에게 지정된 .conf 파일에 구성을 포함하도록 지시합니다.

include snippets/custom-error-page.conf;

또는 특정 서버 블록(일반적으로 가상 호스트라고 함)에 대한 파일을 포함할 수 있습니다(예: /etc/nginx/conf.d/mywebsite). conf. 서버 {} 컨텍스트에 위의 include 지시문을 추가합니다.

NGINX 구성 파일을 저장하고 다음과 같이 서비스를 다시 로드합니다.

sudo systemctl reload nginx.service

그리고 설정이 제대로 작동하는지 브라우저에서 테스트해 보세요.

각 NGINX 오류에 대해 서로 다른 사용자 정의 페이지 만들기

NGINX의 각 HTTP 오류에 대해 서로 다른 사용자 정의 오류 페이지를 설정할 수도 있습니다. 우리는 Github에서 Denys Vitali가 만든 훌륭한 맞춤 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 오류 페이지 설명서를 읽어보세요.