App Hosting 시작하기

기존 Next.js 또는 Angular 앱 (Next.js 버전 13 이상 또는 Angular 17.2 이상) GitHub 저장소에서 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 저장소에 웹 앱이 없거나 샘플 앱으로 흐름을 시도해 보고 샘플 중 하나를 초기화한 다음 다음 코드를 사용합니다.

npm init @apphosting

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

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

App Hosting 백엔드는 작업을 수행하는 데 필요한 App Hosting는 웹 앱을 빌드하고 실행하기 위해 만듭니다. Google Cloud 콘솔의 Firebase 콘솔을 사용한 App Hosting 백엔드 또는 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 파일은 여기에 있습니다.

  • 라이브 브랜치 설정

    이는 프로젝트에 배포되는 GitHub 저장소의 브랜치입니다. 라이브 URL을 사용합니다. 기능 브랜치 또는 개발이 이뤄지는 병합됩니다

  • 자동 출시 수락 또는 거부

    자동 출시는 기본적으로 사용 설정되어 있습니다. 백엔드 생성이 완료되면 앱을 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. Google 검색 앱 홈 화면의 오른쪽 상단에 있는 탭 App Hosting개 표시 Firebase 콘솔에서 백엔드의 대시보드 보기를 선택합니다. 표 목록에는 출시와 관련된 특정 커밋이 표시됩니다. 확인할 수 있습니다

다음 단계