google-firebase.mdx

title	description	type	i18nReady
Astro 사이트를 Google의 Firebase Hosting에 배포하세요	Google의 Firebase Hosting을 사용하여 Astro 사이트를 웹에 배포하는 방법.	deploy	true

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 요금제 이상이 필요합니다. :::

배포 방법

1. [Firebase CLI](https://github.com/firebase/firebase-tools)를 설치합니다. 이는 터미널에서 Firebase와 상호작용할 수 있는 명령줄 도구입니다.

<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 계정에 로그인할 수 있는 브라우저 창이 열립니다.

   ```shell npx firebase login ``` ```shell pnpm exec firebase login ``` ```shell yarn firebase login ```

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

   ```shell npx firebase experiments:enable webframeworks ``` ```shell pnpm exec firebase experiments:enable webframeworks ``` ```shell yarn firebase experiments:enable webframeworks ```

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

   ```shell npx firebase init hosting ``` ```shell pnpm exec firebase init hosting ``` ```shell yarn firebase init hosting ```

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

   ```shell npx firebase deploy --only hosting ``` ```shell pnpm exec firebase deploy --only hosting ``` ```shell yarn firebase deploy --only hosting ```