우피, Super 대신 도메인 직접 연결하기
조금의 돈만 내면 자동으로 사이트를 만들어준다니 사용해왔던 우피가 거지 대학생인 나에게 부담스럽게 다가오기 시작했다!
과금하면서까지 사용해왔던 이유들은 다음과 같다.
- 크롬 확장 프로그램인 tailored notion은 나에게만 보이기에.. 예쁜 UI를 타인도 봤으면 좋겠어서
- 도메인 연결이 처음이였던 당시 나에게 쉬워보이는 접근법
- 기존 노션의 도메인 연결(10달러짜리)
- 그 돈을 지불할 바에는, 다시 우피로 돌아간다는 생각
따라서 어차피 도메인도 샀겠다.. 연결만 하면 되는 것 아닌가? (hosting.kr에서 구매했다) CloudFlare를 이용하여 도전해보았다
- 도메인 & 노션 페이지 확보 - 가비아에서 구매하는 것이 실제로 더 편했다
- 노션 페이지를 공유 페이지로 (웹에서 공유)
- 클라우드 플레어 가입하기
- 설정할 도메인 입력하기 - 루트 도메인 형태로(yoonicode.blog)
- 무료 플랜
- DNS → Add record: Type에 CNAME
- → Name에 @(루트도메인) or 서브도메인 입력
- IPv4 addy에 notion.so 입력후 세이브
- 해당 도메인의 DNS를 클라우드 플레어 네임 서버로 변경하기 - hosting.kr 들어가서 네임서버 변경해주었다 (구입 업체에 따라 변할 수 있음)
error code : 999 트러블 슈팅
기존 oopy로 프록시되던걸 자동으로 찾아줘서 삭제해주고, 이후 네임서버를 등록한 후 기다리면 된다.
- workers 설정
- worker 생성 후 이름 변경 - notion으로 함
-
스크립트 코드 수정 Untitled
<summary>or 쓸 수 있는 코드</summary>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.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 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, // must match 'Content-Type' header headers: request.headers, method: request.method, // *GET, POST, PUT, DELETE, etc. }); } return response; }</details>
- step2에 원하는대로 작성한 후, 코드 전체 수정 1. workers - 경로 추가
- 도메인/* → notion(worker)
위 방식대로 진행한다면 도메인 연결이 된 모습을 확인할 수 있다!
댓글