App Hosting 시작하기

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 Analytics를 설정합니다.

    기존 Google Analytics 계정을 선택하거나 새 계정을 만듭니다.

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

  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 콘솔 또는 Firebase CLI를 사용하여 App Hosting 백엔드를 만들고 나열할 수 있습니다.

Firebase Console: 빌드 메뉴에서 앱 호스팅을 선택한 다음 시작하기를 선택합니다.

CLI: (버전 13.15.4 이상) 백엔드를 만들려면 로컬 프로젝트 디렉터리의 루트에서 다음 명령어를 실행하고 projectID 및 기본 region을 인수로 제공합니다.

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 콘솔에서 App Hosting 탭을 열고 백엔드의 대시보드 보기를 선택합니다. 테이블 목록에는 변경사항으로 트리거된 출시와 연결된 특정 커밋이 표시됩니다.

다음 단계