개요
예전에 Cloudflare 가 아닌 다른 도메인 업체에 등록된 도메인을 사용할 때 도메인 파킹 서비스라는 명칭으로 사이트 점검 중임을 표시하기 위해 실제 소스 코드를 직접 수정하지 않고
도메인 관리 사이트에서 몇 번의 클릭 만으로 처리할 수 있는 기능을 사용한 적이 있다.
하지만 Cloudflare 의 경우 파킹 서비스와 비슷하게 구현된 기능은 없는 것 같다.
대신에 Worker 또는 Page 등 다른 기능을 활용해서 구현이 가능했고, 실제 구현했던 경험을 토대로 그 과정에 대해서 기록한다.
Cloudflare Worker 와 Page
자세한 비교는 공식 사이트(Welcome to Cloudflare | Cloudflare Docs)에 잘 나와 있으니 생략하고 간단하게 필요한 부분만 본다면
복잡한 기능이 필요한 경우는 Worker 를 생성해서 활용 하는게 기능적인 부분에서 훨씬 편리하다.
하지만, 지금 필요한 건 단순 서비스 점검중이라는 상황만 공지하는 단순 작업이라 Page 를 활용하기로 했다.
작년 12월에 사용했을 때와 지금 이 글을 작성하는 시점의 UI 도 조금 변경이 된 상태이다.
그래서, 보는 시점에 따라서 앞으로도 계속 바뀔거라 생각한다.(Worker 를 사용하게끔 UX 자체가 변경이 되었다.)
Cloudflare Page 추가
Page 개념
Worker 의 경우 스크립트까지 활용가능한 좀 더 고급 기능이라고 할 수 있고
Page 의 경우 직접 로컬에서 작성된 파일을 생성해서 압축파일 이나 폴더 단위로 업로드해서 생성할 수 있게 되어 있다.
업로드해서 배포를 하면 {사용자 지정}.pages.dev 형태의 도메인을 사용할 수 있다.
물론 이미 선점된 서브 도메인의 경우 임의 문자가 추가가 된다.
HTML 파일 생성
일단 사용자에게 표시할 페이지 디자인은 AI 의 도움을 받아 작성했다.
중요한 것은 반드시 index.html 파일로 생성해서 압축한 다음 업로드 해야 한다는 것이다
index.htm 까지는 허용이 될 지 모르겠지만, outofservice.html 로 생성해서 업로드 했다가
배포까지 다 했는데 실제 접속해 보면 페이지가 제대로 표시되지 않는다.
다음 코드를 복사해서 index.html 파일로 저장하자.
(미리 zip 파일로 압축해 두자)
물론 내용은 얼마든지 수정해도 상관이 없다.
번거로운 상황을 최대한 배제하기 위해 CDN 만 활용하면서 단일 파일로 생성하였다.
<!DOCTYPE html>
<html lang="ko" class="h-full">
<head>
<meta charset="UTF-8">
<title>서비스 점검 안내</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Glass 효과 */
.glass {
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(255, 255, 255, 0.22);
}
/* 다크모드 Glass */
@media (prefers-color-scheme: dark) {
.glass {
background: rgba(0, 0, 0, 0.35);
}
}
/* 부드러운 진입 애니메이션 */
.fade-in {
animation: fadein 0.8s ease-out;
}
@keyframes fadein {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="h-full bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-6">
<div class="glass fade-in rounded-3xl shadow-2xl max-w-lg w-full p-10 text-center">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
서비스 점검 중입니다
</h1>
<p class="text-lg text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
더 나은 서비스를 제공하기 위해
현재 시스템 점검을 진행하고 있습니다.
</p>
<p class="text-md text-gray-600 dark:text-gray-400">
잠시 후 다시 이용해 주세요.
</p>
<div class="mt-6 text-red-500 text-xl font-semibold animate-pulse">
● 점검 진행 중
</div>
</div>
</body>
</html>
브라우저 에서 실행해 보면 다음과 같이 표시가 된다.
Page 프로젝트 생성
브라우저를 실행해서 cloudflare.com 에 로그인을 한 다음 대쉬보드 에서 도메인 선택하기 전에 좌측 메뉴 중에 컴퓨팅 및 AI - Workers 및 Pages 를 클릭해서 해당 페이지로 이동한다.
도메인에 종속되는 기능이 아니라 도메인 선택 전 좌측 메뉴에서 찾을 수 있다.
Works 및 Page 우측 상단에 있는 응용 프로그램 생성 버튼을 클릭한다.
Worker 생성 화면이 나타나는데 여기서 하단에 있는 Looking to deploy Pages? 우측의 Get started 를 클릭한다.
Git 아닌 로컬에 있는 파일을 직접 업로드 할 것 이므로 해당 항목의 시작 버튼을 클릭한다.
프로젝트 이름을 다음과 같이 입력하면 하단에 도메인이 표시가 된다.
프로젝트 생성 버튼을 클릭한다.
앞에서 압축해 둔 파일을 탐색기에서 드래그 앤 드랍한다.
업로드가 완료되면 다음과 같은 표시가 된다.
사이트 배포 버튼을 클릭한다.
그러면 다음과 같이 프로젝트 생성 완료 화면이 표시가 된다.
프로젝트 계속을 클릭한다.
생성된 프로젝트의 속성을 탭 단위 구분해서 볼 수 있는 화면으로 전환이 되는데
여기서 도메인 우측의 새로 생성된 링크를 클릭한다.
그러면 다음과 같이 새 탭이 추가가 되면서 프로젝트가 제대로 동작하는지 확인할 수 있다.
도메인 파킹
지금 까지의 과정으로 시스템이 점검 중임을 표시하는 도메인은 확보가 된 상태이다.
보유 중인 도메인의 서브 도메인 1개만 적용하느냐 또는 Url 패턴에 따라 해당 도메인의 모든 레코드에 적용할 것 인지에 따라서 방법도 몇 가지가 있었다.
서브 도메인 1개에만 적용
특정 서브 도메인만 앞에서 생성한 도메인으로 redirect 해서 처리하는 경우에 사용하는 방법이다.
위에서 본 프로젝트 생성 화면의 사용자 설정 도메인 탭에서 레코드를 직접 지정하는 방법도 있다.
하지만 난 그냥 DNS 레코드 페이지에서 해당 레코드를 직접 수정해서 처리했다.
도메인의 DNS 레코드 관리 페이지를 좌측 화면에서 선택한다.
점검 중으로 표시할 서브 도메인을 지정헤서 대상 url 을 수정해 주면 된다.
forum.bannerit.net 으로 접속할 경우 outofservice.pages.dev 로 접속이 되게 처리한 것이다.
점검이 끝난 경우 다시 원래대로 수정하면 된다.
여러 도메인에 적용
여러 도메인에 적용할 경우에는 Page Rules 라는 기능을 활용한다.
Page Rules 장점
Page Rules 의 경우 다음과 같이 특징이 있다.
- url 패턴으로 지정이 가능하므로 다수의 도메인을 한번에 지정이 가능하다.
- 패턴을 여러 개 만들어 두고 항목 별로 (비)활성화 가 가능하다.
만들어 둔 규칙을 굳이 삭제하지 않고 사이트에 접속해서 Active 여부만 수정하면 바로 적용이 된다. - 단, 무료 버전의 경우 3개 까지 생성할 수 있다.
Page Rules 생성
좌측 상단에 메뉴를 검색할 수 있는 기능이 있다.
마우스로 클릭한다.
rules 라고 입력하면 다음과 같이 검색 결과에 규칙 > Page Rules 메뉴가 검색이 된다.
해당 메뉴를 클릭한다.
도메인 단위로 종속된 기능이라 도메인이 여러 개라면 해당 도메인을 선택해 준다.
그러면 다음과 같이 규칙 화면으로 이동이 된다
Page Rule 생성 버튼을 클릭한다.
다음과 같이 속성을 지정한 다음 저장 및 배포 버튼을 클릭한다.
- URL 항목에 url 패턴을 입력해 준다.
필요한 값으로 입력한다.
참고로 *.bannerit.net/* 으로 아래와 같이 입력한 경우 bannerit.net/* 은 제외 되므로 정확한 패턴을 확인해서 입력한다. - 설정 선택 을 전달 URL 로 지정한다.
- 상태 코드는 301, 302 중에 선택한다.
- 대상 URL 을 만들어 둔 페이지 url 로 입력한다.
그러면 다시 규칙 목록 페이지로 돌아오면서 추가된 규칙을 확인할 수 있다.
다음과 같이 Active 여부에 따라 해당 규칙이 (비)활성화가 된다.
