이번에는 개발 중인 웹앱을 실제 웹 주소로 배포하고, Supabase를 이용한 회원 인증 기능까지 연결해봤습니다.
회사 다니면서 짬짬히 해보고 있는데 역시 한 번에 되는건 없군요 😃
한국 웹사이트의 로그인 페이지
처음에는 이렇게 생각했습니다.
“Supabase 연결하고 Cloudflare에 올리면 금방 끝나겠지?”
그런데 실제로 해보니 배포 버튼 한 번 누른다고 끝나는 일이 아니었습니다. 😅
특히 처음 사용하는 서비스들이라 어디에 무엇을 설정해야 하는지 찾는 데 시간이 꽤 걸렸습니다.
제가 사용한 구성은 대략 이렇습니다.
앱: React Native + Expo
회원 인증 / DB: Supabase
웹 배포: Cloudflare Workers
1. 먼저 Supabase 연결
기존 웹앱에 Supabase를 연결해서 회원 인증 기능을 사용할 수 있도록 만들었습니다.
우선 이메일/비밀번호 방식으로 로그인이 되는지 확인했고, 이후 카카오·구글 같은 소셜 로그인도 추가할 수 있도록 구조를 잡았습니다.
여기까지는 비교적 순조로웠습니다.
문제는 이 앱을 실제 인터넷 주소에 배포하는 과정에서 시작됐습니다.
2. Cloudflare 배포가 생각보다 쉽지 않았다
처음 참고한 문서에서는 Cloudflare Pages를 이용하는 방식으로 설명되어 있었는데, 실제 Cloudflare 화면은 이미 Workers 중심으로 바뀌어 있었습니다.
그래서 문서에 나온 메뉴를 아무리 찾아도 화면이 달랐습니다.
결국 알게 된 것은,
예전 배포 방법과 지금 Cloudflare에서 안내하는 방법이 달라졌다는 것.
서비스가 계속 업데이트되기 때문에 개발 문서를
볼 때는
“언제 작성된 문서인지”도 꼭 확인해야 한다는 걸 배웠습니다.
3. 프로젝트 이름 하나 때문에 배포 실패
Cloudflare 설정 파일에는 배포할 프로젝트 이름을 적어야 합니다.
저는 처음에 앱 이름을 넣었는데, Cloudflare에 만들어진 프로젝트 이름과 달라서 경고가 발생했습니다.
앱 이름과 Cloudflare 프로젝트 이름이 꼭 같은 것은 아니었습니다.
Cloudflare 대시보드에 표 시되는 실제 프로젝트 이름으로 수정하니 해결됐습니다.
사소해 보이는 설정 하나가 배포 전체를 막을 수도 있더군요.
4. 설정을 두 군데 했더니 오히려 충돌
웹앱에서는 사용자가 /login 같은 주소로 바로 들어와도 정상 화면이 보여야 합니다.
그걸 처리하기 위한 SPA 설정을 했는데, 저는 비슷한 설정을 두 군데에 동시에 넣었습니다.
그 결과 Cloudflare에서
Infinite loop detected
라는 오류가 발생했습니다.
처음에는 “무슨 무한 반복이지?” 싶었는데, 원인은 간단했습니다.
같은 일을 처리하는 설정이 두 개 존재해서 서로 충돌한 것이었습니다.
하나를 제거하고 Cloudflare 설정 하나만 사용하니 정상 배포됐습니다.
여기서 얻은 교훈은 꽤 명확했습니다.
같은 기능을 하는 설정이 여러 개 있다고 해서 전부 사용하는 것이 더 안전한 것은 아니다.
오히려 하나의 방식으로 정리하는 편이 문제를 찾기도 훨씬 쉬웠습니다.
5. 환경변수는 어디에 넣어야 할까?
Supabase를 사용하려면 URL이나 공개 키 같은 값을 환경변수로 등록해야 합니다.
그런데 Cloudflare에는 비슷한 이름의 환경변수 설정 메뉴가 여러 곳에 있었습니다.
처음에는 Worker의 실행 환경변수 쪽에 넣으려고 했는데 오류가 발생했습니다.
알고 보니 Expo 웹앱에서 사용하는 EXPO_PUBLIC_* 값들은 앱을 실행할 때가 아니라 빌드할 때 필요 한 값이었습니다.
그래서 Cloudflare의 Build 설정에 넣어야 했습니다.
이 과정에서 처음으로 제대로 이해한 개념이 하나 있습니다.
빌드할 때 필요한 값과 서버가 실행될 때 필요한 값은 다르다.
초보자 입장에서는 둘 다 그냥 ‘환경변수’처럼 보여서 꽤 헷갈리는 부분이었습니다.
6. 환경변수를 바꿨는데 왜 적용이 안 되지?
환경변수를 수정한 뒤 당연히 다시 배포하면 적용될 거라고 생각했습니다.
Cloudflare에 New deployment라는 버튼이 있어서 눌러봤는데…
갑자기 파일을 직접 업로드하라는 화면이 나타났습니다.
제가 원했던 것은 기존 GitHub 코드를 다시 빌드하는 것이었는데, 이 버튼은 그런 기능이 아니었습니다.
결국 GitHub에 새로운 커밋을 push해서 Cloudflare의 자동 빌드를 다시 실행했습니다.
그제야 변경한 환경변수가 정상적으로 적용됐습니다.
버튼 이름만 보고 기능을 예상하면 안 된다는 것도 이번에 배웠습니다. 😂
결과
몇 번의 실패 끝에 결국
Cloudflare에 웹앱 배포
Supabase 백엔드 연결
이메일/비밀번호 로그인 확인
카카오·구글 등 소셜 로그인을 추가할 수 있는 구조 준비
까지 완료했습니다.
이번 작업에서 가장 크게 느낀 점은
코드 자체보다 서비스와 서비스 사이의 설정을 맞추는 일이 더 어려울 때가 많다는 것이었습니다.
Supabase에서는 인증 설정을 하고,
Expo에서는 환경변수를 사용하고,
Cloudflare에서는 빌드와 배포 방법을 맞춰야 합니다.
각각 따로 보면 어렵지 않은데 세 가지를 연결하는 순간부터 예상하지 못한 문제가 생기기 시작했습니다.
그래도 하나씩 오류를 따라가면서 해결하고 나니 전체 구조가 조금씩 보이기 시작했습니다.
다음 단계는 실제 카카오/구글 OAuth 설정을 연결해서 소셜 로그인까지 완성하는 것입니다.
저처럼 처음 웹앱 배포와 Supabase 인증을 함께 시도하는 분들에게 이 시행착오가 조금이나마 도움이 되었으면 합니다. 🙂
