Firebase 설정 및 배포 가이드 (2025)

Firebase란?

Firebase는 Google의 모바일 및 웹 앱 개발 플랫폼입니다. 인증, 데이터베이스, 스토리지, 호스팅 등 백엔드 기능을 코드 없이 쉽게 사용할 수 있습니다.

2025년 주요 업데이트: Firebase App Hosting이 정식 출시(GA)되어 Next.js 앱의 SSR과 CI/CD가 자동으로 설정됩니다.

1. Firebase 프로젝트 생성

1.1 Firebase Console 접속

  1. Firebase Console에 접속
  2. Google 계정으로 로그인
  3. "프로젝트 추가" 클릭

1.2 프로젝트 설정

프로젝트 이름: my-awesome-app
Google Analytics: 활성화 (추천)
결제 계정: SSR 사용 시 필요 (Cloud Functions)

💡 Tip: Next.js에서 SSR을 사용하려면 Blaze 요금제(종량제)가 필요합니다. 무료 할당량이 충분하므로 소규모 프로젝트는 거의 무료로 사용 가능합니다.

2. Firebase CLI 설치 및 로그인

2.1 Firebase CLI 설치

# npm으로 전역 설치
npm install -g firebase-tools

# 설치 확인
firebase --version

2.2 Firebase 로그인

# 브라우저가 열리며 Google 계정 인증
firebase login

# 로그인 확인
firebase projects:list

3. Next.js 프로젝트에 Firebase 연결

3.1 프로젝트 초기화

# Next.js 프로젝트 디렉토리에서 실행
cd my-nextjs-app
firebase init hosting

# 선택 옵션:
# - Existing project: [당신의 Firebase 프로젝트 선택]
# - Public directory: out (또는 .next)
# - Configure as SPA: No
# - Automatic builds with GitHub: No (나중에 설정 가능)

3.2 firebase.json 설정

자동 생성된 firebase.json 파일:

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

4. Firebase App Hosting (2025 권장)

✨ 2025년 권장 방식: Firebase App Hosting은 Next.js의 SSR, SSG, API Routes를 자동으로 Cloud Run과 CDN에 배포해주는 최신 기능입니다.

4.1 App Hosting 초기화

# Next.js 프로젝트에서 실행
firebase init apphosting

# 선택사항:
# - Create new backend or select existing
# - Link GitHub repository (추천)
# - Configure build settings (자동 감지)

4.2 배포

# 로컬 소스로 배포
firebase deploy --only apphosting

# GitHub 연결 시 자동 배포
# → main 브랜치에 push하면 자동으로 배포됨

4.3 주요 기능

  • 자동 CI/CD: GitHub 푸시 시 자동 빌드 및 배포
  • SSR 지원: Cloud Run에 서버 로직 자동 배포
  • Global CDN: 정적 콘텐츠 전세계 캐싱
  • 자동 HTTPS: SSL 인증서 자동 관리

5. 기존 Firebase Hosting (정적 사이트)

정적 사이트만 배포할 경우 (SSR 없이 SSG만 사용):

5.1 Next.js 정적 빌드

# next.config.js에 추가
module.exports = {
  output: 'export',
}

# 빌드
npm run build
# → out/ 디렉토리에 정적 파일 생성

5.2 배포

# Hosting만 배포
firebase deploy --only hosting

# 배포 완료 후 URL 확인
# → https://프로젝트ID.web.app

6. 주요 Firebase CLI 명령어

# 프로젝트 목록 확인
firebase projects:list

# 현재 프로젝트 설정
firebase use 프로젝트ID

# 로컬 에뮬레이터 실행 (테스트용)
firebase emulators:start

# Hosting만 배포
firebase deploy --only hosting

# Functions만 배포
firebase deploy --only functions

# 전체 배포
firebase deploy

# 배포 취소 (롤백)
firebase hosting:channel:deploy 채널이름

# 로그 확인
firebase functions:log

7. Firebase Functions (서버리스 백엔드)

7.1 Functions 초기화

firebase init functions

# 선택사항:
# - Language: JavaScript 또는 TypeScript
# - ESLint: Yes (추천)
# - Dependencies: Yes

7.2 함수 작성 예시

// functions/index.js
const functions = require('firebase-functions');

// HTTP 함수
exports.helloWorld = functions.https.onRequest((req, res) => {
  res.send("Hello from Firebase!");
});

// 예약 함수 (매일 자정 실행)
exports.dailyJob = functions.pubsub
  .schedule('0 0 * * *')
  .onRun((context) => {
    console.log('Daily job running!');
  });

7.3 배포

firebase deploy --only functions

8. 환경 변수 및 시크릿 관리

8.1 Firebase 환경 변수 설정

# 환경 변수 설정
firebase functions:config:set api.key="YOUR_API_KEY"

# 확인
firebase functions:config:get

# Functions에서 사용
const apiKey = functions.config().api.key;

8.2 Next.js 환경 변수

.env.local 파일:
NEXT_PUBLIC_FIREBASE_API_KEY=your_key
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

9. 자주 발생하는 문제 해결

❌ Error: Billing account not configured

해결: Firebase Console → Project Settings → Usage and Billing → Blaze 요금제로 업그레이드 (SSR 사용 시 필수)

❌ Error: Firebase CLI not found

해결: npm install -g firebase-tools 재실행

❌ 403 Permission denied

해결: firebase login 다시 실행하여 권한 재인증

10. Firebase 베스트 프랙티스 (2025)

✓

Node.js 버전: 18.x 이상 사용

최신 기능 및 보안 업데이트 적용

✓

CI/CD로 자동 배포 설정

GitHub Actions 또는 Firebase App Hosting의 내장 CI/CD 활용

✓

Functions는 폴더별로 분리

functions/user/, functions/payments/ 등으로 구조화

✓

로컬 에뮬레이터로 테스트

firebase emulators:start로 배포 전 검증

✓

의존성 정기 업데이트

보안 취약점 방지 및 성능 최적화

참고 자료

빠른 참조 카드

🚀 빠른 배포

npm run build && firebase deploy

🧪 로컬 테스트

firebase emulators:start

📊 로그 확인

firebase functions:log

🔄 롤백

firebase hosting:rollback