4d9effce41
- AddTransactionButton.tsx: useEffect import 제거 - BudgetProgressCard.tsx: localBudgetData를 _localBudgetData로 변경 - Header.tsx: isMobile을 _isMobile로 변경 - RecentTransactionsSection.tsx: isDeleting을 _isDeleting로 변경 - TransactionCard.tsx: cn import 제거 - ExpenseForm.tsx: useState import 제거 - cacheStrategies.ts: QueryClient, Transaction import 제거 - Analytics.tsx: Separator import 제거, 미사용 변수들에 underscore prefix 추가 - Index.tsx: useMemo import 제거 - Login.tsx: setLoginError를 _setLoginError로 변경 - Register.tsx: useEffect dependency 수정 및 useCallback 추가 - Settings.tsx: toast, handleClick에 underscore prefix 추가 - authStore.ts: setError, setAppwriteInitialized에 underscore prefix 추가 - budgetStore.ts: ranges를 _ranges로 변경 - BudgetProgressCard.test.tsx: waitFor import 제거 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
5.7 KiB
5.7 KiB
🚀 Vercel 배포 체크리스트
이 체크리스트는 Zellyy Finance 프로젝트를 Vercel에 성공적으로 배포하기 위한 단계별 가이드입니다.
📋 배포 전 준비사항
✅ 코드 준비
- 모든 테스트 통과 (
npm run test:run) - 타입 검사 통과 (
npm run type-check) - 린트 검사 통과 (
npm run lint) - 로컬 빌드 성공 (
npm run build) - 성능 최적화 확인 (코드 스플리팅, 메모이제이션)
✅ 환경 설정
.env.example파일 최신 상태 유지- 프로덕션용 Appwrite 프로젝트 설정 완료
- 프리뷰용 Appwrite 프로젝트 설정 완료 (선택사항)
- 필수 환경 변수 목록 확인
✅ GitHub 설정
- GitHub 저장소가 public 또는 Vercel 연동 가능한 상태
main브랜치가 안정적인 상태- PR 템플릿이 설정됨
- GitHub Actions 워크플로우가 작동함
🔧 Vercel 프로젝트 설정
1단계: Vercel 계정 및 프로젝트 생성
- Vercel 웹사이트에서 GitHub 계정으로 로그인
- "New Project" 클릭
zellyy-finance저장소 선택하여 Import- 프로젝트 설정 확인:
- Framework Preset: Vite
- Root Directory:
./ - Build Command:
npm run build - Output Directory:
dist - Install Command:
npm install
2단계: 환경 변수 설정
Vercel 프로젝트 Settings > Environment Variables에서 설정:
🔑 프로덕션 환경 변수
VITE_APPWRITE_ENDPOINT- Appwrite 엔드포인트 URLVITE_APPWRITE_PROJECT_ID- 프로덕션 프로젝트 IDVITE_APPWRITE_DATABASE_ID- 데이터베이스 ID (default)VITE_APPWRITE_TRANSACTIONS_COLLECTION_ID- 컬렉션 ID (transactions)VITE_APPWRITE_API_KEY- Appwrite API 키VITE_DISABLE_LOVABLE_BANNER-true설정
🔑 프리뷰 환경 변수 (동일한 키, 다른 값)
- 프리뷰용 Appwrite 프로젝트 ID 설정
- 기타 환경 변수는 프로덕션과 동일
3단계: 브랜치 및 배포 설정
- Production 브랜치:
main확인 - Preview 브랜치:
develop및 모든 PR 브랜치 확인 - 자동 배포 활성화 확인
🚀 첫 배포 실행
배포 테스트
- 첫 번째 배포 실행 (자동 또는 수동)
- Vercel 대시보드에서 빌드 로그 확인
- 배포 성공 확인
- 생성된 URL에서 애플리케이션 정상 동작 확인
기능 테스트
- 로그인/회원가입 기능 테스트
- 거래 내역 추가/수정/삭제 테스트
- 예산 설정 기능 테스트
- 분석 페이지 정상 동작 확인
- 모바일 반응형 디자인 확인
🔄 자동 배포 워크플로우 검증
GitHub Actions 확인
- PR 생성 시 자동 빌드 실행 확인
- 배포 전 테스트 자동 실행 확인
- 보안 스캔 자동 실행 확인
- 빌드 실패 시 알림 확인
Vercel 통합 확인
main브랜치 푸시 시 프로덕션 자동 배포- PR 생성 시 프리뷰 배포 자동 생성
- 배포 상태가 GitHub PR에 자동 코멘트됨
- 배포 완료 시 상태 업데이트 확인
🌐 도메인 설정 (선택사항)
커스텀 도메인 연결
- Vercel 프로젝트 Settings > Domains 접속
- 원하는 도메인 입력
- DNS 설정 업데이트 (CNAME 또는 A 레코드)
- SSL 인증서 자동 설정 확인
- 도메인을 통한 접속 테스트
📊 성능 및 모니터링 설정
성능 최적화 확인
- 코드 스플리팅이 적용됨 (청크 파일들 확인)
- 이미지 최적화 적용 확인
- 정적 자산 캐싱 설정 확인
- 압축 및 minification 적용 확인
모니터링 설정
- Vercel Analytics 활성화 (선택사항)
- Core Web Vitals 모니터링 설정
- 에러 추적 설정 (Sentry 등, 선택사항)
- 성능 알림 설정 (선택사항)
🔒 보안 및 안정성 체크
보안 설정 확인
- 환경 변수가 빌드 파일에 노출되지 않음
- HTTPS 강제 리다이렉트 설정
- 보안 헤더 설정 확인 (
vercel.json) - npm audit 보안 취약점 없음
백업 및 롤백 준비
- 이전 배포 버전 롤백 방법 숙지
- 데이터베이스 백업 계획 수립
- 장애 상황 대응 계획 수립
📋 배포 완료 체크리스트
최종 확인
- 프로덕션 URL에서 모든 기능 정상 동작
- 모바일 디바이스에서 접속 테스트
- 다양한 브라우저에서 호환성 확인
- 성능 테스트 (Lighthouse, PageSpeed Insights)
- 사용자 피드백 수집 준비
문서화
- 배포 URL 및 접속 정보 공유
- 배포 과정 문서 업데이트
- 트러블슈팅 가이드 작성
- 팀원들에게 배포 완료 공지
🆘 트러블슈팅
일반적인 문제들
빌드 실패
- Node.js 버전 호환성 확인
- 의존성 설치 문제 (
npm ci재실행) - 환경 변수 오타 확인
환경 변수 오류
- Vercel 대시보드에서 변수 값 확인
- 대소문자 및 오타 확인
- 환경별 설정 확인 (Production/Preview)
라우팅 문제
vercel.json의 rewrites 설정 확인- SPA 라우팅 설정 확인
성능 문제
- 번들 크기 분석 (
npm run build:analyze) - 코드 스플리팅 적용 확인
- 이미지 최적화 확인
도움말 및 지원
✅ 배포 완료 축하합니다! 🎉
이제 Zellyy Finance가 전 세계 사용자들에게 제공됩니다!