라이브 사이트에 배포하기 전에 변경 사항을 확인하고 테스트할 수 있습니다. Firebase 호스팅을 사용하면 로컬에서 변경사항을 확인 및 테스트하고 에뮬레이션된 백엔드 프로젝트 리소스와 상호작용할 수 있습니다. 팀원이 변경 사항을 확인하고 테스트해야 하는 경우 호스팅은 사이트에 대한 공유 가능한 임시 미리보기 URL을 생성할 수 있습니다. 풀 요청에서 배포하기 위한 GitHub 통합 도 지원합니다.
시작하기 전에
호스팅 시작하기 페이지 에 나열된 단계, 구체적으로 다음 작업을 완료하세요.
- Firebase CLI를 최신 버전으로 설치하거나 업데이트합니다.
- 로컬 프로젝트 디렉터리(앱 콘텐츠 포함)를 Firebase 프로젝트에 연결합니다.
선택적으로 앱의 호스팅 콘텐츠 및 구성을 배포할 수 있지만 이 페이지의 단계에 대한 전제 조건은 아닙니다.
1단계: 로컬에서 테스트
빠르게 반복하거나 앱이 에뮬레이트된 백엔드 프로젝트 리소스와 상호 작용하도록 하려면 호스팅 콘텐츠 및 구성을 로컬에서 테스트할 수 있습니다. 로컬에서 테스트할 때 Firebase는 로컬에서 호스팅되는 URL에서 웹 앱을 제공합니다.
호스팅은 앱이 에뮬레이션된 호스팅 콘텐츠 및 구성은 물론 선택적으로 에뮬레이션된 프로젝트 리소스(함수, 데이터베이스 및 규칙)와 상호작용할 수 있도록 하는 Firebase 로컬 에뮬레이터 도구 모음 의 일부입니다.
(선택 사항) 기본적으로 로컬에서 호스팅되는 앱은 에뮬레이션 되지 않은 실제 프로젝트 리소스(함수, 데이터베이스, 규칙 등)와 상호 작용합니다. 대신 선택적으로 구성한 에뮬레이트된 프로젝트 리소스를 사용하도록 앱을 연결할 수 있습니다. 자세히 알아보기: 실시간 데이터베이스 | 클라우드 파이어스토어 | 클라우드 기능
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
firebase emulators:start
CLI에서 반환한 로컬 URL(일반적으로
http://localhost:5000
)에서 웹 앱을 엽니다.변경 사항으로 로컬 URL을 업데이트하려면 브라우저를 새로 고치십시오.
다른 로컬 장치에서 테스트
기본적으로 에뮬레이터는 localhost
의 요청에만 응답합니다. 즉, 컴퓨터의 웹 브라우저에서 호스팅된 콘텐츠에 액세스할 수 있지만 네트워크의 다른 장치에서는 액세스할 수 없습니다. 다른 로컬 기기에서 테스트하려면 다음과 같이 firebase.json
을 구성하세요.
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
firebase serve
를 사용할 때 앱은 호스팅 콘텐츠 및 구성(및 선택적으로 기능)에 대해 에뮬레이트된 백엔드와 상호작용하지만 다른 모든 프로젝트 리소스에 대한 실제 백엔드와 상호작용합니다.
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
firebase serve --only hosting
CLI에서 반환한 로컬 URL(일반적으로
http://localhost:5000
)에서 웹 앱을 엽니다.변경 사항으로 로컬 URL을 업데이트하려면 브라우저를 새로 고치십시오.
firebase serve
를 사용하여 다른 로컬 기기에서 테스트
기본적으로 firebase serve
는 localhost
의 요청에만 응답합니다. 즉, 컴퓨터의 웹 브라우저에서 호스팅된 콘텐츠에 액세스할 수 있지만 네트워크의 다른 장치에서는 액세스할 수 없습니다. 다른 로컬 장치에서 테스트하려면 다음과 같이 --host
플래그를 사용하십시오.
firebase serve --host 0.0.0.0 // accepts requests to any host
2단계: 미리보기 및 공유
라이브로 전환하기 전에 다른 사람이 웹 앱의 변경 사항을 볼 수 있도록 하려면 미리 보기 채널을 사용할 수 있습니다.
미리보기 채널에 배포하면 Firebase는 공유 가능한 임시 URL인 '미리보기 URL'에서 웹 앱을 제공합니다. 미리보기 URL을 사용할 때 웹 앱은 모든 프로젝트 리소스에 대해 실제 백엔드와 상호 작용합니다.
미리보기 URL은 추측하기 어렵지만(임의 해시가 포함되어 있기 때문에) 공개됩니다. 따라서 URL을 아는 사람은 누구나 액세스할 수 있습니다.
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
firebase hosting:channel:deploy CHANNEL_ID
CHANNEL_ID 를 공백이 없는 문자열로 바꿉니다(예:
feature_mission-2-mars
). 이 ID는 미리보기 채널과 연결된 미리보기 URL을 구성하는 데 사용됩니다.CLI에서 반환된 미리보기 URL에서 웹 앱을 엽니다. 다음과 같이 표시됩니다.
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
변경사항으로 미리보기 URL을 업데이트하려면 동일한 명령을 다시 실행하십시오. 명령에서 동일한
CHANNEL_ID
를 지정해야 합니다.
채널 만료 설정 방법을 포함하여 미리보기 채널 관리 에 대해 알아보세요.
Firebase 호스팅은 풀 요청에 대한 변경 사항을 커밋할 때 자동으로 미리보기 URL을 생성하고 업데이트하는 GitHub 작업을 지원합니다. 이 GitHub 작업을 설정하고 사용 하는 방법을 알아보세요.
3단계: 라이브 배포
변경 사항을 전 세계와 공유할 준비가 되면 호스팅 콘텐츠 및 구성을 라이브 채널에 배포하세요. Firebase는 사용 사례에 따라 이 단계에 대해 몇 가지 다른 옵션을 제공합니다(아래 옵션 참조).
옵션 1: 미리보기 채널에서 라이브 채널로 복제
이 옵션은 미리 보기 채널에서 테스트한 정확한 콘텐츠 및 구성을 라이브 채널에 배포하고 있다는 확신을 줍니다. 버전 복제 에 대해 자세히 알아보세요.
임의의 디렉터리에서 다음 명령을 실행합니다.
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
각 자리 표시자를 다음으로 바꿉니다.
SOURCE_SITE_ID 및 TARGET_SITE_ID : 채널이 포함된 호스팅 사이트의 ID입니다.
- 기본 호스팅 사이트의 경우 Firebase 프로젝트 ID를 사용하세요.
- 동일한 Firebase 프로젝트 또는 다른 Firebase 프로젝트에 있는 사이트를 지정할 수 있습니다.
SOURCE_CHANNEL_ID : 라이브 채널에 배포하려는 버전을 현재 제공하고 있는 채널의 식별자입니다.
- 라이브 채널의 경우
live
를 채널 ID로 사용하십시오.
- 라이브 채널의 경우
변경 사항을 확인합니다 (다음 단계).
옵션 2: 로컬 프로젝트 디렉터리에서 라이브 채널로 배포
이 옵션은 라이브 채널에 특정한 구성을 조정하거나 미리 보기 채널을 사용하지 않은 경우에도 배포할 수 있는 유연성을 제공합니다.
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
firebase deploy --only hosting
변경 사항을 확인합니다 (다음 단계).
4단계: 라이브 사이트에서 변경 사항 보기
위의 두 옵션 모두 호스팅 콘텐츠 및 구성을 다음 사이트에 배포합니다.
기본 호스팅 사이트 및 추가 호스팅 사이트에 대한 Firebase 프로비저닝 하위 도메인:
SITE_ID .web.app
(예:PROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(예:PROJECT_ID .firebaseapp.com
)호스팅 사이트에 연결한 모든 맞춤 도메인
배포를 특정 호스팅 사이트로 제한하려면 CLI 명령에서 배포 대상을 지정합니다 .
기타 배포 활동 및 정보
배포에 대한 설명 추가
선택적으로 배치에 설명을 추가할 수 있습니다. 이 설명은 Firebase 콘솔의 호스팅 대시보드 에 다른 배포 정보와 함께 표시됩니다. 예를 들어:
firebase deploy --only hosting -m "Deploying the best new feature ever."
배포 전 및 배포 후 스크립트 작업 추가
선택적으로 셸 스크립트를 firebase deploy
명령어에 연결하여 사전 배포 또는 사후 배포 작업을 수행할 수 있습니다. 예를 들어 배포 후 후크는 관리자에게 새 사이트 콘텐츠 배포를 알릴 수 있습니다. 자세한 내용은 Firebase CLI 설명서 를 참조하세요.
배포된 콘텐츠 캐싱
정적 콘텐츠 에 대한 요청이 있을 때 Firebase 호스팅은 자동으로 콘텐츠를 CDN에 캐시합니다. 사이트의 콘텐츠를 재배포하면 Firebase는 새 요청이 새 콘텐츠를 수신할 수 있도록 CDN 전체에서 캐시된 모든 정적 콘텐츠 를 자동으로 지웁니다.
동적 콘텐츠의 캐싱을 구성할 수 있습니다.
HTTPS를 통한 게재
외부 스크립트를 포함하여 Firebase 호스팅에서 호스팅되지 않는 모든 외부 리소스가 SSL(HTTPS)을 통해 로드되는지 확인하세요. 대부분의 브라우저는 사용자가 "혼합 콘텐츠"(SSL 및 비SSL 트래픽)를 로드하는 것을 허용하지 않습니다.
다음 단계
GitHub와 통합 하고 GitHub Action을 설정 하여 미리 본 콘텐츠를 반복합니다.
추가 호스팅 기능에 대해 알아보십시오.
Firebase CLI 에 대한 전체 문서를 살펴보세요.
앱 실행 준비:
- Google Cloud Console에서 프로젝트에 대한 예산 알림 을 설정하세요.
- Firebase Console에서 사용량 및 결제 대시보드 를 모니터링하여 여러 Firebase 서비스에서 프로젝트 사용량을 전체적으로 파악하세요. 더 자세한 사용 정보를 보려면 호스팅 사용 대시보드 를 방문할 수도 있습니다.
- Firebase 출시 체크리스트 를 검토하세요.