Firebase Hosting은 사이트에서 /__로 시작하는 URL을 예약합니다. 이 예약된 네임스페이스를 통해 Firebase Hosting과 함께 다른 Firebase 제품을 보다 쉽게 사용할 수 있습니다.
이 예약된 URL은 Firebase로 배포하거나(firebase deploy) 로컬 서버에서 앱을 실행하는 경우(firebase serve)에 모두 사용할 수 있습니다.
예약된 URL에 스크립트 추가
Firebase Hosting은 배포 시 HTTP/2를 통해 제공되므로 동일한 출처의 파일을 로드하여 성능을 높일 수 있습니다. Firebase Hosting은 다음과 같은 형식의 특수한 URL로 Firebase JavaScript SDK 버전 8을 제공합니다.
/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js
앱에서 사용하는 라이브러리만 로드하는 것이 좋습니다. 예를 들어 Authentication 및 Cloud Firestore만 포함하려면 <body> 태그 하단에 다음 스크립트를 추가하세요. 단, Firebase 서비스를 사용하기 전에 진행해야 합니다.
<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 구성을 통해 단일 코드베이스에서 개발, 스테이징, 프로덕션 등의 여러 환경을 쉽게 관리할 수 있습니다. 예약된 Hosting URL을 사용하면 여러 Firebase 프로젝트에 동일한 코드를 배포할 수 있습니다.
예약된 네임스페이스는 SDK 자체를 호스팅할 뿐 아니라 Hosting 사이트와 연결된 Firebase 프로젝트의 SDK를 초기화하는 데 필요한 모든 구성을 제공합니다. 이 Firebase 구성 및 SDK 초기화는 직접 포함할 수 있는 스크립트로 제공됩니다.
<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>
Firebase에 배포하거나 로컬에서 앱을 테스트할 때 이 스크립트는 활성 Firebase 프로젝트에 대한 Firebase JavaScript SDK를 자동으로 구성하고 초기화합니다.
초기화를 직접 제어하려는 경우 JSON 형식의 Firebase 구성 값을 사용할 수도 있습니다.
fetch('/__/firebase/init.json').then(async response => {
firebase.initializeApp(await response.json());
});
사용 가능한 Firebase JS SDK(예약된 Hosting URL에서 추가)
| Firebase 제품 | 라이브러리 참조(예약된 URL) |
|---|---|
| Firebase Core (필수) |
<script src="/__/firebase/8.10.1/firebase-app.js"></script> |
| Analytics | <script src="/__/firebase/8.10.1/firebase-analytics.js"></script> |
| App Check | <script src="/__/firebase/8.10.1/firebase-app-check.js"></script> |
| Authentication | <script src="/__/firebase/8.10.1/firebase-auth.js"></script> |
| Cloud Firestore | <script src="/__/firebase/8.10.1/firebase-firestore.js"></script> |
| Cloud Functions for Firebase Client SDK | <script src="/__/firebase/8.10.1/firebase-functions.js"></script> |
| Firebase 설치 | <script src="/__/firebase/8.10.1/firebase-installations.js"></script> |
| Cloud Messaging | <script src="/__/firebase/8.10.1/firebase-messaging.js"></script> Cloud Messaging 사용 환경을 최적화하려면 Analytics용 Firebase SDK도 추가하세요. |
| Cloud Storage | <script src="/__/firebase/8.10.1/firebase-storage.js"></script> |
|
Performance Monitoring
(베타 출시 버전) |
<script src="/__/firebase/8.10.1/firebase-performance.js"></script> |
| Realtime Database | <script src="/__/firebase/8.10.1/firebase-database.js"></script> |
| Remote Config
(베타 출시 버전) |
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script> Remote Config 사용 환경을 최적화하려면 Analytics용 Firebase SDK도 추가하세요. |
| Firebase JavaScript SDK (전체 SDK) |
<script src="/__/firebase/8.10.1/firebase.js"></script> |
인증 도우미
Firebase Authentication은 예약된 네임스페이스를 사용하여 OAuth를 통해 제공업체와의 인증을 완료하는 특수한 JavaScript 및 HTML을 제공합니다. 이를 통해 각 Firebase 프로젝트는 고유한 Firebase 하위 도메인을 확보하여 Firebase Authentication의 보안을 강화할 수 있습니다.
또한 firebase.initializeApp()의 authDomain 옵션에 커스텀 도메인을 사용할 수 있습니다. Firebase Hosting에 커스텀 도메인을 구성하면 Firebase SDK를 초기화할 때 web.app 또는 firebaseapp.com 하위 도메인 대신 커스텀 도메인을 지정할 수도 있습니다. 커스텀 도메인 사용에 관한 자세한 내용은 signInWithRedirect 사용 권장사항을 참조하세요.
예약된 URL 및 서비스 워커
프로그레시브 웹 앱(PWA)을 개발하는 경우 미리 캐시된 항목 목록과 일치하지 않을 때 특정 URL을 기본적으로 렌더링하는 '탐색 대체' 기능을 가진 서비스 워커를 만들 수 있습니다.
sw-precache 라이브러리를 사용하는 경우 예약된 네임스페이스를 제외하는 탐색 대체 허용 목록 설정을 추가할 수 있습니다.
{
navigateFallbackWhitelist: [/^(?!\/__).*/]
}
일반적으로 이중 밑줄 네임스페이스는 Firebase용으로 예약되므로 서비스 워커에서 이러한 요청을 가로채서는 안 된다는 점을 유의하시기 바랍니다.