[노마드코더]cloudflare workers로 노션을 Database로 써보자!

우선 이 글은 노마드코더의 노션 api 관련 동영상을 따라하다가, cloudflare workers에서 막혀서 답답했던 제가 싫어 작성하였음을 알려드립니다! 혹시 저와 같은 고민을 하셨던 분들이 있으셨다면 참고하시면 좋을 것 같아요! 🙏

https://youtu.be/XCAwSBdeejU
위 동영상을 보면 니꼬선생님께서 정말 친절하게 next.js에서 데이터를 프론트에 예쁘게 뿌리는 코드, notion api를 사용하는 법, cloudflare workers에 들어갈 코드를 설명해주셨음을 알 수 있습니다.

하지만 cloudflare workers에 들어가는 코드를 그대로 작성하면 안되실거에요.
어떻게 해결했는지 지금부터 설명드리겠습니다.

cloudflare 회원가입

오른쪽은 클라우드 플레어 워커스 url입니다. https://workers.cloudflare.com/
들어가서 start building을 누르시면

아래와 같이 로그인페이지로 넘어가는데, 아이디가 있으시면 로그인 없으시면 회원가입을 해주세요!

그럼 아래와 같이 서비스를 선택할 수 있도록 3개의 카드 UI가 보입니다.
여기서 저희는 workers로 서버리스 앱을 만들거니까 맨오른쪽 카드의 시작 버튼을 눌러주세요.

그럼 아래와 같이 하위 도메인 설정이 나오는데,
저는 workers에서 제공해주는 기본 도메인을 사용할거니까 바로 설정을 눌렀어요!

그럼 이렇게 요금제를 선택하라고 하는데, 저희는 돈이 없으니 무료로 계속하기 버튼 누르시죠!

그럼 아래와 같이 이메일 인증을 하라는 화면이 나옵니다.

가입하셨던 이메일로 들어가 인증 링크를 누르면 짠! 이렇게 인증이 완료되었습니다.

그리고 나서 continue to the dashboard를 누르셔서 왼쪽 메뉴에서 workers를 클릭하면

위 화면을 보실 수 있으세요. 여기서 create a service 바로 클릭!

그럼 어떤 template을 사용할 것인지 묻는데, 저는 친숙한 hello world가 있는 HTTP handler를 선택하고 create service 했어요!

그럼 바로 생성되는 것을 알 수 있으세요 그리고 바로 quick edit을 눌러서 코드를 수정해보죠!

그럼 위와 같은 화면은 만나시는데 왼쪽 코드에디터에 아래 코드를 넣어주세요! Save and Deploy 버튼 꼭 눌러주세요!

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

  if(request.method === 'GET') {
    const data = await (
      await fetch(
        'https://api.notion.com/v1/databases/write_yours/query', 
        //위 10번째 라인에서 write_yours는 여러분의 것을 작성하세요 
        {
          headers: {
            Authorization: 'Bearer your_secret',
        //위 14번째 라인에서 your_secret은 여러분의 것을 작성하세요
            "Notion-Version": "2022-06-28",
          },
          method: "POST",
        }
      )
    ).json();
    return new Response(JSON.stringify(data), {
      headers: {
        "content-type" : "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
        "Access-Control-Max-Age": "86400",
      },
    });
  }else if(request.method === 'POST'){
      const json = await request.json()
      const data = await fetch(
        'https://api.notion.com/v1/pages', 
        {
          headers: {
            Authorization: 'Bearer your_secret',
            //위 36번째 라인에서 your_secret은 여러분의 것을 작성하세요
            "Notion-Version": "2022-06-28",
            "Content-Type": "application/json"
          },
          method: "POST",
          body: JSON.stringify({
            parent: {
              database_id: "your_database_id"
              //위 44번째 라인에서 your_database_id은 여러분의 것을 작성하세요
            },
            properties: {
              Address: {
                rich_text: [
                  {
                    text: {
                      content: json.address,
                    },
                  },
                ],
              },
              link: {
                url: json.url,
              },
              Name: {
                title: [
                  {
                    text: {content: json.name}
                  }
                ]
              }
            }
          })
        }
      )
      return new Response(JSON.stringify(data), {
      headers: {
        "content-type" : "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
        "Access-Control-Max-Age": "86400",
      },
    });
  }
}

위 코드에 여러분의 notion database id, token을 작성해주시면 next.js의 코드와 상호작용하며 잘 작동할 것입니다.

next.js에서 form을 통해 전달받은 data인 address, name, url을 request.body에서 읽어내어
notion api로 보내주어야하는데 이부분이 해결이 안되어 많은 시간을 썼네요.

request를 .json() 메서드로 파싱해야지만 workers안에서 사용할 수 있습니다.
.json() 메서드를 사용하지 않고, request.body를 console.log로 찍어보면 ReadableStream로나오고 탐색이 안되는 것을 확인할 수 있으실거에요.

아래 링크가 제가 해결에 참고한 링크에요!
https://community.cloudflare.com/t/how-do-i-read-the-request-body-as-json/155393/2

오늘도 즐거운 코딩합시당 🙌