<서비스 배포 주소 : notion.over.ist, 과거에 작성한 글로, 본문에 나오는 blog.over.ist는 본문의 서비스로 라우팅되지 않음.>
overist notion-blog
Tech and Insight
notion.over.ist
Cloudflare Workers DNS 오류
Fruitionsite라는 오픈소스를 Cloudflare Workers로 배포하였으나, 지난 Vercel app 배포때의 오류처럼 포워딩이 정상적으로 안되는 현상이 일어났다.
🤩 다행히 이번엔 에러코드라도 줘서 다행이다.
서비스 소개
Fruitionsite는 노션 페이지 공유시 툴킷, URL, CSS, JS를 커스텀하여 적용할 수 있는 서비스다.
첫 화면부터 기존의 지저분한 노션 툴킷이 사라진 모습을 볼 수 있다.
서비스 로직
1. Couldflare Workers에서 Notion 페이지 정보를 그대로 가져오고,
2. 페이지 하단에 추가 HTML요소들을 append 하는 방식으로 작동한다.
가이드 문서 적용
- Flexible SSL 적용 ERROR
- A Record 1.1.1.1(Cloudflare) 적용 ERROR
- CNAME RECORD 1.1.1.1(Cloudflare) 적용 ERROR
- Workers의 접속 경로를 커스텀 도메인의 CNAME 적용(blog.over.ist) OK
가이드를 모두 따라했는데, Cloudflare Worker 생성부터 오류가 났다.
문제 해결 과정
1. Preview) Mismatch between origin and baseUrl (dev)
다행히 오픈소스 서비스라서, 이슈와 Pull Requests를 먼저 찾아보았고, 이미 솔루션들이 존재했다.
1️⃣ Workers API에 하드코딩된 URL의 경로가 Preview 앱의 URL과 달라서 발생하는 경로 문제
https://github.com/stephenou/fruitionsite/pull/140
Dynamically set domainBaseURL by benfoxall · Pull Request #140 · stephenou/fruitionsite
This changes the injected config to be set from the window.location instead of being hardcoded. I think this could resolve config issues like #122 and #137. This also means that it'll work on *.wor...
github.com
2️⃣ 노션 설정에서 유저네임을 등록하여 서브도메인(username.notion.site)을 할당받은 유저에게 발생하는 이슈.
1. 유저네임이 있는 유저의 노션페이지는 notion.so/{pageid} 에서 페이지 내용을 하나도 가져오지 않고,
2. username.notion.site/{pageid} 으로 다시 접속해달라는 implement 페이지를 출력하게된다.
3. Frutionsite에서는 이 경우에 데이터 Fetching 경로를 수정하는 예외처리가 존재하지 않았다.
https://github.com/stephenou/fruitionsite/pull/101
fix : new notion subdomain from www.notion.so/user to user.notion.site by yubinees2 · Pull Request #101 · stephenou/fruitionsi
Notion moved its share page from www.notion.so/user to user.notion.site.
github.com
😡 왜 머지 안해!!!
2. Cloudflare Error 1034
Cloudflare 공식 트러블슈팅 문서를 보면, Fruitionsite 가이드에 나와있는 1.1.1.1 포워딩이 문제라고 한다.
일반적인 원인 이제 이전에 도메인이 1.1.1.1을 가리키도록 했던 고객에게는 1034 오류가 발생합니다. 이는 구성 오류 및/또는 남용 가능성을 방지하기 위한 Cloudflare 시스템의 새로운 에지 유효성 검사 기능으로 인한 것입니다.
문제 해결 DNS 레코드가 귀사의 통제 하에 있는 IP 주소를 가리키도록 하고, "원본 없는" 설정을 위해 플레이스홀더 IP 주소가 필요한 경우에는 IPv6 예약 주소 100:: 또는 IPv4 예약 주소 192.0.2.0을 이용하시기 바랍니다.
한글 자동번역이 알아듣기 어려운데, 영문 원어를 해석하면 192.0.2.0은 공공망에서 쓸 수 없는 originless 주소인데, A레코드로 1.1.1.1을 쓸 거면 차라리 아무것도 안 가리키는 주소를 쓰라고 한다.
Solution : 1.1.1.1 말고 다른거 써라.
Vercel에서는 커스텀 도메인을 설정할 때, 내 도메인의 A, CNAME 레코드에 Vercel의 Gateway 주소를 포워딩해주면 HTTP 헤더의 Host 정보에 따라 개인 앱으로 라우팅을 해줬었다. 마치 아파치 서버의 가상호스트처럼.
Cloudflare Workers도 옛날에는 그런 식으로 운영했었다가 바꾼 듯 하다(?)
3. DNS_PROBE_FINISHED_NXDOMAIN
Cloudflare 내부 설정으로 인해 IP정보 응답이 안되는 오류
Cloudflare with Vercel 트러블슈팅 문서에서처럼, Stricted-Full SSL mode 적용하여 해결.
Enhancement
Try) 문제의 A레코드(1.1.1.1)를 아예 지워버려도 되나?
Result) 성공적
내 네트워크 상식에서도 CNAME만 바치면 되는게 당연한걸 이미 알고있었는데, 무지성으로 공식 가이드설정을 너무 신뢰하다가 삽질을 더 한 케이스였다.
오픈소스는 가이드, Issue, Pull Requests는 무조건 함께가는 문서라고 봐야겠다. 배포 후 의존 환경의 변화에 따라 오류도 잦고, 그걸 해결하려는 사람들도 많다.
이 블로그는 만들고나니 생각보다 너무 별로여서 없애기로 했다.