Notion 에 Custom Domain 사용하기

Hyunwoo Seo·2022년 9월 12일

information

Information

목록 보기

1/1

notion 에 포트폴리오를 작성하면서, 공유할 때 길고도 긴 웹 링크가 매우 마음에 들지 않았다.

notion 설정페이지에서 도메인을 설정하고, 보여줄 페이지를 선택해놓으면 해당 페이지만 보이면서 경로도 [설정 도메인].notion.site 정도로 이쁘게 줄어들긴 한다.

하지만 나는 github 학생 계정으로 받은 .me 도메인이 있었고, 당장 다른곳에 사용할 곳도 없어서 notion 에 사용하기로 했다.

다른 블로그에도 잘 나와있지만, 생각보다 잘 안되서 시간을 좀 썼다.

클라우드 플레어(https://www.cloudflare.com/ko-kr/) 에 회원가입을 하고 로그인 한다.
내가 가지고 있는 도메인을 클라우드플레어에 등록한다.
1. 페이지 우측 상단에 사이트 추가(add site) 를 눌러 도메인을 입력하고 추가 버튼을 누른다.
2. DNS 탭으로 가서 CNAME , www , 도메인 을 입력하고 저장한다.
3. 하위에 네임서버를 복사한다.

내가 구매한 도메인 DNS 관리페이지에서 네임서버를 추가하는 버튼을 찾아 복사한 네임서버를 붙여넣고, 기존에 있던 것을 지워준다. (github 에서 준 도메인은 www.namecheap.com 에서 설정했다)

클라우드플레어 페이지 좌측 탭들중 Workers 로 들어가 Workers 관리(Manage Workers) 를 눌러 새로운 Workers 를 생성한다.

좌측상단 Workers 의 이름을 notion-worker 로 변경한다.

스크립트 편집창에 아래 코드를 복붙한뒤, MY_DOMAIN 과 START_PAGE 를 알맞게 수정한다.

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
}

스크립트 수정을 마무리한 뒤 저장한다.

Workers 페이지에서 Add Route 버튼을 눌러 Route 와 Worker 항목을 입력한다.
1. Route 에는 사용자 지정 도메인을 입력한다.(/*도메인/*)
2. Worker 에는 아까 설정했던 notion-worker 를 선택한다.
세팅을 완료하면, 조금의 시간이 지난 후 내가 설정한 도메인으로 연결된 것을 확인할 수 있다.

Hyunwoo Seo

Notion 에 Custom Domain 사용하기

Information

0개의 댓글