[AWS] Cloudfront | "서비스 점검 중" 페이지 전환 만들기

Amazon Web Service

[AWS] Cloudfront | "서비스 점검 중" 페이지 전환 만들기

인프라보이 2020. 4. 13. 21:33

사이트에 접속했을 때, 서버 점검 중 페이지는 간혹 보는 경우가 있습니다.

DB 이관, PM 작업 등으로 일시적인 서비스 향상을 위한 유지보수를 진행할 때, 우리는 점검 페이지를 띄우기도 합니다.

서비스 점검 시 사용자 유입을 차단하기 위하여, 사이트를 폐쇄하고 정해진 작업 후 다시 사이트를 "OPEN" 해야 하는데 보통은 WEB서버에서 점검 페이지를 REDIRECT 하는데, AWS Cloudfront를 활용하여 점검 페이지로 전환을 쉽게 할 수 있습니다. (WEB서버가 여러 개일 때, 모든 WEB서버를 수정할 수도 있고 DNS를 변경하는 방법도 있고 여러 가지가 있음.) 서비스가 변경이 되었으니 Cloudfront CDN을 통한 Cache무효화도 진행해야 하며, 이 방법이 전환 내용을 좀 더 빠르고 정확하게 알 수 있는 방법입니다.

필요한건, HTML 파일과 "점검 중입니다" 같은 이미지 파일(jpg, png 등)이 있으면 설정할 수 있습니다.

HTML에는 외부(S3같은)이미지 파일을 불러오는 구성도 가능하며, S3버킷에 이미지와 HTML 문서를 같이 업로드해두어도 됩니다.

그럼 방법을 설명하겠습니다.

[사전 준비 사항]

사전 준비는 "서비스 점검중"으로 변경하기 전, 그러니까 본격적인 작업 전에 수행을 하여야 합니다.

(1) S3 Bucket을 새로 만듭니다.

(2) 버킷 속성의 "정적 웹 사이트 호스팅"에서 HTML 파일 명(index_pc.html)을 입력 후 저장

(3) S3 버킷 권한의 "버킷 정책"에 아래 코드 입력 후 저장

# S3 Bucket을 퍼블릭 접근이 가능하게 설정해주는 정책
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::maintenance/*"
        }
    ]
}

(4) 우선 2개의 파일을 준비합니다. (index.html과 stop.png )

- index.html

# <img src="URL/stop.png"> 부분만 수정해주세요

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>점검안내 - 사이트 점검중</title>
<link rel="shortcut icon" href="/assets/images/fa_icon.ico">
<style type="text/css">
	.error_wrap{text-align:center;overflow:hidden;padding:14vh 15px 0;box-sizing:border-box;}
</style>

</head>
<body>
	<!-- wrap -->
	<div id="wrap">

		<!-- container -->
		<div id="container">
			<div id="content" class="content">
				<!-- error_wrap -->
				<div class="error_wrap">
					<img src="점검중 이미지 경로URL/stop.png">
				</div>
				<!-- //error_wrap -->
			</div>
		</div>
		<!-- //container -->

	</div>
	<!-- //wrap -->
</body>
</html>

- stop.png (이미지 사이즈도 고려하셔야 합니다)