반응형
서비스 운영 중 특정 서버가 다운되거나 연결이 불가능한 상황일 때
Nginx Proxy Manager(이하 npm)를 통해 사용자에게 "서비스 점검 중" 안내 페이지를 보여주려고 한다.
이번 글에서는 502 오류 발생 시 점검 안내 페이지를 미리 만들어둔 HTML 페이지로 보여주는 방법을 정리합니다.
1. 준비: 점검 안내 페이지 HTML 만들기
NPM은 정적 파일을 직접 생성해주는 기능은 없으므로 점검 안내 페이지는 직접 HTML로 작성해 서버에 넣는다.
보통 NPM을 Docker로 배포했다면 다음과 같은 volumn 경로가 설정되어 있을 것이다.
volumes:
- ./data:/data
- ./letsencrypt:/etc/letsencrypt
이 구조를 기준으로 data/nginx/custom_html 폴더를 만들고 아래와 같이 HTML 파일을 추가한다.
<!-- ./data/nginx/custom_html/custom_502.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>서비스 점검 안내</title>
<style>
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f6fa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
.container {
max-width: 500px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: 8px;
}
h1 {
color: #e84118;
font-size: 28px;
margin-bottom: 16px;
}
p {
font-size: 16px;
line-height: 1.5;
}
.logo {
margin-bottom: 16px;
}
.logo img {
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<!-- 필요 시 로고 이미지 넣기 -->
<!-- <img src="/logo.png" alt="Service Logo"> -->
</div>
<h1>서비스 점검 중입니다</h1>
<p>
보다 나은 서비스를 제공하기 위해 <strong>시스템 점검</strong>을 진행
중입니다.<br />
점검 시간 동안 서비스 이용이 제한되오니 양해 부탁드립니다.
</p>
<p>
점검 예정 시간: <strong>2025년 4월 15일(화) 12:30 ~ 13:30</strong><br />
</p>
<p>감사합니다.</p>
</div>
</body>
</html>
2. 설정: Proxy Host에 커스텀 에러 페이지 적용하기
npm 관리자 페이지에 접속하여 Proxy Host → 호스트 편집 → Advanced 탭으로 이동한다.
그리고 다음의 내용을 Custom Nginx Configuration 영역에 입력한다.
502 외에도 503, 503 등 다른 오류 코드도 함께 지정할 수 있다. internal 지시어는 외부에서 직접 접근하지 못하게 하는 역할을 함.
error_page 502 /custom_502.html;
location = /custom_502.html {
root /data/nginx/custom_html;
internal;
}
결론
이제 해당 서버에 502 오류가 발생하면 사용자가 미리 만들어둔 점검 안내 페이지가 표시되는 것을 확인할 수 있다.
이 설정은 Proxy host 단위로 적용되므로 서버마다 다르게 적용하고 싶다면 각 호스트에서 동일하게 설정해주면 된다.
HTML을 자주 바꿀 일이 있다면, 별도의 정적 페이지 서버(nginx 등)를 두고 redirect 하는 방식도 고려해보면 되겠다.
반응형