cloudflare pages를 통한 배포

[young-do]

No description provided.

[young-do]

cloudflare pages 적용 이슈 1

• cloudflare pages로 배포하려고 하면 edge runtime을 적용해야합니다.
  • https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#consider-if-you-need-the-edge-runtime
• 그러나 nextjs에 쿠키가 하나만 설정되는 이슈가 있습니다 ;.;
  • [NEXT-471] Calling cookies.set twice sets only one value, in API route with Edge runtime vercel/next.js#38302
• 카카오 로그인할 때 access_token, refresh_token 두 개를 expire_in를 다르게 설정해야하기 때문에 문제가 되구요.
• 참고로 nodejs runtime에선 문제 없습니다

앞으로?

그래서 지금 선택할 수 있는 안이 2가지가 있습니다.

1. cloudflare pages을 사용한다. 쿠키를 쓸 땐 json.stringify를 사용해서 두 토큰값을 하나의 쿠키에 저장한다.
2. vercel로 변경한다. edge runtime대신 nodejs runtime을 사용한다.

물론 1안으로 개발할 수 있긴 한데 우회하는 방법이라 고민이 됩니다.
많은 의견 부탁드립니다 (_ _ )

[sangbooom]

음.. 저는 2안(vercel로 변경)으로 하는것도 좋아보입니다..!
일단 cloudflare pages로 배포하려면 edge runtime을 적용해야하는데, edge runtime이 아직 실험적 기능인게 큰 이슈같아 보입니다.

1. middleware의 edge runtime 설정 이슈
2. getServerSideProps의 경우 edge로 설정하면 response에 접근할 수 없는 이슈

known issue 이외에도 말씀해주신것처럼 쿠키가 하나만 설정되는 이슈가 있다던지 unknown issue들이 더 많이 있을 것 같아 현재로선 사용성에 불편함을 겪을 것 같아 고민이되네요!

[young-do]

막상 vercel으로 갈 생각을 하니
cloudflare + nextjs 조합에 대한 욕심이 생기는군요😅

일단 1안으로 좀만 진행해보는데 너무 안풀리면
그때 vercel로 옮겨보겠습니다..!

테스트는 이 repo fork해서 확인해보겠습니다

[sangbooom]

넵 알겠습니다! 저도 cloudflare pages로 가져갔을때 어떤 이점이 있을지 궁금하긴합니다 😎

[siyeons]

항상 2안이 언제든 시도할 수 있는 대안이니까요!! 원하시는만큼 시도해보시고(저희도 토요일에 구경하겠습니다!! 함께 얘기해봐요~!) 안될시에 2안으로 진행하면 좋을 것 같아요!! 😆 스펙이 작은 서비스의 장점 아닐까요!?!?!?!? ㅎㅎ 수고많으십니당 ㅠㅠ!!

[young-do]

cloudflare pages 적용 이슈 2

• fork 후 edge runtime을 적용했습니다.
• cloudflare pages에 해당 레포 연결하고 배포를 하는데 문제가 있더군요
• 문제는 cloudflare에서 yarn berry를 지원하지 않습니다.
  • nextjs 빌드 시 npx @cloudflare/next-on-pages --experimental-minify를 실행하고
  • 해당 패키지는 vercel cli를 사용하는데 yarn berry는 지원하질 않습니다 ;.;
    • yarn2 Vercel build failed - No Next.js version could be detected in your project vercel/vercel#5280
  • 역시나 vercel도 yarn berry를 지원하지 않네요 ;.;
    • https://vercel.com/guides/does-vercel-support-yarn-2

다시 어떻게 할까?

이번에도 두가지 안이 있는 것 같습니다.

1. yarn berry를 사용하지 않고, cloudflare pages를 사용하기
2. yarn berry를 지원하는 netflify를 사용하기.
   • 놀랍게도 잘 지원합니다;;
   • 심지어 배포도 잘됩니다.
   • link: https://ditto-dev.netlify.app/

두 플랫폼에 대한 비교가 잘되어있는 링크를 보면 netlify가 조금 부족할 수 있을 것 같긴 합니다.
그래도 yarn berry까지 버리긴 조금 아쉬워서 결정이 쉽지 않네요 ;.;

• https://bejamas.io/compare/netlify-vs-cloudflare-pages/

[sangbooom]

헉.. vercel이 yarn berry를 지원하지 않는군요.. ㅜㅠ netlify와 다른 플랫폼 간에 큰 차이가 없다면 netlify도 좋습니다! 차이점을 좀 더 찾아봐야겠네요..

[young-do]

yarn classic으로 변경해서 cloudflare pages로 배포를 해봤는데요
edge function만 해도 속도 차이가 2배 이상 나네요;.;
link: https://ditto-testing.pages.dev
아무래도 cloudflare pages로 마음이 기우는 군요 (= yarn classic으로 이동)

[young-do]

yarn classic으로 전환 후 cf pages에 배포 완료되었습니다.
이 이슈는 닫습니다.

배포 link: https://ditto-o.pages.dev/

[young-do]

cloudflare pages 배포 이슈 3

• middleware에서 NextResponse.next()가 원하는 대로 동작하지 않는다.
• 즉, middleware 단에서 모든 케이스에 NextResponse를 생성 및 반환한다면 문제가 없겠으나
• NextResponse.next()를 사용하는 것처럼 skip하는 케이스는 제대로 활용할 수 없다.
• 한 마디로 cf pages에서 middleware 기능 지원은 아직 온전하지 않다.