[Flutter + Firebase로 북마크 앱 만들기 #5] Firebase Hosting으로 웹 배포하기

📌 시리즈 목차

• #1 프로젝트 초기 설정 및 Firebase 연동

• #2 프로젝트 구조 설계 및 Riverpod 적용

• #3 Firebase Authentication 연동 및 로그인 구현

• #4 Firestore 연동 및 북마크 CRUD 구현

• #5 Firebase Hosting으로 웹 배포하기 ← 현재 글

• #6 Android 앱 빌드 및 Play Store 배포 준비

• #7 스마트 URL 런처 구현 (SNS 앱 연동)

• #8 스마트 카테고리 관리 시스템

• #9 모던 UI 디자인 시스템 구축

🎯 이번 글에서 다룬 내용

• Firebase Hosting 초기화

• Flutter 웹 빌드 최적화

• Firebase 배포 과정

• 배포된 앱 확인 및 테스트

• 트러블슈팅

🚀 배포 개요

Firebase Hosting이란?

• 빠른 속도 (전 세계 CDN)

• 자동 SSL 인증서

• 무료 tier 제공

• 커스텀 도메인 지원

• 자동 백업 및 롤백

• 10GB 저장공간

• 월 360MB 전송량

• 소규모 프로젝트에 충분!

1️⃣ Firebase Hosting 초기화

명령어 실행

firebase init hosting

설정 과정

1. 프로젝트 선택

? Please select an option: Use an existing project
? Select a default Firebase project: bookmark-manager-24e55

2. Public 디렉토리 설정

? What do you want to use as your public directory?
→ build/web

• Flutter 웹 빌드 결과물이 저장되는 위치

• 최적화된 HTML, JS, CSS 파일 포함

3. SPA(Single Page Application) 설정

? Configure as a single-page app?
→ Yes

• 모든 라우팅을 index.html로 리다이렉트

• Flutter의 go_router가 클라이언트 측에서 라우팅 처리

• URL 직접 접근 시에도 정상 동작

https://your-app.web.app/login
→ index.html 로드 후 /login으로 라우팅

4. GitHub 자동 배포

? Set up automatic builds and deploys with GitHub?
→ No

• 지금은 수동 배포로 학습

• 나중에 CI/CD 파이프라인 구축 가능

생성된 파일

firebase.json

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

• public: 배포할 폴더

• ignore: 배포에서 제외할 파일

• rewrites: 모든 경로를 index.html로 (SPA 설정)

.firebaserc

{
  "projects": {
    "default": "bookmark-manager-24e55"
  }
}

2️⃣ Flutter 웹 빌드

빌드 명령어

flutter build web --release

빌드 과정 분석

1. 의존성 확인

Resolving dependencies...
Downloading packages...
Got dependencies!

• 필요한 패키지 다운로드

• 버전 충돌 해결

• 캐시 업데이트

2. Wasm 체크

Wasm dry run succeeded.
Use --no-wasm-dry-run to disable these warnings.

• WebAssembly: 웹에서 네이티브 수준 성능

• Flutter는 Wasm 지원 준비 중

• 현재는 JavaScript 사용

3. Tree-shaking (최적화)

Font asset "MaterialIcons-Regular.otf"
was tree-shaken, reducing it from 1645184 to 9600 bytes (99.4% reduction)

• 사용하지 않는 코드/리소스 제거

• 번들 크기 최소화

• 로딩 속도 향상

아이콘 폰트: 1.6MB → 9.6KB (99.4% 감소!)

4. 컴파일

Compiling lib/main.dart for the Web... 12.5s
✓ Built build/web

build/web/
├── index.html              # 진입점
├── main.dart.js           # 앱 로직 (압축됨)
├── flutter.js             # Flutter 엔진
├── flutter_service_worker.js  # 오프라인 지원
├── assets/
│   ├── fonts/
│   ├── packages/
│   └── NOTICES
├── canvaskit/             # 렌더링 엔진
└── icons/                 # 앱 아이콘

빌드 최적화 옵션

기본 빌드

flutter build web --release

HTML 렌더러 (호환성 우선)

flutter build web --release --web-renderer html

• 모든 브라우저 지원

• 더 작은 번들 크기

• 성능 약간 낮음

CanvasKit 렌더러 (성능 우선)

flutter build web --release --web-renderer canvaskit

• 네이티브 수준 성능

• 정확한 렌더링

• 번들 크기 큼 (약 2MB 추가)

• 첫 로딩 느림

Auto 렌더러 (권장)

flutter build web --release --web-renderer auto

• 모바일: HTML 렌더러

• 데스크톱: CanvasKit 렌더러

• 최적의 밸런스

3️⃣ Firebase 배포

배포 명령어

firebase deploy --only hosting

• -only hosting 이유:

• Hosting만 배포 (Firestore, Functions 등 제외)

• 빠른 배포

• 다른 서비스에 영향 없음

배포 과정

1. 파일 업로드

i  deploying hosting
i  hosting[bookmark-manager-24e55]: beginning deploy...
i  hosting[bookmark-manager-24e55]: found 34 files in build/web

• HTML, JavaScript, CSS

• 이미지, 폰트

• 설정 파일

2. 업로드 및 최종화

✔  hosting[bookmark-manager-24e55]: file upload complete
i  hosting[bookmark-manager-24e55]: finalizing version...
✔  hosting[bookmark-manager-24e55]: version finalized

• 파일 해싱 및 캐싱

• CDN 배포 (전 세계 서버)

• 버전 관리

3. 배포 완료

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/bookmark-manager-24e55/overview
Hosting URL: https://bookmark-manager-24e55.web.app

1. https://bookmark-manager-24e55.web.app

2. https://bookmark-manager-24e55.firebaseapp.com

4️⃣ 배포된 앱 확인

브라우저에서 접속

직접 URL 입력

https://bookmark-manager-24e55.web.app

기능 테스트

1. 회원가입/로그인

✅ 회원가입 폼 표시
✅ 이메일/비밀번호 입력
✅ Firebase Auth 연동 확인
✅ 로그인 성공 후 홈 화면 이동

2. 북마크 CRUD

✅ + 버튼으로 북마크 추가
✅ 목록에 실시간 표시
✅ 북마크 수정 가능
✅ 북마크 삭제 가능

3. 필터링 및 검색

✅ 카테고리 필터 동작
✅ 검색 기능 동작
✅ 실시간 업데이트

4. URL 열기

✅ 북마크 클릭 시 새 탭에서 URL 열림
✅ URL 복사 기능 동작

5️⃣ 배포 설정 파일 분석

firebase.json (최적화 버전)

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "**/*.@(json|xml|txt)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=3600"
          }
        ]
      }
    ]
  }
}

