Deployer Astro sur Fly.io

Pourquoi Deployer Astro sur Fly.io ?

Deployer un site web avec Astro sur Fly.io permet d'optimiser significativement la performance et la scalabilité de votre application. Fly.io propose une infrastructure serverless qui s'échelle automatiquement, ce qui est parfait pour des applications modernes à faible latence et haute disponibilité.

Un cas concret serait un blog personnalisé où le contenu change fréquemment et où vous souhaitez minimiser les temps de réponse. Avec Astro sur Fly.io, chaque page est générée statiquement et hébergée de manière réactive, offrant une expérience utilisateur fluide même sous charge élevée.

Prerequis

• Connaissance avancée de JavaScript/TypeScript
• Familiarité avec Astro (https://astro.build/)
• Compréhension des concepts de base d'HTTP et de routing
• Installation de Node.js (>= 14)
• Installation de Fly.io CLI (flyctl)

Concepts fondamentaux

1. Astro

Astro est un framework moderne pour construire des applications web performantes et réactives. Il utilise une approche "static first" qui permet d'optimiser les performances en générant du contenu statique.

---
// src/pages/index.astro

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  template: `
    <div>
      <h1>Bienvenue sur mon blog</h1>
      <p>Ceci est la page d'accueil.</p>
    </div>
  `,
});

2. Serverless

Serverless signifie que vous n'avez pas à gérer des serveurs physiques. Vous déployez votre code et Fly.io s'occupe de l'exécution et de l'échelle automatique.

## Commande pour déployer sur Fly.io
flyctl deploy --image my-astro-app

3. Static Site Hosting

Un site statique est un ensemble de fichiers HTML, CSS et JavaScript qui peuvent être servis directement par un serveur web. Astro génère automatiquement ces fichiers lors du build.

## Commande pour construire le projet Astro
npm run build

4. Routing

Astro utilise une approche d'routing basée sur les fichiers et les dossiers pour définir les routes de votre application.

---
// src/pages/blog/[slug].astro

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BlogPost',
  props: {
    slug: String,
  },
  template: `
    <div>
      <h1>Mon blog</h1>
      <p>Ceci est le post avec le slug slug</p>
    </div>
  `,
});

Mise en pratique : projet fil rouge

Création du projet

## Initialisation d'un nouveau projet Astro
npm create astro@latest my-astro-app
cd my-astro-app

Ajout d'une page de blog

Créez un fichier src/pages/blog/[slug].astro.

---
// src/pages/blog/[slug].astro

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BlogPost',
  props: {
    slug: String,
  },
  template: `
    <div>
      <h1>Mon blog</h1>
      <p>Ceci est le post avec le slug slug</p>
    </div>
  `,
});

Ajout d'une page accueil

Créez un fichier src/pages/index.astro.

---
// src/pages/index.astro

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  template: `
    <div>
      <h1>Bienvenue sur mon blog</h1>
      <p>Ceci est la page d'accueil.</p>
      <a href="/blog/post-1">Voir le premier post</a>
    </div>
  `,
});

Construire et déployer

## Construire le projet
npm run build

## Déployer sur Fly.io
flyctl deploy --image my-astro-app

Erreurs frequentes et debugging

Erreur 1 : Missing required file

Message d'erreur :

Error: Missing required file /path/to/your/project/dist/index.html

Code incorrect :

npm run build
flyctl deploy --image my-astro-app

Code correct :

## Assurez-vous que le build a bien produit un index.html
ls dist

## Si ce n'est pas le cas, exécutez un rebuild
npm run build
flyctl deploy --image my-astro-app

Erreur 2 : Invalid Fly.toml configuration

Message d'erreur :

Error: Invalid Fly.toml configuration

Code incorrect :

## fly.toml
app = "my-astro-app"

Code correct :

## fly.toml
app = "my-astro-app"

[static]
  directory = "dist"

Erreur 3 : Failed to deploy

Message d'erreur :

Error: Failed to deploy

Code incorrect :

flyctl deploy --image my-astro-app

Code correct :

## Vérifiez les logs pour plus de détails
flyctl logs -a my-astro-app

Pour aller plus loin

1. Optimisation des performances : Explorez l'utilisation de plugins et d'options pour optimiser la performance de votre site web (https://docs.astro.build/guides/performance/).
2. Intégration avec des services tiers : Intégrez Astro avec des services comme Firebase pour stocker du contenu dynamique (https://docs.astro.build/guides/integrations/fetching-data/).
3. Gestion de l'authentification : Ajoutez une gestion d'authentification à votre application en utilisant Auth0 ou Keycloak.

Défi pratique : Créez un mini-projet qui utilise les concepts appris (Astro, Fly.io, routing statique) pour construire un simple e-commerce.