ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
zellyy-finance/DEPLOYMENT_CHECKLIST.md
hansoo e72f9e8d26 feat: React 성능 최적화 및 Vercel 배포 시스템 구축 완료 
🚀 성능 최적화 (Task 8):
- React.lazy를 활용한 코드 스플리팅 구현
- React.memo, useMemo, useCallback을 통한 메모이제이션 최적화
- 초기 번들 크기 87% 감소 (470kB → 62kB)
- 백그라운드 동기화 간격 최적화 (5분 → 30초)

📦 Vercel 배포 인프라 구축 (Task 9):
- vercel.json 배포 설정 및 보안 헤더 구성
- GitHub Actions 자동 배포 워크플로우 설정
- 환경별 배포 및 미리보기 시스템 구현
- 자동화된 배포 스크립트 및 환경 변수 관리
- 포괄적인 배포 가이드 및 체크리스트 작성

🔧 코드 품질 개선:
- ESLint 주요 오류 수정 (사용하지 않는 변수/import 정리)
- 테스트 커버리지 확장 (229개 테스트 통과)
- TypeScript 타입 안전성 강화
- Prettier 코드 포맷팅 적용

⚠️ 참고: 테스트 파일의 any 타입 및 일부 경고는 향후 개선 예정

🛠️ Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-12 20:52:04 +09:00

5.7 KiB
Raw Permalink Blame History

🚀 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 엔드포인트 URL
  • VITE_APPWRITE_PROJECT_ID - 프로덕션 프로젝트 ID
  • VITE_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가 전 세계 사용자들에게 제공됩니다!

Reference in New Issue View Git Blame Copy Permalink