Quickstarters
Comment construire un backend pour Astro ?

21min
Introduction
Dans ce guide sur comment construire un backend pour astro, vous apprendrez à créer un backend complet en utilisant Back4App pour votre projet Astro. 
Nous aborderons l'intégration des fonctionnalités importantes de Back4App, y compris la gestion de base de données, les fonctions cloud, l'authentification, le stockage de fichiers, les requêtes en temps réel, et plus encore—démontrant une approche pratique pour construire des applications rapides avec des outils modernes.
En tirant parti de l'environnement de Back4App, vous évitez beaucoup de travail lourd, comme la configuration des serveurs ou l'écriture de couches de sécurité à partir de zéro. 
Cette configuration vous fait gagner du temps et des efforts, tout en vous permettant de définir un point de terminaison pour une logique côté serveur robuste. 
Vous verrez également comment incorporer des variables d'environnement dans votre projet astro, ce qui facilite le stockage sécurisé des identifiants ou d'autres données sensibles.
Une fois que vous aurez terminé, vous disposerez d'une structure backend évolutive pour Astro et saurez comment gérer les données avec REST, GraphQL, l'authentification des utilisateurs, les événements en temps réel, et plus encore. 
Vous serez prêt à ajouter votre propre logique pour tous les besoins du monde réel tout en conservant une solide base de sécurité.
Prérequis
Un compte Back4App et un nouveau projet Back4App
Commencer avec Back4app.﻿
Un projet Astro
Configurer Astro - Assurez-vous d'avoir un environnement de développement Astro de base et Node.js installé.
Node.js (version 14 ou supérieure) installé
Installer Node.js﻿
Familiarité avec les concepts de front-end et de serveur
Vous devez savoir comment créer ou modifier des fichiers .astro, gérer les variables d'environnement et effectuer une simple requête POST avec fetch ou une bibliothèque similaire.
Assurez-vous que ces prérequis sont en place avant de commencer. Avoir votre compte Back4App, un environnement Astro et des connaissances de base en JavaScript vous aidera à suivre ce tutoriel plus facilement.
Étape 1 – Création d'un nouveau projet sur Back4App et connexion
Créer un nouveau projet :
Connectez-vous à votre compte Back4App.
Cliquez sur Nouvelle application dans votre tableau de bord Back4App et donnez-lui un nom (par exemple, “Astro-Backend-Tutorial”).
Récupérer les identifiants Back4App :
Dans votre tableau de bord Back4App, sous Paramètres de l'application ou Sécurité et clés, notez votre ID d'application, Clé API REST, et l'URL du serveur (https://parseapi.back4app.com par défaut). Ces variables d'environnement seront utilisées dans votre intégration Astro.
Connecter Astro à Back4App via les API :
Puisque nous n'utilisons pas directement le SDK Parse, nous ferons des requêtes en utilisant fetch ou une autre bibliothèque depuis nos fichiers Astro. Stockez vos identifiants dans des variables d'environnement pour des raisons de sécurité. Par exemple, dans un .env fichier :
Étape 2 – Configuration de la base de données
Création d'un modèle de données
Créer manuellement un modèle de données :
Allez sur votre tableau de bord Back4App et cliquez sur Base de données.
Créez une nouvelle classe (par exemple, “Todo”), et ajoutez des champs comme title (String) et isCompleted (Boolean).
Utilisez l'agent IA pour créer un modèle de données :
Ouvrez l'agent IA depuis votre tableau de bord d'application.
Décrivez votre schéma en langage simple (par exemple, “Créez une nouvelle application ToDo avec une classe qui a des champs title et isCompleted.”).
L'agent générera la classe et les champs pour vous.
Lecture et écriture de données en utilisant l'API REST
Avec votre modèle de données prêt, définissons un point de terminaison à l'intérieur d'un composant Astro ou d'un fichier côté serveur pour gérer une requête POST et une requête de lecture. Par exemple, vous pourriez créer un fichier comme src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
Cet exemple utilise des variables d'environnement (import.meta.env.*) pour stocker vos identifiants Back4App. Nous définissons deux méthodes dans un fichier : export const post pour créer un Todo, et export const get pour récupérer tous les Todos. Vous pouvez l'adapter pour convenir à la structure de votre composant de mise en page et d'autres pages du site.
Lecture et écriture de données en utilisant l'API GraphQL
De même, vous pouvez effectuer des requêtes GraphQL depuis vos pages Astro :
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
Travailler avec des requêtes en direct (optionnel)
Les requêtes en direct permettent des mises à jour en temps réel de vos données. Pour les utiliser, activez les requêtes en direct dans le tableau de bord Back4App et configurez une connexion WebSocket. Cependant, si vous construisez un site Astro statique, vous pourriez intégrer des mises à jour en temps réel via des scripts côté client pointant vers wss://YOUR_SUBDOMAIN.b4a.io. Les requêtes en direct peuvent envoyer des modifications à vos clients connectés chaque fois que des enregistrements sont créés, mis à jour ou supprimés.
Étape 3 – Appliquer la sécurité avec les ACL et les CLP
Les ACL (Listes de Contrôle d'Accès) et CLP (Permissions au Niveau de la Classe) sont fondamentales pour contrôler l'accès aux données. Vous pouvez les configurer dans la Base de données section de votre tableau de bord Back4App. Par exemple:
Restreindre la lecture/écriture uniquement aux utilisateurs authentifiés
Utiliser des ACL pour la sécurité par objet
Utilisez les Directives de Sécurité Back4App pour garantir que vos données restent protégées. Vous pouvez également définir ces règles depuis le tableau de bord, garantissant que même si vos appels REST sont ouverts, seules les bonnes informations d'identification peuvent modifier ou voir les données.
Étape 4 – Écriture de Fonctions Cloud Code
Pourquoi Cloud Code : Vous pouvez déplacer la logique métier clé du côté serveur, évitant l'exposition de secrets ou la nécessité de maintenir des serveurs séparés. Le Cloud Code peut écouter des déclencheurs (beforeSave, afterSave) ou gérer des points de terminaison personnalisés.
Exemple
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Déployez cela via Back4App CLI ou directement dans la section Cloud Code de votre tableau de bord Back4App.
Appel de la fonction
Depuis Astro, vous pouvez définir un point de terminaison qui utilise fetch pour atteindre votre fonction Cloud :
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
Étape 5 – Configuration de l'authentification
Back4App utilise la _User classe pour gérer les comptes utilisateurs. Avec REST, vous pouvez gérer les inscriptions, les connexions ou les déconnexions. Par exemple, l'inscription d'un nouvel utilisateur :
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
Vous pouvez reproduire cette logique depuis Astro avec fetch de manière similaire, en utilisant des variables d'environnement. Une fois connecté, l'utilisateur reçoit un jeton de session pour les requêtes suivantes.
Connexion sociale
Pour les fournisseurs sociaux (comme Google ou Apple), utilisez des points de terminaison spécifiques ou configurez le flux OAuth. Consultez les Docs de connexion avec Apple ou d'autres guides de connexion sociale pour intégrer une authentification avancée. Cela est particulièrement utile si vous souhaitez permettre aux utilisateurs de se connecter à votre projet astro avec un minimum de friction.
Étape 6 – Gestion du stockage de fichiers
Pour stocker des fichiers dans Back4App, vous les envoyez avec l'API REST. Par exemple :
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La réponse contient une URL de fichier. Vous pouvez lier cette URL à un enregistrement, comme un Photo objet de classe, en veillant à suivre les références au fichier dans votre base de données. Vous pouvez également contrôler qui peut télécharger en ajustant les paramètres de sécurité des fichiers dans la configuration de votre application.
Étape 7 – Vérification par e-mail et réinitialisation du mot de passe
Activer la vérification par e-mail: Sous Paramètres de l'application dans le tableau de bord Back4App, activez la vérification par e-mail et personnalisez votre modèle d'e-mail de vérification.
Configurer la réinitialisation du mot de passe: De même, configurez vos e-mails de réinitialisation de mot de passe et assurez-vous que la _User classe a des adresses e-mail valides.
Flux: Lorsqu'un utilisateur demande une réinitialisation depuis votre projet astro (via un appel API), Back4App envoie automatiquement un e-mail avec un lien sécurisé pour changer son mot de passe.
Étape 8 – Planification des tâches avec des travaux cloud
Utilisez Cloud Jobs pour planifier des tâches de maintenance répétées ou d'autres tâches :
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Déployez votre code, puis planifiez le travail depuis Paramètres du serveur > Travaux en arrière-plan dans la console Back4App. Cela automatise des tâches comme le nettoyage des données, l'envoi d'e-mails ou toute fonction de routine que vous souhaitez exécuter à des intervalles spécifiques.
Étape 9 – Intégration des Webhooks
Les Webhooks vous permettent de notifier des services externes lorsque certains événements se produisent dans votre application Back4App. Par exemple, vous pouvez envoyer des données à Slack chaque fois qu'un nouveau Todo est créé :
Allez à Plus > WebHooks dans votre tableau de bord Back4App.
Ajoutez un Webhook pointant vers l'URL Slack.
Sélectionnez l'événement (par exemple, objet créé dans la classe Todo).
Cela permet un flux de demande/réponse pour garder vos systèmes externes synchronisés avec les données de votre application basée sur Astro.
Étape 10 – Explorer le panneau d'administration Back4App
L' Application d'administration Back4App est un panneau de gestion convivial pour l'édition des données. Il est particulièrement utile pour les membres non techniques de l'équipe qui ont besoin d'un accès direct à votre base de données.
Activer l'application Admin sous Plus > Application Admin.
Créer un utilisateur admin pour un accès sécurisé.
Utiliser ce panneau pour effectuer rapidement des opérations CRUD, vérifier les journaux ou configurer des paramètres plus avancés.
Conclusion
Vous avez réussi à créer un backend sécurisé et efficace pour un projet Astro en utilisant Back4App. Tout au long de ce tutoriel, vous :
Défini et configuré un schéma de base de données
Utilisé les API REST et GraphQL pour lire et écrire des données
Sécurisé les données avec des ACL, CLP et l'authentification des utilisateurs
Étendu la logique via le Cloud Code et les tâches planifiées
Géré le stockage de fichiers pour les images ou les documents
Intégré des Webhooks pour les notifications externes
Exploré le panneau d'administration pour une gestion simplifiée des données
Cette approche souligne comment construire un backend pour Astro qui est fiable, évolutif et facile à maintenir. En tirant parti des variables d'environnement, vous gardez vos identifiants en sécurité tout en garantissant que votre code reste flexible pour une croissance future.
Prochaines étapes
Déployez votre projet Astro avec des plateformes d'hébergement qui supportent le rendu côté serveur ou les environnements basés sur Node.
Ajoutez des fonctionnalités avancées, comme le contrôle d'accès basé sur les rôles ou des intégrations de paiement spécialisées, en utilisant Cloud Code ou des API externes.
Optimisez les performances en mettant en œuvre des stratégies de mise en cache et en ajustant les paramètres de contenu de votre viewport pour une meilleure expérience utilisateur.
Consultez la documentation de Back4App pour en savoir plus sur les journaux, l'analyse et d'autres mesures de sécurité avancées.
Continuez à explorer les fonctionnalités en temps réel avec les requêtes en direct et construisez des applications véritablement dynamiques et collaboratives.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour Python ?
Comment construire un backend pour Deno ?