Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

시작하기 전에

호스팅 시작하기 페이지 에 나열된 단계, 구체적으로 다음 작업을 완료하세요.

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

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

1단계: 로컬에서 테스트

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

호스팅은 앱이 에뮬레이션된 호스팅 콘텐츠 및 구성은 물론 선택적으로 에뮬레이션된 프로젝트 리소스(함수, 데이터베이스 및 규칙)와 상호작용할 수 있도록 하는 Firebase 로컬 에뮬레이터 도구 모음 의 일부입니다.

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

  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 호스팅은 풀 요청에 대한 변경 사항을 커밋할 때 자동으로 미리보기 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 트래픽)를 로드하는 것을 허용하지 않습니다.

다음 단계