firebase hosting 에서 Vercel로 마이그레이션

 

 

 

✨ 오늘 한 일 정리 (2025.04.01)

오늘 한 작업

오늘 진행한 작업을 정리한 내용입니다.

• Firebase Hosting에서 DateP 프로젝트의 개인정보처리방침과 이용약관 페이지를 구축하려 했으나 문제 발생
• Firebase는 정적 파일만 호스팅하므로 Next.js의 API Routes가 동작하지 않음
• Vercel로 마이그레이션 후 https://papweb.vercel.app/으로 API 호출하니 문제없이 동작
• 이제 Play Store 비공개 테스트와 Purchase 테스트 단계로 진행 예정

1. 프로젝트 개요

• 프로젝트 목표: DateP 프로젝트에서 개인정보처리방침과 이용약관 페이지를 다국어로 제공. preview 페이지에서 언어 선택 시 해당 언어 콘텐츠가 표시되고, 링크를 통해 이용약관 및 개인정보처리방침 페이지에 접근 가능해야 함.
• 현재 상태:
  • preview 페이지에서 언어 선택 시 콘텐츠 변경 기능 구현 완료.
  • 이용약관 및 개인정보처리방침 링크는 /ko/privacy-policy, /ko/terms-of-service로 설정됨.
  • Firebase Hosting에서 API Routes 미지원으로 Vercel로 마이그레이션.
  • 현재 https://papweb.vercel.app/에서 정상 동작.
• 사용 기술:
  • Next.js 15.0.2
  • TypeScript
  • Vercel (배포 환경: https://papweb.vercel.app/)

2. 구현된 기능: Vercel로 마이그레이션 및 API 호출 성공

2.1. 초기 문제 (Firebase Hosting)

• 문제 1: API Routes 미지원:
  • Firebase Hosting에서 /api/[lang] 호출 시 실패.
  • Firebase는 정적 파일만 호스팅하므로 Next.js의 API Routes가 동작하지 않음.

2.2. 해결 과정 (Vercel 마이그레이션)

• 해결 1: Vercel로 배포:
  • Vercel로 프로젝트 마이그레이션:
    vercel --prod
  • 고정 도메인 https://papweb.vercel.app/으로 통합.
• 해결 2: API 호출 경로 수정:
  • LanguageSelector에서 상대 경로로 API 호출:
    const response = await fetch(`/api/${lang}`);
  • https://papweb.vercel.app/api/ko 호출 성공.

2.3. 결과

• /api/[lang] 경로로 요청이 성공적으로 처리됨.
• preview 페이지에서 언어 선택 시 콘텐츠 정상 로드.
• 이용약관 및 개인정보처리방침 링크도 https://papweb.vercel.app/ko/privacy-policy, https://papweb.vercel.app/ko/terms-of-service로 정상 연결.

3. 다음 단계

• 빌드된 앱을 Play Store 비공개 테스트에 업로드.
• Purchase 테스트 진행.