공개 주소에서 이미지 카드 확인하기

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 주소에서도 같은 이미지 카드가 보입니다.

직접 해보기

그대로 붙여넣기

방금 배포한 포트폴리오를 확인해 주세요. GitHub 최근 커밋, Vercel 배포 커밋, Supabase의 최근 행과 Cloudinary public_id를 대조하고 실제 주소에서 이미지와 제목이 보이는지 확인해 주세요. 비밀값은 출력하지 마세요.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰

제 Production 주소는 [주소]입니다. 새 브라우저 상태에서 열고 프로젝트 카드의 이미지, 제목, 이미지 설명과 링크를 확인한 뒤 실패한 항목만 알려 주세요.

한 단계 더

이 포트폴리오에서 이미지가 깨질 때, 카드가 통째로 없을 때, 옛 문구가 보일 때를 각각 Cloudinary, Supabase, Vercel과 GitHub 가운데 어디서부터 확인할지 순서로 정리해 주세요.

Production 주소를 새 브라우저 창에서 열고 카드 한 장의 이미지·제목·설명을 작업 기록에 남깁니다.

헷갈리기 쉬운 것

환경 변수를 추가해도 이미 끝난 배포에는 자동으로 들어가지 않으므로 새로 배포합니다. Vercel 성공 표시만 확인하지 않고 새 브라우저 창에서 이미지와 제목을 직접 봅니다.

왜 이렇게 작동하나요

네 장의 접수증에 적힌 주문번호를 맞춰 같은 배송 건인지 확인하는 상황을 떠올립니다.

Vercel 화면이 Supabase의 한 행을 읽은 뒤 그 행의 image_url로 Cloudinary 이미지를 불러오므로, 값이 어긋난 위치에 따라 카드가 없거나 이미지가 깨지거나 옛 화면이 보입니다.

용어 풀이

전체 용어집 →

환경 변수: 코드 밖에서 서비스 주소와 비밀값을 전달하는 이름표입니다.
Preview: 작업 브랜치를 main에 합치기 전에 확인하는 Vercel의 임시 배포입니다.
Production: 방문자에게 공개할 기본 브랜치의 배포입니다.
API 키: 외부 서비스가 요청을 보낸 계정이나 프로그램을 확인할 때 쓰는 인증 값입니다.
서비스 역할 키: Supabase의 읽기·쓰기 제한을 우회하는 관리자 비밀값이며 브라우저에 넣지 않습니다.
롤백: 여러 서비스 중 한 단계가 실패했을 때 앞에서 바꾼 내용도 되돌려 상태를 맞추는 처리입니다.