Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

시작하기 전에

온 나와있는 단계를 완료 호스팅 가져 오기 시작 페이지 , 구체적으로 다음과 같은 작업을 :

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

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

1 단계 : 테스트 로컬

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

호스팅의 일부이다 중포 기지 지역 에뮬레이터 스위트 룸 뿐만 아니라 선택적으로 에뮬레이트 프로젝트 리소스 (기능, 데이터베이스, 규칙), 에뮬레이트 호스팅 내용 및 구성과 상호 작용하여 응용 프로그램을 수 있습니다.

  1. 기본적으로 (선택 사항), 사용자의 로컬 호스트 응용 프로그램은 에뮬레이트하지 진짜, 프로젝트 리소스 (기능, 데이터베이스, 규칙 등)와 상호 작용합니다. 대신 선택적으로 사용자가 설정 한 것을 어떤 에뮬레이트 프로젝트 리소스를 사용하도록 응용 프로그램을 연결할 수 있습니다. 자세히 알아보기 : 실시간 데이터베이스 | 클라우드 경우 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 deploy --only hosting -m "Deploying the best new feature ever."

배포 전 및 배포 후 스크립트 작업 추가

당신은 선택적으로 연결 쉘 스크립트 수 firebase deploy 명령은 predeploy 또는 postdeploy 작업을 수행 할 수 있습니다. 예를 들어 배포 후 후크는 관리자에게 새 사이트 콘텐츠 배포를 알릴 수 있습니다. 참고하여주십시오 중포 기지 CLI 문서 자세한 내용은.

배포된 콘텐츠 캐싱

요청이 정적 콘텐츠를 제작하는 경우, 중포 기지가 자동으로 CDN의 콘텐츠를 캐시 호스팅. 사이트의 콘텐츠를 재배치하는 경우, 중포 기지가 자동으로 새 요청은 새 콘텐츠를 수신 그렇게하는 CDN에서 모든 캐시 정적 콘텐츠를 지 웁니다.

당신이 구성 할 수 있습니다 동적 콘텐츠의 캐싱을 .

HTTPS를 통한 서비스

Firebase 호스팅에서 호스팅되지 않는 모든 외부 리소스는 외부 스크립트를 포함하여 SSL(HTTPS)을 통해 로드되어야 합니다. 대부분의 브라우저는 사용자가 "혼합 콘텐츠"(SSL 및 비 SSL 트래픽)를 로드하는 것을 허용하지 않습니다.

다음 단계