호스팅 서비스	SSL	CDN	무료 tier	Flutter 최적화
Firebase Hosting	✅	✅	✅	✅
Vercel	✅	✅	✅	⚠️
Netlify	✅	✅	✅	⚠️
GitHub Pages	✅	❌	✅	❌

1️⃣ Firebase Hosting 초기화

명령어 실행


firebase init hosting

설정 과정

1. 프로젝트 선택


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

선택 이유: 이미 만든 Firebase 프로젝트 사용

2. Public 디렉토리 설정


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

왜 build/web?:

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

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

3. SPA(Single Page Application) 설정


? Configure as a single-page app?
→ Yes

SPA란?:

모든 라우팅을 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"
  }
}

역할: 기본 Firebase 프로젝트 지정

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.

Wasm이란?:

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)

Tree-shaking이란?:

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

번들 크기 최소화

로딩 속도 향상

결과:


아이콘 폰트: 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

34개 파일:

HTML, JavaScript, CSS

이미지, 폰트

설정 파일

2. 업로드 및 최종화


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

Firebase 처리:

파일 해싱 및 캐싱

CDN 배포 (전 세계 서버)

버전 관리

3. 배포 완료


✔  Deploy complete!

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

자동 제공되는 URL 2개:

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

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 (최적화 버전)

위치: 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년
      }
    ]
  }
]

이미지 파일: 1년 캐싱

변경 가능성 낮음

로딩 속도 향상

트래픽 절약

JS/CSS 파일: 1년 캐싱

Flutter가 해시 기반 파일명 사용

변경 시 자동으로 새 파일명

캐시 무효화 자동 처리

JSON/XML 파일: 1시간 캐싱

자주 변경될 수 있음

짧은 캐시 시간

6️⃣ 배포 후 관리

Firebase Console 확인

Hosting 대시보드:

Firebase Console → Hosting

배포 내역 확인

트래픽 통계

확인 가능한 정보:

배포 시간

파일 개수

총 용량

방문자 수

트래픽

재배포 (업데이트)

코드 수정 후


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

# 2. 배포
firebase deploy --only hosting

자동 처리:

변경된 파일만 업로드

버전 관리

이전 버전 자동 백업

롤백 (이전 버전 복구)

Firebase Console에서


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

CLI로 롤백:


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: 빌드 파일이 배포 안 됨

증상: 빈 화면 또는 404 에러

원인: build/web 폴더 없음

해결:


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

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

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

원인: Firebase Console에서 승인된 도메인 미등록

해결:


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 설정 문제

해결:


# 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 자동 적용

✅ URL:

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 최적화

현재: SPA이므로 SEO 약함

개선 방법:

Meta 태그 추가

Open Graph 설정

Sitemap 생성

6. 오프라인 지원

개선 필요:

Service Worker 설정

캐싱 전략

오프라인 UI

💡 배우면서 느낀 점

Firebase Hosting의 장점

1. 간단함:


firebase deploy --only hosting

단 한 줄로 배포 완료!

2. 빠름:

CDN으로 전 세계 빠른 속도

자동 캐싱

무료!

3. 통합:

Firebase 서비스들과 완벽한 통합

같은 콘솔에서 모든 것 관리

버전 관리 자동

Flutter 웹의 인상

장점:

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

Material Design이 웹에서도 동일

Hot Reload로 빠른 개발

단점:

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

SEO 약함

번들 크기 큼

Tree-shaking의 놀라움


1.6MB → 9.6KB (99.4% 감소)

Flutter의 최적화 능력이 인상적이었습니다!

📦 최종 프로젝트 정보

패키지 버전


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 활용

관리:

✅ 버전 관리

✅ 롤백 방법

✅ 트러블슈팅

🎉 마무리

드디어 완성! 🎊

처음 시작부터 배포까지, 완전히 동작하는 웹 앱을 만들었습니다!

여정 요약:

✅ Firebase 프로젝트 설정

✅ Flutter 프로젝트 구조 설계

✅ Riverpod 상태 관리

✅ Firebase Authentication

✅ Firestore CRUD

✅ Firebase Hosting 배포 ← 완료!

실제 사용 가능한 앱:


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

Contents

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

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

{ "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" } ] } ] } }

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

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; } } }