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

Firebase Hosting est un service fourni par la plateforme de développement d'applications Firebase de Google, qui peut être utilisé pour déployer un site Astro.

Voir notre guide séparé pour ajouter des services backend Firebase tels que les bases de données, l'authentification et le stockage.

Configuration du projet

Votre projet Astro peut être déployé sur Firebase en tant que site statique ou en tant que site rendu côté serveur (SSR).

Site statique

Votre projet Astro est un site statique par défaut. Vous n'avez besoin d'aucune configuration supplémentaire pour déployer un site Astro statique sur Firebase.

Adaptateur pour SSR

Pour activer SSR dans votre projet Astro et le déployer sur Firebase, ajoutez l'adaptateur Node.js.

:::note Le déploiement d'un site Astro SSR sur Firebase nécessite le plan Blaze ou une version supérieure. :::

Comment déployer

<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. Authentifiez la CLI de Firebase avec votre compte Google. Cela ouvrira une fenêtre de navigateur dans laquelle vous pourrez vous connecter à votre compte 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. Activez la prise en charge expérimentale des frameworks web. Il s'agit d'une fonctionnalité expérimentale qui permet à la CLI de Firebase de détecter et de configurer vos paramètres de déploiement pour 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. Initialisez Firebase Hosting dans votre projet. Cela créera un fichier firebase.json et .firebaserc à la racine de votre projet.

<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. Déployez votre site sur Firebase Hosting. Cela va compiler votre site Astro et le déployer sur 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>