캐싱 전략

"headers": [
  {
    "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "max-age=31536000"  // 1년
      }
    ]
  }
]

• 변경 가능성 낮음

• 로딩 속도 향상

• 트래픽 절약

• Flutter가 해시 기반 파일명 사용

• 변경 시 자동으로 새 파일명

• 캐시 무효화 자동 처리

• 자주 변경될 수 있음

• 짧은 캐시 시간

6️⃣ 배포 후 관리

Firebase Console 확인

1. Firebase Console → Hosting

2. 배포 내역 확인

3. 트래픽 통계

• 배포 시간

• 파일 개수

• 총 용량

• 방문자 수

• 트래픽

재배포 (업데이트)

코드 수정 후

# 1. 웹 빌드
flutter build web --release

# 2. 배포
firebase deploy --only hosting

• 변경된 파일만 업로드

• 버전 관리

• 이전 버전 자동 백업

롤백 (이전 버전 복구)

Firebase Console에서

1. Hosting → 배포 내역
2. 이전 버전 선택
3. "롤백" 버튼 클릭

firebase hosting:channel:deploy preview

7️⃣ 성능 최적화

빌드 크기 확인

# build/web 폴더 크기 확인
du -sh build/web

• 기본 Flutter 앱: 2-3MB

• 이미지 포함: 5-10MB

• 복잡한 앱: 10-20MB

최적화 팁

1. 이미지 최적화

# 이미지 압축 도구
flutter pub add flutter_image_compress

2. Code Splitting

// 지연 로딩
import 'package:flutter/widgets.dart' deferred as widgets;

// 사용 시
await widgets.loadLibrary();

3. 폰트 최적화

# pubspec.yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
          # 필요한 폰트만 포함

8️⃣ 도메인 연결 (선택사항)

커스텀 도메인 추가

1. Firebase Console

Hosting → 도메인 추가
→ bookmarkmanager.com 입력

2. DNS 설정

A 레코드:
Name: @
Value: [Firebase IP]

TXT 레코드:
Name: @
Value: [인증 코드]

3. SSL 자동 발급

• Firebase가 자동으로 SSL 인증서 발급

• HTTPS 강제 적용

• 무료!

🐛 트러블슈팅

문제 1: firebase open hosting:site 에러

