[Notion] 노션 공개 페이지에 도메인 연결하기
노션에서 작성한 모든 페이지는 공개 링크를 만들어 다른 사람에게 공유하거나 검색 엔진에 노출시킬 수 있다. 노션에 가입하지 않아도 누구나 방문할 수 있다는 말이다. 언제가 될진 모르겠지만 노션도 '커스텀 도메인' 기능을 지원할 예정이라고 했었다. 그럼 자신이 보유한 도메인을 노션 공개 페이지에 연동할 수 있기 때문에 콘텐츠 배포 공간으로 활용하기 더 좋아진다. 아쉽게도 도메인 연동 기능을 언제 지원할지는 아직 미지수다. 현재로선 모바일 앱 사용성 개선이 가장 시급해 보인다.
오늘은 자신이 보유하고 있는 도메인을 노션 페이지에 연동하는 방법을 소개하고자 한다. Cloudflare의 Web Worker를 활용하여 HTTP 요청을 수동으로 변경해주면 자신의 도메인으로도 Notion의 공개 페이지에 접속할 수 있다. 복잡해 보이지만 차근차근 따라 해 보면 정말 간단하다.
1. 노션 페이지 공개 설정
➊ 먼저 외부에 공유하고 싶은 노션 페이지를 공개 접근(Public Access) 상태로 만들어야 한다. 노션 페이지 우측 상단 Share 버튼 클릭 → Public Access 옵션에 체크하자. 검색엔진에도 노출하고 싶다면 Allow Search Engines에 체크하면 된다. 완료했다면 바로 아래 있는 Copy Page Link를 클릭한다.
➋ 그럼 아래 같은 공개 링크가 생성된다. 복사해두자.
https://www.notion.so/romantech/e6badd990a774dabac02284d704529c0
2. Cloudflare에 도메인 추가, DNS records 입력
➊ Cloudflare 대시보드 접속 → +Add a Site 버튼을 클릭하여 자신의 도메인을 추가한다. (domain.com 형식)
➋ 요금제는 Free Plan을 선택한다.
➌ DNS records 입력 창에선 아래처럼 추가해준다. Name은 도메인 앞에 들어가는 별칭으로 원하는 단어를 입력하면 된다. 만약 domain.com 이 본인 소유의 도메인이고, nt.domain.com 서브 도메인을 노션 공개 페이지로 연결하고 싶다면 nt 별칭을 추가하면 된다.
- Type : CNAME
- Name : nt (도메인 별칭 임의 입력)
- Target : notion.so
3. 네임서버 변경
➊ Cloudflare는 도메인마다 부여한 네임서버가 모두 다르므로 자신의 네임서버부터 확인해야 한다. Cloudflare 대시보드 → 등록한 도메인 클릭 → 상단 파란색 메뉴 중 DNS 클릭 → DNS 관리자 페이지 하단을 보면 Cloudflare nameservers에 나와있다.
➋ 이제 자신이 구입한 도메인(호스팅) 사이트로 가서 네임서버를 변경해주자. Hosting.kr 기준 [도메인] → [정보 변경] → [네임서버 주소 변경]에서 설정할 수 있다.
➌ 네임서버를 변경하면 기존 등록했던 네임서버 설정이 모두 지워지므로 Cloudflare에서 다시 등록해야 한다. 더 자세한 네임서버 변경 내용은 링크를 참고하면 된다.
4. Web Workers 세팅
➊ 이제 CloudFlare의 Web Workers를 이용해 앞서 추가한 서브도메인의 HTTP 요청을 자동 변환하는 세팅을 해야 한다. 대시보드 상단에 있는 Worker 아이콘을 클릭한 뒤 하단 Manage Workers 버튼을 클릭한다.
➋ Workers 관리 사이트에서 Create a Worker 버튼을 눌러 새로운 Workers를 생성한다.
➌ 좌측 상단을 클릭한 후 Workers 이름을 notion-worker로 변경한다.
➍ 스크립트 편집창에 아래 코드를 복사하여 붙여 넣는다 (2020.10.04 코드 수정)
const MY_DOMAIN = "도메인 URL"
const START_PAGE = "노션 공개 페이지 URL"
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) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
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()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
// response = new Response(response.body, response)
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}
} else if ((url.pathname.startsWith("/api"))) {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`
return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}${url.search}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
}
return response
}
➎ 붙여 넣은 스크립트의 1행, 2행을 아래처럼 수정한다. (중요!)
- 1행(첫 번째 줄) : const MY_DOMAIN = "서브 도메인 주소" (노션 페이지로 연결시킬 별칭 도메인)
예시) const MY_DOMAIN = "nt.colorfilter.me"
- 2행(두 번째 줄) : const START_PAGE = "노션 공개 페이지 주소" (1번에서 복사했던 노션 Public 페이지 링크)
예시) const START_PAGE = "https://www.notion.so/romantech/e6badd990a774dabac02284d704529c0"
➏ 스크립트 코드 추가/수정을 완료됐다면 Save and Deploy 버튼을 눌러 저장한 후 다시 Workers 페이지로 돌아간다.
➐ Workers 페이지에서 Add Route 버튼을 눌러 Route와 Worker 항목을 각각 아래처럼 입력한다.
- Route : 사용자 지정 도메인 뒤에 /* 와일드카드 문자 추가(해당 도메인의 모든 하위 콘텐츠는 Web Worker로 액세스)
예시) nt.colorfilter.me/*
- Worker : Launch Editor에서 세팅한 notion-worker 선택
마치며
여기까지 기본적인 세팅을 완료했다. 이제 앞서 설정한 서브도메인 주소를 입력하여 외부에 공개한 Notion 페이지로 접속할 수 있다. 이 방식은 CloudFlare의 Edge Computing 기능을 활용, Notion 공개 페이지로 액세스 하는 HTTP 요청 패킷의 Host를 수정하는 방법으로 구현한 것이다. CloudFlare의 우수한 CDN 성능 때문인지 도메인으로 접속한 노션 페이지 속도가 더 빠른 느낌이다.
포스팅 업데이트 : 2020.10.04 - 이미지 로드 불가 부분 코드 수정
'⌚️ Productivity' 카테고리의 다른 글
Apple 애플의 온라인 박물관 — The Apple Archive (4) | 2020.02.11 |
---|---|
[Notion] 노션으로 앱, 소프트웨어 구독 관리하기 (17) | 2020.02.05 |
[Notion] 노션 공개 페이지에 도메인 연결하기 (43) | 2020.01.28 |
한국에서 무료로 중국 문자, 전화 받기 — JegoTrip (无忧行) (7) | 2020.01.07 |
할일 관리 서비스 Todoist 1년 6개월 동안 프리미엄 기능 사용하기 (3) | 2018.01.28 |
하나의 이메일 계정으로 복수의 앱스토어 계정 만들기 (4) | 2016.03.05 |
댓글
이 글 공유하기
다른 글
-
Apple 애플의 온라인 박물관 — The Apple Archive
Apple 애플의 온라인 박물관 — The Apple Archive
2020.02.11 -
[Notion] 노션으로 앱, 소프트웨어 구독 관리하기
[Notion] 노션으로 앱, 소프트웨어 구독 관리하기
2020.02.05 -
한국에서 무료로 중국 문자, 전화 받기 — JegoTrip (无忧行)
한국에서 무료로 중국 문자, 전화 받기 — JegoTrip (无忧行)
2020.01.07 -
할일 관리 서비스 Todoist 1년 6개월 동안 프리미엄 기능 사용하기
할일 관리 서비스 Todoist 1년 6개월 동안 프리미엄 기능 사용하기
2018.01.28
코드 복사가 가능하도록 지원 좀 부탁드립니다.
도메인으로 들어가면 더 느린데 .. 왜 그럴까요 ㅠㅠ
cloudflare DNS에서
A few more steps are required to complete your setup.
Add an A, AAAA, or CNAME record for www so that xxx will resolve.
Add an A, AAAA, or CNAME record for your root domain so that xxx will resolve.
Add an MX record for your root domain so that mail can reach @xxx addresses.
xxx는 제 도메인 주소입니다.
적용을 해서 연동을 했는데, 이미지만 로드가 안되네요 ㅠㅠ
훌륭한 정보 제공해 주셔서 진심으로 감사드립니다~
너무 좋은 정보 감사합니다 !
자주자주 놀러올게요 !
덕분에 노션 페이지를 도메인에 등록 잘 했습니다. 감사합니다!
비밀댓글입니다
감사합니다 이 글 덕분에 무사히 마쳤네요! 친절한 설명 감사드려요.
우와 감사합니다! 덕분에 도메인 연결시켰어요!
질문이 하나 있습니다,
저는 Workers 관리/계정 추가 시 주소에 www.를 넣느냐 마느냐에 따라
접근 가능한 사이트의 www. 유무가 달라지는데요.
혹시 www.가 있고 없고와 관계없이 모두 다 연결되게 하고 싶으면 어떻게 해야할까요?
와, 정말 감사합니다. 덕분에 도메인 잘 연결시켰습니다.
와 잘 작동합니다!
감사합니다🙂🏅
감사합니다. 잘 읽었습니다!
혹시 일반 홈페이지에 iframe 태그로 노션 링크를 연결해서 띄울 수는 없을까요?
안녕하세요! 글 읽고 그대로 따라해봤는데 연결이 잘 안되네요 ㅠㅠ
제 노션 페이지에서 생성된 공유 링크는 '닉네임/notion..site/'로 시작해서, cloudflare 상에서 DNS랑 worker에 사용되는 코드에 'notion..so'를 전부 제 링크처럼 대체해봐도 연결이 잘 안되구요...
공유 링크가 저처럼 나오시는 분은 아무도 안계신가요?
안녕하세요! 좋은 글 감사드립니다.
이 글 덕에 도메인 연결을 쉽게 할 수 있었습니다.
그런데 21.07.14 노션 업데이트 이후에 2020.10.04일 수정해주신 코드로는 바로 연결이 안되고 {노션 도메인}.notion.site/~ 형식으로 외부연결로 가게 됐습니다.
자바 알못이라 한번 확인해주시고 가능하시다면 코드 수정 부탁드립니다 ㅠㅠ
안녕하세요! 선생님 포스트 덕분에 잘 따라했습니다 감사합니다
근데 모든 설정을 끝마치고 아무런 오류가 없는데도 연결이 안되네요ㅜ
제 생각엔 밑에 댓글 남겨주신 분들처럼 공유 페이지 주소 형식이 바뀐게 원인이 아닐까 싶은데
어떻게 해야 좋을까요..? 혹시 아시면 도와주시면 정말 감사하겠습니다 ㅠ
노션에 자유 댓글 다는 이 기능은 어떻게 하는지 혹시 관련 정보 링크도 알려주실 수 있나요?
잘 되던게 Mismatch between origin and baseUrl (dev). 가 뜨는데 이유를 알 수 있을까요?
Mismatch between origin and baseUrl (dev) 이 갑자기 뜨는데 도메인이 기한이 지낫나 해서 봣는데 도메인기한은 아직 안지낫고 도통 어떻게 수정해야될지 모르겠네요;;
안녕하세요! Cloudflare에 도메인을 입력했을 때 This web property is temporarily restricted from being added to Cloudflare at this time. Please try again later, or contact Cloudflare Support with any questions. 이라고 나오는데 ㅠㅠ 어떻게 해야 할지 모르겠네요