주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
3.1 KiB
3.1 KiB
🚨 Vercel 배포 오류 해결 가이드
문제 상황
Environment Variable "VITE_APPWRITE_ENDPOINT" references Secret "vite_appwrite_endpoint", which does not exist.
해결 방법
1. Vercel 대시보드에서 환경 변수 설정
🔗 URL: https://vercel.com/hansoohas-projects/zellyy-finance/settings/environment-variables
📝 설정해야 할 환경 변수들:
Production 환경
| 변수명 | 값 | 설명 |
|---|---|---|
VITE_APPWRITE_ENDPOINT |
https://cloud.appwrite.io/v1 |
Appwrite 클라우드 엔드포인트 |
VITE_APPWRITE_PROJECT_ID |
YOUR_PROJECT_ID |
Appwrite 프로젝트 ID |
VITE_APPWRITE_DATABASE_ID |
default |
데이터베이스 ID |
VITE_APPWRITE_TRANSACTIONS_COLLECTION_ID |
transactions |
컬렉션 ID |
VITE_APPWRITE_API_KEY |
YOUR_API_KEY |
Appwrite API 키 |
VITE_DISABLE_LOVABLE_BANNER |
true |
Lovable 배너 비활성화 |
Preview 환경 (동일한 값 또는 테스트용 값)
- 위와 동일한 변수들을 Preview 환경에도 설정
2. CLI로 환경 변수 설정 (대안)
# Production 환경
vercel env add VITE_APPWRITE_ENDPOINT production
vercel env add VITE_APPWRITE_PROJECT_ID production
vercel env add VITE_APPWRITE_DATABASE_ID production
vercel env add VITE_APPWRITE_TRANSACTIONS_COLLECTION_ID production
vercel env add VITE_APPWRITE_API_KEY production
vercel env add VITE_DISABLE_LOVABLE_BANNER production
# Preview 환경
vercel env add VITE_APPWRITE_ENDPOINT preview
# ... 기타 변수들
3. 환경 변수 설정 후 재배포
# 환경 변수 설정 확인
vercel env ls
# 재배포
vercel --prod
Appwrite 설정 가이드
-
Appwrite 클라우드 계정 생성
- https://cloud.appwrite.io 접속
- 계정 생성/로그인
-
프로젝트 생성
- 새 프로젝트 생성
- 프로젝트 ID 복사
-
데이터베이스 설정
- Database 메뉴에서 새 데이터베이스 생성 (이름: default)
- Collection 생성 (이름: transactions)
-
API 키 생성
- Settings > API Keys에서 새 API 키 생성
- 필요한 권한 부여
-
도메인 설정
- Settings > Platforms에서 Web 플랫폼 추가
- Vercel 도메인 추가 (예: https://zellyy-finance.vercel.app)
주의사항
⚠️ 보안 주의사항:
- API 키는 절대 코드에 하드코딩하지 마세요
- 환경 변수만 사용하세요
.env파일은.gitignore에 포함되어 있는지 확인하세요
✅ 성공 확인:
- 환경 변수 설정 후
vercel env ls로 확인 - 재배포 후 브라우저에서 정상 동작 확인
- 개발자 도구 Console에서 에러 메시지 확인