Error: It looks like you haven't created a Realtime Database
instance in this project before.

• firebase open 명령어가 Realtime Database 확인

• 우리 프로젝트는 Firestore만 사용

# 브라우저에서 직접 URL 접속
https://bookmark-manager-24e55.web.app

# macOS
open https://bookmark-manager-24e55.web.app

# Linux
xdg-open https://bookmark-manager-24e55.web.app

# Windows
start https://bookmark-manager-24e55.web.app

문제 2: 빌드 파일이 배포 안 됨

# 빌드 먼저 실행
flutter build web --release

# 그 다음 배포
firebase deploy --only hosting

문제 3: 로그인 후 리다이렉트 안 됨

Firebase Console → Authentication → Settings → Authorized domains
→ bookmark-manager-24e55.web.app 추가

문제 4: CORS 에러

Access to fetch at 'https://...' from origin
'https://bookmark-manager-24e55.web.app'
has been blocked by CORS policy

# firebase.json에 headers 추가
{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

📊 배포 결과 요약

성공적으로 배포된 내용

• Flutter 웹 앱 (최적화됨)

• 반응형 UI

• Material Design 3

• 사용자 인증 (Firebase Auth)

• 북마크 CRUD (Firestore)

• 실시간 동기화

• 검색 및 필터링

• URL 열기

• Tree-shaking으로 99.4% 크기 감소

• CDN으로 빠른 로딩

• SSL 자동 적용

• https://bookmark-manager-24e55.web.app

• https://bookmark-manager-24e55.firebaseapp.com

🔍 미완성/개선 필요 사항

1. Android/iOS 빌드 미완료

• Android APK 빌드

• 서명 키 생성

• Google Play 배포

• iOS 빌드 (macOS 필요)

• App Store 배포

2. 보안 규칙 업데이트

// Firestore 보안 규칙이 프로덕션용인지 확인
// Firebase Console → Firestore → 규칙

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /bookmarks/{bookmarkId} {
      allow read, write: if request.auth != null
                         && request.auth.uid == resource.data.userId;
      allow create: if request.auth != null
                    && request.auth.uid == request.resource.data.userId;
    }
  }
}

3. 환경 변수 관리

• API 키 보호

• 환경별 설정 분리 (dev, staging, prod)

• .env 파일 사용

4. 모니터링

• Firebase Analytics 설정

• Crashlytics 연동

• Performance Monitoring

5. SEO 최적화

• Meta 태그 추가

• Open Graph 설정

• Sitemap 생성

6. 오프라인 지원

• Service Worker 설정

• 캐싱 전략

• 오프라인 UI

💡 배우면서 느낀 점

Firebase Hosting의 장점

firebase deploy --only hosting

• CDN으로 전 세계 빠른 속도

• 자동 캐싱

• 무료!

• Firebase 서비스들과 완벽한 통합

• 같은 콘솔에서 모든 것 관리

• 버전 관리 자동

Flutter 웹의 인상

• 하나의 코드베이스로 웹 지원

• Material Design이 웹에서도 동일

• Hot Reload로 빠른 개발

• 초기 로딩 시간 (2-3초)

• SEO 약함

• 번들 크기 큼

Tree-shaking의 놀라움

1.6MB → 9.6KB (99.4% 감소)

📦 최종 프로젝트 정보

패키지 버전

dependencies:
  flutter_riverpod: ^3.0.3
  go_router: ^16.2.4
  firebase_core: ^4.1.1
  firebase_auth: ^6.1.0
  cloud_firestore: ^6.0.2
  url_launcher: ^6.3.2
  fluttertoast: ^9.0.0
  intl: ^0.20.2

빌드 정보

Flutter: 3.35.4
Dart: 3.9.2
빌드 시간: 12.5초
최종 파일: 34개

🎓 학습 정리

이번 글에서 배운 것

• ✅ Firebase Hosting 초기화

• ✅ Flutter 웹 빌드 옵션

• ✅ 배포 명령어

• ✅ 설정 파일 작성

• ✅ Tree-shaking

• ✅ 캐싱 전략

• ✅ CDN 활용

• ✅ 버전 관리

• ✅ 롤백 방법

• ✅ 트러블슈팅

🎉 마무리

1. ✅ Firebase 프로젝트 설정

2. ✅ Flutter 프로젝트 구조 설계

3. ✅ Riverpod 상태 관리

4. ✅ Firebase Authentication

5. ✅ Firestore CRUD

6. ✅ Firebase Hosting 배포 ← 완료!

https://bookmark-manager-24e55.web.app