로컬에서 웹 앱을 테스트하고, 변경사항을 다른 사용자와 공유하고, 실시간 배포

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

시작하기 전에

특히 다음 태스크를 포함하여 호스팅 시작하기 페이지에 나열된 단계를 완료합니다.

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

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

1단계: 로컬 테스트

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

호스팅은 Firebase 로컬 에뮬레이터 도구 모음에 포함되어 앱이 에뮬레이션된 호스팅 콘텐츠 및 구성은 물론 필요할 경우 에뮬레이션된 프로젝트 리소스(함수, 데이터베이스, 규칙)와도 상호작용할 수 있게 해줍니다.

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

  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입니다. 따라서 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 Console의 호스팅 대시보드에 다른 배포 정보와 함께 표시됩니다. 예를 들면 다음과 같습니다.

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이 아닌 트래픽)를 로드할 수 없습니다.

다음 단계