노션을 통해 퍼블릭 페이지를 만들고, 구매한 도메인을 연결하는 방법에 대해 알아보겠습니다. 이 과정은 DNS 설정과 Cloudflare의 Worker 기능을 활용하여 진행됩니다.
도메인 구매 및 설정
도메인 구매
먼저, 원하는 도메인을 구매해야 합니다. 이 도메인은 나중에 노션 페이지와 연결됩니다.
Cloudflare 등록
구매한 도메인을 Cloudflare에 등록합니다. Cloudflare는 DNS 관리와 보안 기능을 제공하여 웹사이트의 성능을 향상시킵니다.
DNS 설정
Cloudflare 대시보드에서 DNS 관리 페이지로 이동합니다. 여기서 다음과 같은 설정을 추가합니다:
- 이름:
notion.customdomain.com(또는 루트 도메인을 사용할 경우customdomain.com) - 타입: A 또는 CNAME으로 설정
- 값: 노션 페이지의 IP 주소나 CNAME을 입력
이 후, 네임서버를 Cloudflare에서 제공하는 두 가지로 변경합니다. 이를 위해 도메인을 구매한 곳에서 기존 네임서버를 삭제하고 새로운 네임서버를 등록해야 합니다.
Cloudflare Worker 설정
Worker 생성
Cloudflare 대시보드에서 Workers 메뉴로 이동한 후, Manage Workers를 클릭합니다. 여기서 새 Worker를 생성하고 이름을 notion-worker로 설정합니다.
스크립트 작성
다음 코드를 Worker의 스크립트에 붙여넣습니다. 이 코드는 노션 페이지를 커스텀 도메인으로 라우팅하는 역할을 합니다.
“`javascript
const MY_DOMAIN = “커스텀 도메인”; // 여기에 커스텀 도메인을 입력하세요
const START_PAGE = “노션 퍼블릭 페이지 주소”; // 노션 퍼블릭 페이지 주소를 입력하세요
addEventListener(‘fetch’, event => {
event.respondWith(fetchAndApply(event.request));
});
const corsHeaders = {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Methods”: “GET, HEAD, POST, PUT, OPTIONS”,
“Access-Control-Allow-Headers”: “Content-Type”,
};
function handleOptions(request) {
if (request.headers.get(“Origin”) !== null &&
request.headers.get(“Access-Control-Request-Method”) !== null &&
request.headers.get(“Access-Control-Request-Headers”) !== null) {
return new Response(null, { headers: corsHeaders });
} else {
return new Response(null, { headers: { “Allow”: “GET, HEAD, POST, PUT, OPTIONS” } });
}
}
async function fetchAndApply(request) {
if (request.method === “OPTIONS”) {
return handleOptions(request);
}
let url = new URL(request.url);
let response;
if (url.pathname.startsWith(“/app”) && url.pathname.endsWith(“js”)) {
response = await fetch(https://www.notion.so${url.pathname});
let body = await response.text();
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
response.headers.set(‘Content-Type’, “application/x-javascript”);
} else if (url.pathname.startsWith(“/api”)) {
response = await fetch(https://www.notion.so${url.pathname}, {
body: request.body,
headers: {
‘content-type’: ‘application/json;charset=UTF-8’,
‘user-agent’: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (K, like Gecko) Chrome/73.0.3683.103 Safari/537.36’
},
method: “POST”,
});
response = new Response(response.body, response);
response.headers.set(‘Access-Control-Allow-Origin’, “*”);
} else if (url.pathname === /) {
let pageUrlList = START_PAGE.split(“/”);
let redirectUrl = https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]};
return Response.redirect(redirectUrl, 301);
} else {
response = await fetch(https://www.notion.so${url.pathname}${url.search}, {
body: request.body,
headers: request.headers,
method: request.method,
});
}
return response;
}
“`
이 스크립트는 커스텀 도메인으로 요청이 들어올 때, 노션의 API와 소스 코드를 적절히 변환하여 응답합니다.
Route 추가
스크립트를 저장한 후, Worker 메뉴로 돌아가서 Route를 추가합니다. 사용하려는 도메인 주소에 /*를 붙여 저장하면 설정이 완료됩니다.
추가 조언
스크립트를 적용한 후, 노션 페이지의 이미지가 로드되지 않는 문제가 발생할 수 있습니다. 이 경우, 추가적인 설정이나 수정이 필요할 수 있으며, 문제 해결을 위한 관련 자료를 참고하는 것이 좋습니다.
노션 퍼블릭 페이지를 커스텀 도메인으로 성공적으로 연결하면, 더 많은 방문자에게 접근성을 제공할 수 있습니다.