import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Firebase Hosting은 Google의 Firebase 앱 개발 플랫폼에서 제공하는 서비스로, Astro 사이트 배포에 사용할 수 있습니다.

데이터베이스, 인증, 저장소 등 Firebase 백엔드 서비스 추가에 대한 별도의 안내서를 참조하세요.

프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 서버 측 렌더링 사이트 (SSR)로 Firebase에 배포될 수 있습니다.

정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Firebase에 배포하기 위해 추가 구성이 필요하지 않습니다.

SSR용 어댑터

Astro 프로젝트에서 SSR을 활성화하고 Firebase에 배포하려면 Node.js 어댑터를 추가하세요.

:::note SSR Astro 사이트를 Firebase에 배포하려면 Blaze 요금제 이상이 필요합니다. :::

배포 방법

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install firebase-tools ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add firebase-tools ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add firebase-tools ``` </Fragment> </PackageManagerTabs>

2. Google 계정으로 Firebase CLI를 인증하세요. 그러면 Google 계정에 로그인할 수 있는 브라우저 창이 열립니다.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase login ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase login ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase login ``` </Fragment> </PackageManagerTabs>

3. 실험적인 웹 프레임워크 지원을 활성화합니다. 이는 Firebase CLI가 Astro의 배포 설정을 감지하고 구성할 수 있게 해주는 실험적 기능입니다.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase experiments:enable webframeworks ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase experiments:enable webframeworks ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase experiments:enable webframeworks ``` </Fragment> </PackageManagerTabs>

4. 프로젝트에서 Firebase Hosting을 초기화합니다. 그러면 프로젝트 루트에 firebase.json 및 .firebaserc 파일이 생성됩니다.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase init hosting ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase init hosting ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase init hosting ``` </Fragment> </PackageManagerTabs>

5. Firebase Hosting에 사이트를 배포합니다. 그러면 Astro 사이트가 빌드되어 Firebase에 배포됩니다.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase deploy --only hosting ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase deploy --only hosting ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase deploy --only hosting ``` </Fragment> </PackageManagerTabs>