앱 호스팅 시작하기

GitHub 저장소에 있는 기존 Next.js 또는 Angular 앱 (Next.js 버전 13 이상 또는 Angular 17.2 이상)을 사용하면 App Hosting 백엔드를 만든 다음 라이브 브랜치로 푸시하여 출시를 시작하는 것만큼 간단하게 App Hosting을 시작할 수 있습니다. 앱이 없다면 샘플 앱 중 하나를 사용하여 이 가이드에 설명된 단계를 진행해 보세요.

시작하기 전에

Firebase App Hosting을 설정하려면 우선 Firebase 프로젝트를 만들고 (아직 없는 경우) Blaze 요금제로 업그레이드해야 합니다.

프로젝트를 만들려면 다음 안내를 따르세요.

  1. Firebase Console에서 프로젝트 추가를 클릭합니다.

    • 기존 Google Cloud 프로젝트에 Firebase 리소스를 추가하려면 프로젝트 이름을 입력하거나 드롭다운 메뉴에서 선택합니다.

    • 새 프로젝트를 만들려면 원하는 프로젝트 이름을 입력합니다. 필요한 경우 프로젝트 이름 아래에 표시되는 프로젝트 ID를 수정할 수도 있습니다.

  2. 메시지가 표시되면 Firebase 약관을 검토하고 이에 동의합니다.

  3. 계속을 클릭합니다.

  4. (선택사항) 다음 Firebase 제품의 사용 환경을 최적화하려면 프로젝트에 Google 애널리틱스를 설정합니다.

    기존 Google 애널리틱스 계정을 선택하거나 새 계정을 만듭니다.

    새 계정을 만드는 경우 애널리틱스 보고 위치를 선택한 후 프로젝트의 데이터 공유 설정 및 Google 애널리틱스 약관에 동의합니다.

  5. 프로젝트 만들기를 클릭합니다. 기존 Google Cloud 프로젝트를 사용할 경우에는 Firebase 추가를 클릭합니다.

Firebase에서 Firebase 프로젝트용 리소스를 자동으로 프로비저닝합니다. 프로세스가 완료되면 Firebase Console 내 Firebase 프로젝트의 개요 페이지로 이동하게 됩니다.

0단계 (선택사항): GitHub 저장소 및 웹 앱 만들기

GitHub 저장소에 있는 웹 앱이 아직 없거나 샘플 앱으로 흐름을 시도하려는 경우 Next.js 또는 Angular 샘플 중 하나를 초기화하여 시작합니다.

npm init @apphosting

next dev 또는 ng start를 사용하여 샘플 앱을 로컬에서 실행할 수 있습니다. 계속하려면 새 GitHub 저장소를 만들고 새로 초기화된 샘플 코드를 여기에 푸시하세요.

1단계: App Hosting 백엔드 만들기

App Hosting 백엔드는 웹 앱을 빌드하고 실행하기 위해 App Hosting에서 만드는 관리형 리소스의 모음입니다. Firebase Console 또는 Firebase CLI를 사용하여 앱 호스팅 백엔드를 만들고 나열할 수 있습니다.

Firebase Console: 빌드 메뉴에서 App Hosting을 선택한 다음 시작하기를 선택합니다.

CLI: (버전 3.9 이상) 백엔드를 만들려면 로컬 프로젝트 디렉터리의 루트에서 다음 명령어를 실행하여 프로젝트 ID를 인수로 제공합니다 (미리보기의 경우 us-central1 리전만 지원됨).

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

콘솔 또는 CLI의 경우 메시지를 따라 백엔드에 이름을 할당하고, GitHub 연결을 설정하고, 다음과 같은 기본 배포 설정을 구성합니다.

  • 앱의 루트 디렉터리 (기본값은 /)를 설정합니다.

    일반적으로 package.json 파일은 여기에 있습니다.

  • 라이브 브랜치 설정

    이는 실제 URL에 배포되는 GitHub 저장소의 브랜치입니다. 기능 브랜치 또는 개발 브랜치가 병합되는 브랜치인 경우가 많습니다.

  • 자동 출시 수락 또는 거부

    자동 출시는 기본적으로 사용 설정되어 있습니다. 백엔드 생성이 완료되면 앱을 App Hosting에 즉시 배포하도록 선택할 수 있습니다.

2단계: 배포된 앱 보기

백엔드를 만들면 Firebase에서 최종 사용자가 웹 앱을 방문할 수 있는 무료 하위 도메인을 제공합니다. 형식은 backend-id--project-id.us-central1.hosted.app입니다.

웹 앱의 URL을 보려면 Firebase Console을 확인하거나 다음 CLI 명령어를 실행합니다.

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

3단계: 변경사항을 푸시하여 출시 트리거

백엔드가 생성되고 실제 URL이 있으면 GitHub 저장소의 라이브 브랜치에 변경사항을 푸시할 때마다 웹 앱의 새 버전 출시를 트리거할 수 있습니다. App Hosting 설정 테스트를 수행하려면 다음 안내를 따르세요.

  1. GitHub에서 웹 앱의 라이브 브랜치에 변경사항을 푸시합니다.
  2. Firebase Console에서 App Hosting 탭을 열고 백엔드의 대시보드 보기를 선택합니다. 표 목록에는 변경사항으로 트리거된 출시와 연결된 특정 커밋이 표시됩니다.

다음 단계