Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

로컬에서 테스트하고 변경 사항을 공유 한 다음 라이브 배포

라이브 사이트에 배포하기 전에 변경 사항을보고 테스트해야합니다. Firebase 호스팅을 사용하면 로컬에서 변경 사항을보고 테스트하고 에뮬레이션 된 백엔드 프로젝트 리소스와 상호 작용할 수 있습니다. 팀원이 변경 사항을보고 테스트해야하는 경우 Hosting은 사이트에 대해 공유 가능한 임시 미리보기 URL을 만들 수 있습니다. 풀 요청에서 배포하기 위해 GitHub 통합 도 지원합니다.

시작하기 전에

호스팅 시작 페이지 에 나열된 단계, 특히 다음 작업을 완료합니다.

  1. Firebase CLI를 최신 버전으로 설치하거나 업데이트합니다.
  2. 로컬 프로젝트 디렉터리 (앱 콘텐츠 포함)를 Firebase 프로젝트에 연결합니다.

앱의 호스팅 콘텐츠 및 구성을 선택적으로 배포 할 수 있지만이 페이지의 단계에 대한 전제 조건은 아닙니다.

1 단계 : 로컬에서 테스트

빠르게 반복하거나 앱이 에뮬레이트 된 백엔드 프로젝트 리소스와 상호 작용하도록하려는 경우 호스팅 콘텐츠를 테스트하고 로컬에서 구성 할 수 있습니다. 로컬에서 테스트 할 때 Firebase는 로컬에서 호스팅되는 URL에서 웹 앱을 제공합니다.

호스팅은 Firebase 로컬 에뮬레이터 제품군 의 일부로, 앱이 에뮬레이트 된 호스팅 콘텐츠 및 구성은 물론 선택적으로 에뮬레이트 된 프로젝트 리소스 (함수, 데이터베이스, 규칙)와 상호 작용할 수 있도록합니다. Local Emulator Suite는 아직 에뮬레이션 된 Cloud Storage를 지원하지 않습니다.

  1. (선택 사항) 기본적으로 로컬에서 호스팅되는 앱은 에뮬레이션이 아닌 실제 프로젝트 리소스 (함수, 데이터베이스, 규칙 등)와 상호 작용합니다. 대신 선택적으로 앱을 연결하여 구성한 에뮬레이트 된 프로젝트 리소스를 사용할 수 있습니다. 자세히 알아보기 : 실시간 데이터베이스 | Cloud Firestore | 클라우드 기능

  2. 로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.

    firebase emulators:start

  3. CLI가 반환 한 로컬 URL (일반적으로 http://localhost:5000 )에서 웹 앱을 엽니 다.

  4. 변경 사항으로 로컬 URL을 업데이트하려면 브라우저를 새로 고칩니다.

다른 로컬 장치에서 테스트

기본적으로 에뮬레이터는 localhost 요청에만 응답합니다. 즉, 컴퓨터의 웹 브라우저에서 호스팅 된 콘텐츠에 액세스 할 수 있지만 네트워크의 다른 장치에서는 액세스 할 수 없습니다. 다른 로컬 기기에서 테스트하려면 다음과 같이 firebase.json 구성하세요.

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

2 단계 : 미리보기 및 공유

라이브로 전환하기 전에 다른 사람이 웹 앱의 변경 사항을 볼 수 있도록하려면 미리보기 채널을 사용할 수 있습니다.

미리보기 채널에 배포하면 Firebase는 공유 가능한 임시 URL 인 '미리보기 URL'에서 웹 앱을 제공합니다. 미리보기 URL을 사용할 때 웹앱은 모든 프로젝트 리소스에 대한 실제 백엔드와 상호 작용합니다.

미리보기 URL은 추측하기 어렵지만 (임의의 해시가 포함되어 있기 때문에) 공개되어 있습니다. 따라서 URL을 아는 사람은 누구나 액세스 할 수 있습니다.

  1. 로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID 를 공백이없는 문자열 (예 : feature_mission-2-mars )로 바꿉니다. 이 ID는 미리보기 채널과 연결된 미리보기 URL을 구성하는 데 사용됩니다.

  2. CLI가 반환 한 미리보기 URL에서 웹앱을 엽니 다. 다음과 같이 표시됩니다. PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. 변경 사항으로 미리보기 URL을 업데이트하려면 동일한 명령을 다시 실행하십시오. 명령에 동일한 CHANNEL_ID 를 지정해야합니다.

채널 만료 설정 방법을 포함하여 미리보기 채널 관리에 대해 알아보세요.

Firebase 호스팅은 pull 요청에 대한 변경 사항을 커밋 할 때 미리보기 URL을 자동으로 생성하고 업데이트하는 GitHub 작업을 지원합니다. 이 GitHub 작업 을 설정하고 사용 하는 방법을 알아 봅니다.

3 단계 : 실시간 배포

변경 사항을 전 세계와 공유 할 준비가되면 호스팅 콘텐츠 및 구성을 라이브 채널에 배포하십시오. Firebase는 사용 사례에 따라이 단계에 대해 몇 가지 다른 옵션을 제공합니다 (아래 옵션 참조).

옵션 1 : 미리보기 채널에서 라이브 채널로 복제

이 옵션은 미리보기 채널에서 테스트 한 정확한 콘텐츠 및 구성을 라이브 채널에 배포하고 있다는 확신을 제공합니다. 복제 버전 에 대해 자세히 알아보십시오.

  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. 변경 사항을 확인합니다 (다음 단계).

옵션 2 : 로컬 프로젝트 디렉터리에서 라이브 채널로 배포

이 옵션은 라이브 채널에 특정한 구성을 조정하거나 미리보기 채널을 사용하지 않은 경우에도 배포 할 수있는 유연성을 제공합니다.

  1. 로컬 프로젝트 디렉터리의 루트에서 다음 명령을 실행합니다.

    firebase deploy --only hosting

  2. 변경 사항을 확인합니다 (다음 단계).

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 트래픽)를로드하는 것을 허용하지 않습니다.

다음 단계