Firebase Hosting으로 웹앱 배포하기

왜 Firebase Hosting인가

웹앱 배포 옵션은 많습니다. Vercel, Netlify, AWS S3+CloudFront... 그런데 이미 Firebase를 쓰고 있다면 굳이 다른 서비스를 붙일 이유가 없겠죠.

Firebase Hosting은 글로벌 CDN, 무료 SSL, 원클릭 롤백을 기본 제공합니다. Flutter Web이나 React 빌드 결과물을 바로 올릴 수 있어요.

프로젝트 초기 설정

Firebase CLI가 설치되어 있다는 전제로 시작하겠습니다. 아직 없다면 npm으로 설치하면 되죠.

bash

# Firebase CLI 설치
npm install -g firebase-tools

# 로그인
firebase login

# 프로젝트 디렉토리에서 초기화
firebase init hosting

init 과정에서 public 디렉토리를 물어봅시다. Flutter Web이라면 build/web, React라면 build를 지정하면 됩니다. SPA 여부도 물어보는데, 라우팅을 쓴다면 Yes로 선택하세요.

firebase.json 핵심 설정

json

{
  "hosting": {
    "public": "build/web",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

rewrites 설정이 SPA의 핵심예요. 모든 경로를 index.html로 돌려줘야 클라이언트 라우터가 동작하겠죠. headers에서 정적 에셋의 캐시 정책도 잡아두면 성능이 확 올라갑니다.

배포 실행

bash

# Flutter Web 빌드
flutter build web --release

# 배포
firebase deploy --only hosting

# 특정 프로젝트 지정 (멀티 프로젝트일 때)
firebase deploy --only hosting --project my-prod-project

deploy 한 줄이면 끝입니다. 배포가 완료되면 터미널에 Hosting URL이 찍힙니다. Firebase Console에서도 배포 이력을 확인할 수 있고, 문제가 생기면 이전 버전으로 원클릭 롤백이 돼요.

프리뷰 채널도 유용합니다. PR 리뷰할 때 임시 URL을 만들어서 공유할 수 있겠죠.

bash

# 프리뷰 채널 생성 (7일 후 자동 만료)
firebase hosting:channel:deploy preview-feature-x --expires 7d

# 결과 예시
# https://my-project--preview-feature-x-abc123.web.app

Firebase Hosting으로 웹앱 배포하기

왜 Firebase Hosting인가

프로젝트 초기 설정

firebase.json 핵심 설정

배포 실행

Flutter Riverpod 이해하기 4편 - StreamProvider

Flutter Flame으로 2D 게임 만들기: 그리고 왜 Unity로 갔는지

관련 글