라이브 사이트에 배포하기 전에 변경 사항을보고 테스트해야합니다. Firebase 호스팅을 사용하면 로컬에서 변경 사항을보고 테스트하고 에뮬레이션 된 백엔드 프로젝트 리소스와 상호 작용할 수 있습니다. 팀원이 변경 사항을보고 테스트해야하는 경우 호스팅은 사이트에 대한 공유 가능한 임시 미리보기 URL을 만들 수 있습니다. 풀 요청에서 배포하기 위해 GitHub 통합 도 지원합니다.
시작하기 전에
호스팅 시작 페이지 에 나열된 단계, 특히 다음 작업을 완료합니다.
- Firebase CLI를 최신 버전으로 설치하거나 업데이트합니다.
- 로컬 프로젝트 디렉터리 (앱 콘텐츠 포함)를 Firebase 프로젝트에 연결합니다.
앱의 호스팅 콘텐츠 및 구성을 선택적으로 배포 할 수 있지만이 페이지의 단계에 대한 전제 조건은 아닙니다.
1 단계 : 로컬에서 테스트
빠르게 반복하거나 앱이 에뮬레이트 된 백엔드 프로젝트 리소스와 상호 작용하도록하려는 경우 호스팅 콘텐츠를 테스트하고 로컬에서 구성 할 수 있습니다. 로컬에서 테스트 할 때 Firebase는 로컬에서 호스팅되는 URL에서 웹 앱을 제공합니다.
호스팅은 Firebase 로컬 에뮬레이터 제품군 의 일부로, 앱이 에뮬레이트 된 호스팅 콘텐츠 및 구성은 물론 선택적으로 에뮬레이트 된 프로젝트 리소스 (함수, 데이터베이스, 규칙)와 상호 작용할 수 있도록합니다. Local Emulator Suite는 아직 에뮬레이션 된 저장소를 지원하지 않습니다.
(선택 사항) 기본적으로 로컬에서 호스팅되는 앱은 에뮬레이션이 아닌 실제 프로젝트 리소스 (함수, 데이터베이스, 규칙 등)와 상호 작용합니다. 대신 선택적으로 앱을 연결하여 구성한 에뮬레이트 된 프로젝트 리소스를 사용할 수 있습니다. 자세히 알아보기 : 실시간 데이터베이스 | Cloud Firestore | 클라우드 기능
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
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 호스팅은 pull 요청에 대한 변경 사항을 커밋 할 때 미리보기 URL을 자동으로 생성하고 업데이트하는 GitHub 작업을 지원합니다. 이 GitHub 작업 을 설정하고 사용 하는 방법을 알아 봅니다.
3 단계 : 실시간 배포
변경 사항을 전 세계와 공유 할 준비가되면 호스팅 콘텐츠 및 구성을 라이브 채널에 배포하십시오. Firebase는 사용 사례에 따라이 단계에 대해 몇 가지 다른 옵션을 제공합니다 (아래 옵션 참조).
옵션 1 : 미리보기 채널에서 라이브 채널로 복제
이 옵션은 미리보기 채널에서 테스트 한 정확한 콘텐츠 및 구성을 라이브 채널에 배포하고 있다는 확신을 제공합니다. 복제 버전 에 대해 자세히 알아보십시오.
임의의 디렉토리에서 다음 명령을 실행하십시오.
firebase hosting:clone SOURCE_SITE:SOURCE_CHANNEL_ID TARGET_SITE:live
각 자리 표시자를 다음으로 바꿉니다.
SOURCE_SITE 및 TARGET_SITE : 채널이 포함 된 호스팅 사이트의 이름입니다.
- 기본 호스팅 사이트의 경우 Firebase 프로젝트 ID를 사용하세요.
- 동일한 Firebase 프로젝트 또는 다른 Firebase 프로젝트에있는 사이트를 지정할 수 있습니다.
SOURCE_CHANNEL_ID : 현재 라이브 채널에 배포하려는 버전을 제공하고있는 채널의 식별자입니다.
- 라이브 채널의 경우
live
를 채널 ID로 사용합니다.
- 라이브 채널의 경우
변경 사항을 확인합니다 (다음 단계).
옵션 2 : 로컬 프로젝트 디렉터리에서 라이브 채널로 배포
이 옵션은 라이브 채널에 특정한 구성을 조정하거나 미리보기 채널을 사용하지 않은 경우에도 배포 할 수있는 유연성을 제공합니다.
로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.
firebase deploy --only hosting
변경 사항을 확인합니다 (다음 단계).
4 단계 : 라이브 사이트에서 변경 사항보기
위의 두 옵션 모두 호스팅 콘텐츠 및 구성을 다음 사이트에 배포합니다.
기본 호스팅 사이트 및 추가 호스팅 사이트에 대한 Firebase 프로비저닝 하위 도메인 :
SITE_NAME .web.app
(예 :PROJECT_ID .web.app
)
SITE_NAME .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 콘솔에서 프로젝트에 대한 예산 알림 을 설정합니다.
- Firebase 콘솔에서 사용량 및 결제 대시 보드 를 모니터링하세요. 호스팅 사용량 대시 보드를 모니터링 할 수도 있습니다.
- Firebase 출시 체크리스트를 검토합니다.