Firebase Hosting
웹 사이트 개발을 마쳤다면, 웹 사이트를 호스팅할 차례이다.
웹 호스팅(Hosting)이란?
A web hosting service (often shortened to web host) is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. // 출처 : wikipedia
웹 호스팅은 개인이나 기관이 만든 웹사이트를 WWW(World Wide Web)를 통해 접근가능하도록 하는 것이다.
웹 호스팅의 유형
- Shared Hosting (공유 호스팅)
- VPS Hosting (Virtual Private Server Hosting, 가상 사설서버 호스팅)
- Dedicated Hosting (전용 호스팅)
- Cloud Hosting (클라우드 호스팅)
각각에 대한 자세한 설명은 아래 사이트를 참조하길 바란다.
개발한 웹사이트를 Firebase를 통해 호스팅할 계획이라, Firebase Hosting을 중점적으로 연구해보았다.
Firebase Hosting 주요 기능
- SSL(Secure Sockets Layer, 보안 소켓 계층) 기본 제공
- Express.js 마이크로서비스, API 호스팅 (정적/동적 콘텐츠 지원)
- CDN(Content Delivery Network, 콘텐츠 전송망)로 콘텐츠 전송
- Firebase CLI 지원
- Git 연동 가능
- Firebase 다른 서비스(Firestore, Storage, Authentication, FCM, Cloud Functions와 한 계정으로 연동 관리 가능
Firebase Hosting 구현 방법
1 Firebase 프로젝트 생성 및 앱 등록
위 Firebase Console에서 프로젝트를 만들고, 해당 프로젝트의 개요 페이지에서 만들어 놓은 웹 앱을 추가한다. Firebase 호스팅을 설정할 수 있다. Firebase 웹 앱에 연결할 사이트를 드롭다운 목록에서 선택하고 앱 등록을 클릭하면 앱 등록 및 설정이 완료된다.
2 Firebase 구성 객체 추가
앱을 추가할 때, 웹 앱에 Firebase 추가를 선택하면 스니펫을 복사할 수 있다. 이를 웹 앱 HTML에 추가해야 Firebase 호스팅을 사용할 수 있다.
예시 :
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};예시 (값) :
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
measurementId: "G-8GSGZQ44ST"
};3 Firebase CLI 설치
Firebase CLI는 터미널에서 설치 가능하다.
npm install -g firebase-tools4 프로젝트 Firebase 초기화
로컬(컴퓨터)의 앱 디렉터리로 이동하여 다음을 실행한다.
firebase init hosting그러면 로컬 앱 디렉터리를 Firebase로 연결하고, 호스팅에 필요한 firebase.json파일을 생성한다. 공개 static 파일(HTML, CSS, JS 등)이 포함된 디렉터리를 지정하고, Firebase는 ‘public’이라는 이름을 가진 디렉터리를 찾아 호스팅한다.
5 사이트에 배포
같은 디렉터리에서 다음을 실행하면 콘텐츠와 호스팅 구성을 Firebase 호스팅에 배포한다.
firebase deploy --only hosting그러면 우선은 웹 앱이 PROJECT_ID.web.app 또는 PROJECT_ID.firebaseapp.com 하위 도메인에 배포된다.
6 커스텀 도메인 연결
프로젝트의 Firebase 호스팅 페이지에서 도메인 연결 마법사를 통해 커스텀된 도메인을 연결할 수 있다.
유의 사항 :
- 각 커스텀 도메인은 하나의 호스팅 사이트에만 연결할 수 있음
- 각 커스텀 도메인은 SSL 인증서 발급 제한으로 인해 최상위 도메인당 하위 도메인을 20개로 제한됨
도메인을 연결하고 소유권 인증을 마치면, 24시간 내에 SSL 인증서가 프로비저닝되어 글로벌 CDN을 통해 배포된다.
참고 사이트
