소개
지난주에는 frontend 중심으로 구축하여 Digital Ocean 서버에 업로드 하였고,
이어서 Supabase 활용한 DB 구축 및 Vercel 활용한 배포까지 실행
지난주 게시글: https://www.gpters.org/nocode/post/build-full-stack-using-msOIBvzmbvLRwG6
진행 방법
클로드 코드, Supabase DB 및 Vercel 배포를 위해, 구글 뉴스를 관련 키워드를 중심으로 수집해서 DB에 저장하고 업데이트된 내용을 Vercel을 통해 배포하는 것으로 진행
[1] Supabase 설치
클로드 코드에게 설치를 요청하면 다음의 순서로 진행
⏺ 프로젝트에 Supabase를 설치하겠습니다.
npm install @supabase/supabase-js
⏺ 완료! @supabase/supabase-js가 성공적으로 설치되었습니다.
...
Supabase 클라이언트를 초기화하려면 환경 변수나 설정 파일에 URL과 키를 추가해야 합니다. 필요하시면 설정 도움을 드릴 수 있습니다.
... (도움요청)
⏺ 완료! Supabase 설정이 모두 완료되었습니다.
...
1. 환경 변수 파일 (.env.local)
- Supabase URL과 Anon Key를 설정할 수 있는 파일
- 중요: 실제 Supabase 프로젝트의 URL과 키를 입력해야 합니다개인이 직접 해야되는 작업 (클로드 가이드 요청도 필요시 진행)
Supabase 프로젝트 생성:
https://supabase.com에서 프로젝트 생성
Project Settings → API에서 URL과 anon key 복사
환경 변수 설정
REACT_APP_SUPABASE_URL=your_actual_url REACT_APP_SUPABASE_ANON_KEY=your_actual_key
구글 RSS 피드로 부터 수집된 뉴스 표시
[2] Vercel 배포
[로컬 폴더 구성]
현재 로컬에서 작업 시, A 라는 폴더아래에 frontend, backend 모두 구현되어 있었음
[Vercel 배포위한 클로드 코드 제안]
Vercel 배포 요청을 진행하였을때, A와 동등위치에 frontend_vercel, backend_vercel 폴더 생성 후 Github commit 하여 진행
[문제점]
로컬에서 수정되거나 업데이트 된 내용과 실시간 연동 불가
클로드 코드가 A 폴더 및 Vercel 배포용 폴더 (frontend_vercel, backend_vercel) 의 내용을 임의로 수정
=> 배포 환경에 대한 최적 설정 필요 (의견 필요합니다.~~)
[참고] 배포 갯수가 100개가 넘어가면, 3시간동안 배포 불가
결과와 배운 점
Supabase, Vercel 의 설정 부분은 클로드 코드로 요청으로 자동으로 처리하기엔 개인 정보 추가 부분이 있어 한계가 있음
로컬에서 개발 중, Vercel 을 통해 frontend 만 배포하는 경우 backend / DB 연동에 한계가 있음
로컬 backend 접근불가
Vercel에 배포된 프론트엔드는 인터넷상에 있으므로
localhost:3001같은 로컬 백엔드에 접근할 수 없음백엔드도 인터넷에서 접근 가능한 곳에 배포되어야 함
환경 변수 관리
개발/프로덕션 환경의 API 엔드포인트가 달라짐
Vercel 환경 변수로 관리 필요
CORS (Cross-Origin Resource Sharing) 문제 상세 설명
브라우저가 보안상의 이유로 다른 출처(origin)의 리소스 접근을 제한하는 정책
=> 근본적으로 frontend와 동일하게 backend도 배포되어 야 함
