Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

예약된 URL에서 Firebase SDK 로드

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Firebase 호스팅은 사이트에서 /__ 로 시작하는 URL을 예약합니다. 이 예약된 네임스페이스를 사용하면 Firebase 호스팅과 함께 다른 Firebase 제품을 더 쉽게 사용할 수 있습니다.

이러한 예약된 URL은 Firebase에 배포할 때( firebase deploy ) 또는 로컬 서버에서 앱을 실행할 때( firebase serve ) 사용할 수 있습니다.

예약된 URL에 대한 스크립트 추가

Firebase 호스팅은 배포 시 HTTP/2를 통해 제공되므로 동일한 출처에서 파일을 로드하여 성능을 높일 수 있습니다. Firebase 호스팅은 다음과 같은 형식의 특수 URL에서 모든 버전의 Firebase JavaScript SDK를 제공합니다.

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

앱에서 사용하는 라이브러리 만 로드하는 것이 좋습니다. 예를 들어 인증 및 Cloud Firestore만 포함하려면 Firebase 서비스를 사용하기 전에 <body> 태그 하단에 다음 스크립트를 추가하세요.

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
</body>

SDK 자동 구성

자동 SDK 구성을 사용하면 단일 코드베이스에서 여러 환경(예: 개발, 스테이징 및 프로덕션)을 쉽게 관리할 수 있습니다. 예약된 호스팅 URL을 사용하여 동일한 코드를 여러 Firebase 프로젝트에 배포할 수 있습니다.

SDK 자체를 호스팅하는 것 외에도 예약된 네임스페이스는 호스팅 사이트와 연결된 Firebase 프로젝트용 SDK를 초기화하는 데 필요한 모든 구성도 제공합니다. 이 Firebase 구성 및 SDK 초기화는 직접 포함할 수 있는 스크립트에서 제공됩니다.

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

Firebase에 배포하거나 앱을 로컬에서 테스트할 때 이 스크립트는 활성 Firebase 프로젝트 에 대해 Firebase JavaScript SDK를 자동으로 구성하고 SDK를 초기화합니다.

초기화를 직접 제어하려는 경우 Firebase 구성 값을 JSON 형식으로도 사용할 수 있습니다.

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

사용 가능한 Firebase JS SDK(예약된 호스팅 URL에서)

Firebase 제품 라이브러리 참조(예약된 URL)
Firebase 코어
(필수의)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
해석학
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
앱 체크
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
입증
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
클라우드 파이어스토어
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Firebase 클라이언트 SDK용 Cloud Functions
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Firebase 설치
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
클라우드 메시징
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

클라우드 메시징을 사용하는 최적의 환경을 위해 Analytics용 Firebase SDK도 추가하세요.

클라우드 스토리지
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
성능 모니터링
( 베타 릴리스)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
실시간 데이터베이스
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
원격 구성
( 베타 릴리스)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

원격 구성을 사용하는 최적의 환경을 위해 Analytics용 Firebase SDK도 추가하세요.

Firebase 자바스크립트 SDK
(전체 SDK)
<script src="/__/firebase/8.10.1/firebase.js"></script>

인증 도우미

Firebase 인증 은 예약된 네임스페이스를 사용하여 특수 JavaScript 및 HTML을 제공하여 OAuth를 통해 제공업체와의 인증을 완료합니다. 이렇게 하면 각 Firebase 프로젝트에 고유한 Firebase 하위 도메인이 있어 Firebase 인증의 보안이 강화됩니다.

또한 이를 통해 firebase.initializeApp firebase.initializeApp()authDomain 옵션에 고유한 맞춤 도메인을 사용할 수 있습니다. Firebase 호스팅용 맞춤 도메인을 구성하는 경우 Firebase SDK를 초기화할 때 해당 맞춤 도메인( web.app 또는 firebaseapp.com 하위 도메인 대신)을 지정할 수도 있습니다.

예약된 URL 및 서비스 워커

PWA(프로그레시브 웹 앱)를 빌드하는 경우 "탐색 폴백"이 있는 서비스 워커를 만들고 사전 캐시된 항목 목록과 일치하지 않는 경우 기본적으로 특정 URL을 렌더링할 수 있습니다.

sw-precache 라이브러리를 사용하는 경우 예약된 네임스페이스를 제외하는 탐색 폴백 화이트리스트 설정을 추가할 수 있습니다.

{
  navigateFallbackWhitelist: [/^(?!\/__).*/]
}

일반적으로 이중 밑줄 네임스페이스는 Firebase용으로 예약되어 있으며 서비스 워커에서 이러한 요청을 가로채면 안 된다는 점을 기억하세요.