App Hosting 시작하기

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

AI 지원을 받으려면 아래 프롬프트를 AI 코딩 에이전트 (예: Antigravity, Claude Code, Codex, Cursor)에 복사하세요. 프롬프트를 맞춤설정하고 에이전트를 반복할 수 있습니다. 자세한 설치 정보는 Firebase 에이전트 스킬을 참고하세요. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

이 가이드에서는 GitHub 저장소에 새 커밋이 생성될 때마다 자동으로 배포되도록 Firebase Console에서 App Hosting를 설정하는 방법을 설명합니다. 이 흐름이 끝나면 GitHub 저장소의 main 브랜치에 새 변경사항을 커밋할 때마다 재배포되는 라이브 Next.js 또는 Angular 예시 앱이 생성됩니다.

이 가이드에서는 권장되는 Firebase 콘솔 흐름에 중점을 두지만, GitHub 연결 없이 Firebase CLI를 사용하여 로컬 코드를 배포하는 등 다른 배포 방법도 있습니다.

1단계: 데모 저장소 포크

https://github.com/firebase/apphosting-adapters를 방문하여 포크를 선택합니다.

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

  1. Firebase Console에서 호스팅 및 서버리스 > App Hosting으로 이동합니다.

  2. 시작하기를 클릭합니다.

  3. 메시지가 표시되면 사용한 만큼만 지불하는 Blaze 요금제로 업그레이드하여 App Hosting를 사용합니다.

App Hosting 백엔드 설정의 스크린샷

안내에 따라 다음 단계를 완료합니다.

  • 기본 리전 (일반적으로 사용자와 가장 가까운 리전)을 선택합니다.

  • GitHub에 연결합니다. apphosting-adapters 저장소를 포크하여 만든 저장소를 선택하거나 기존 애플리케이션 저장소를 선택합니다.

  • 앱의 루트 디렉터리를 설정합니다.

    • 자체 애플리케이션을 배포하는 경우 앱의 루트 디렉터리를 지정합니다(기본값은 /). 이 디렉터리는 일반적으로 package.json 파일이 있는 위치입니다.

    • apphosting-adapters 데모 저장소를 사용하는 경우 앱의 루트 디렉터리를 다음 경로 중 하나로 설정합니다.

    • /starters/nextjs/basic

    • /starters/angular/basic

  • 라이브 브랜치를 main으로 설정합니다.

  • 자동 출시를 사용 설정합니다(자동 출시는 기본적으로 사용 설정됨).

  • 백엔드에 이름을 할당합니다.

  • 런타임 환경을 선택합니다. 기본적으로 권장되는 최신 Node.js 버전이 미리 선택되어 있습니다.

    • 기본 이미지 자동 업데이트(ABIU)를 구성합니다. ABIU는 기본적으로 사용 설정되어 있으며 기본 환경에 보안 패치를 자동으로 적용합니다. 런타임에 '지정되지 않음'을 선택하여 ABIU를 선택 해제할 수 있습니다.

  • 새 Firebase 웹 앱을 만듭니다.

완료 및 배포를 선택합니다.

3단계: 배포된 앱 보기

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

백엔드의 대시보드에 있는 백엔드 정보 행에서 라이브 백엔드 링크를 선택하여 새 웹사이트를 확인합니다.

라이브 앱 링크가 강조된 백엔드 정보 행의 스크린샷

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

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

  1. 데모 GitHub 저장소의 포크에서 데모 앱 홈페이지의 소스로 이동하여 원하는 대로 수정하고 변경사항을 기본 브랜치에 푸시합니다. 홈페이지를 찾으려면 다음 단계를 따르세요.

    • Next.js: /starters/nextjs/basic/src/app/page.tsx

    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Firebase 콘솔에서 새 변경사항이 프로덕션에 출시될 때 App Hosting를 모니터링합니다. 출시가 완료되면 앱 홈페이지에서 변경사항을 확인할 수 있습니다.

다음 단계