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

실제 사이트에 배포하기 전 변경사항을 확인하고 테스트해야 합니다. Firebase Hosting를 사용하면 로컬에서 변경사항을 확인 및 테스트하고 상호작용할 수 있습니다. 에뮬레이션된 백엔드 프로젝트 리소스를 사용합니다 팀원들이 변경사항을 테스트하면 Hosting에서 공유 가능한 임시 미리보기 URL을 만들 수 있습니다 확인할 수 있습니다. 또한 Google은 가져오기에서 배포하기 위한 GitHub 통합 합니다.

시작하기 전에

Hosting 시작하기 페이지에서 구체적으로 작업을 수행할 수 있습니다

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

앱의 Hosting 콘텐츠와 구성을 선택적으로 배포할 수 있지만 이 페이지의 단계를 진행하기 위한 전제 조건이 아닙니다

1단계: 로컬 테스트

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

Hosting는 Firebase Local Emulator Suite의 일부입니다. 이렇게 하면 앱이 에뮬레이션된 Hosting 콘텐츠와 상호작용할 수 있으며 구성뿐 아니라 선택적으로 에뮬레이션된 프로젝트 리소스 (함수, 관리할 수 있습니다.

  1. (선택사항) 기본적으로 로컬로 호스팅된 앱은 에뮬레이션된 것이 아니라 실제 프로젝트 리소스(함수, 데이터베이스, 규칙 등)와 상호작용합니다. 그 대신 선택적으로 사용자가 구성한 에뮬레이션된 프로젝트 리소스를 사용하도록 앱을 연결할 수 있습니다. 자세히 알아보기: Realtime Database | 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 Hosting는 자동으로 만들고 생성하는 GitHub 작업을 지원합니다. pull 요청에 변경사항을 커밋하면 미리보기 URL이 업데이트됩니다. 자세히 알아보기 이 GitHub 작업을 설정하고 사용합니다.

3단계: 실시간 배포

변경사항을 전 세계에 공유할 준비가 되면 Hosting을(를) 배포하세요. 라이브 채널에 적용할 수 있습니다. Firebase에서는 사용 사례에 따라 이 단계를 위해 몇 가지 옵션이 제공됩니다(아래 옵션 참조).

옵션 1: 미리보기 채널에서 실시간 채널로 클론

이 옵션은 미리보기 채널에서 테스트한 그대로 콘텐츠 및 구성을 실시간 채널에 배포할 수 있다는 확신을 줍니다. 버전 클론에 대해 자세히 알아보세요.

  1. 디렉터리에서 다음 명령어를 실행합니다.

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    각 자리표시자를 다음 항목으로 바꿉니다.

    • SOURCE_SITE_ID 및 TARGET_SITE_ID: 채널이 포함된 사이트 Hosting개 중

      • 기본 Hosting 사이트에는 Firebase 프로젝트 ID를 사용합니다.
      • 동일한 Firebase 프로젝트 또는 다른 Firebase 프로젝트에 있는 사이트를 지정할 수도 있습니다.

    • SOURCE_CHANNEL_ID: 실시간 채널에 배포하려는 버전을 현재 서비스 중인 채널의 식별자입니다.

      • 실시간 채널의 경우 live를 채널 ID로 사용합니다.

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

옵션 2: 로컬 프로젝트 디렉터리에서 실시간 채널로 배포

이 옵션은 실시간 채널에 맞게 구성을 조정하거나 미리보기 채널을 사용하지 않았어도 배포할 수 있는 유연성을 제공합니다.

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

    firebase deploy --only hosting
     드림

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

4단계: 실시간 사이트에서 변경사항 보기

위의 두 옵션은 모두 Hosting 콘텐츠 및 구성을 다음 사이트:

  • 기본 Hosting 사이트 및 기타 모든 사이트에 대해 Firebase에서 프로비저닝한 하위 도메인 추가 사이트 Hosting개:
    SITE_ID.web.app (예: PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (예: PROJECT_ID.firebaseapp.com)

  • 연결한 모든 커스텀 도메인 내 사이트 Hosting개

특정 Hosting 사이트로 배포를 제한하려면 다음 안내를 따르세요. 배포 대상 지정 볼 수 있습니다

다른 배포 작업 및 정보

배포 주석 추가

주석은 필요에 따라 배포에 추가할 수 있으며, 이 댓글은 다른 배포 정보는 Hosting 대시보드 (Firebase 콘솔에서 확인) 예를 들면 다음과 같습니다.

firebase deploy --only hosting -m "Deploying the best new feature ever."

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

셸 스크립트를 firebase deploy 명령어에 연결하여 배포 전 또는 배포 후 작업을 수행할 수 있습니다. 예를 들어 배포 후 후크를 통해 새 사이트 콘텐츠 배포를 관리자에게 알릴 수 있습니다. 자세한 내용은 Firebase CLI 문서에서 자세한 내용을 확인하세요.

배포된 콘텐츠 캐싱

정적 콘텐츠를 요청하면 자동으로 Firebase Hosting이 발생합니다. 콘텐츠를 캐시합니다 사이트의 콘텐츠를 재배포하면 Firebase는 CDN에서 캐시된 모든 정적 콘텐츠를 자동으로 삭제하므로 새로운 새 콘텐츠를 수신합니다.

동적 콘텐츠 캐싱도 구성할 수 있습니다.

HTTPS를 통해 제공

Google Cloud에 호스팅되지 않은 모든 외부 리소스가 Firebase Hosting는 외부 스크립트를 포함하여 SSL (HTTPS)을 통해 로드됩니다. 대부분의 브라우저에서는 사용자가 '혼합 콘텐츠'(SSL 트래픽과 SSL이 아닌 트래픽)를 로드할 수 없습니다.

파일 삭제

Firebase Hosting에서 선택한 파일을 삭제하는 기본적인 방법 방법은 파일을 로컬에서 삭제한 다음 다시 배포하는 것입니다.

다음 단계