공개 화면 확인
서비스별 성공 표시가 같은 결과를 뜻하는지 실제 주소에서 다시 확인합니다.
학습 카드 1장
이 단원의 학습 카드
모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.
공개 주소에서 이미지 카드 확인하기 Supabase의 글과 Cloudinary의 이미지가 Vercel 공개 주소의 카드 하나로 합쳐져 보이는지 확인할 수 있습니다
Vercel 환경 변수는 배포 환경별 값을 관리하며, 값이 바뀐 뒤 새 배포가 필요합니다. 이번 사이트에는 Supabase의 공개 읽기 값 두 개만 넣습니다.
확인은 서비스 화면에서 끝나지 않습니다. GitHub 커밋과 Vercel 배포가 같고, Supabase 행과 Cloudinary 이미지가 같은 public_id를 가리킨 뒤에도 Production 주소에서 이미지와 제목을 직접 확인합니다.
추가 설명: 자동 연결은 수동 연결 뒤에 진행합니다
이미지 여러 장을 반복해서 등록할 때는 Cloudinary API 키로 업로드를 자동화할 수 있습니다. 이어서 서버가 Supabase 서비스 역할 키로 행을 저장할 수 있지만, 두 값은 관리자 비밀값이므로 브라우저 코드나 GitHub 저장소에 넣지 않습니다. 업로드만 성공하고 행 저장이 실패하면 방금 올린 이미지를 지우는 롤백도 함께 설계해야 합니다. 수동으로 한 장을 끝까지 연결해 각 값의 이동을 확인한 뒤 이 자동화를 추가합니다.
-
Vercel에는 Supabase 공개 주소와 publishable key 두 값만 넣고 새 Preview를 배포합니다.
이 Vercel 프로젝트에 필요한 환경 변수 이름을 예제 코드에서 확인해 주세요. 공개 읽기 값과 관리자 비밀값을 나누고, Vercel에 넣을 이름 두 개만 보여 주세요. 실제 값은 출력하지 마세요.
확인NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY만 나옵니다.
-
Preview 주소에서 이미지, 제목과 이미지 설명을 확인합니다.
확인이미지·제목·이미지 설명이 카드 하나에 함께 보입니다.
-
GitHub의 최근 커밋과 Vercel Preview가 같은 커밋을 가리키는지 확인합니다.
확인Vercel 배포 정보의 커밋이 GitHub의 최근 커밋과 같습니다.
-
Cloudinary 이미지와 Supabase 행에서 같은 public_id를 확인합니다.
확인Cloudinary의 public_id가 Supabase의 cloudinary_public_id와 같고 image_url도 같은 이미지를 엽니다.
-
확인을 마친 변경만 main에 합치고 Production 주소를 새 브라우저 창에서 엽니다.
확인새 브라우저 창의 Production 주소에서도 같은 이미지 카드가 보입니다.
Production 주소를 새 브라우저 창에서 열고 카드 한 장의 이미지·제목·설명을 작업 기록에 남깁니다.
공개 주소에서 Supabase에 적은 제목·설명과 Cloudinary에 올린 이미지가 한 카드로 보이면 완료입니다.
환경 변수를 추가해도 이미 끝난 배포에는 자동으로 들어가지 않으므로 새로 배포합니다. Vercel 성공 표시만 확인하지 않고 새 브라우저 창에서 이미지와 제목을 직접 봅니다.
용어 풀이
전체 용어집 →2026-08-19 기준 · 출처 · Vercel — Environment variables, Supabase — Secure data