Schnellstarter
Wie man ein Backend für Astro erstellt?

21min
Einführung
In diesem Leitfaden über wie man ein Backend für Astro erstellt, lernen Sie, wie Sie ein vollständiges Backend mit Back4App für Ihr Astro-Projekt erstellen.
Wir werden die Integration wichtiger Back4App-Funktionen behandeln, einschließlich Datenbankverwaltung, Cloud-Funktionen, Authentifizierung, Dateispeicherung, Echtzeitanfragen und mehr – und dabei einen praktischen Ansatz zur Erstellung schneller Anwendungen mit modernen Werkzeugen demonstrieren.
Durch die Nutzung der Umgebung von Back4App sparen Sie sich viel schwere Arbeit, wie das Konfigurieren von Servern oder das Schreiben von Sicherheitslagen von Grund auf.
Dieses Setup spart Ihnen Zeit und Mühe, während Sie dennoch einen Endpunkt für robuste serverseitige Logik definieren können.
Sie werden auch sehen, wie Sie Umgebungsvariablen in Ihr Astro-Projekt einfügen, was es einfacher macht, Anmeldeinformationen oder andere sensible Daten sicher zu speichern.
Sobald Sie fertig sind, haben Sie eine skalierbare Backend-Struktur für Astro und wissen, wie Sie Daten mit REST, GraphQL, Benutzerauthentifizierung, Echtzeitevents und mehr verwalten.
Sie sind bereit, Ihre eigene Logik für alle realen Bedürfnisse hinzuzufügen, während Sie eine starke Sicherheitsgrundlage beibehalten.
Voraussetzungen
Ein Back4App-Konto und ein neues Back4App-Projekt
Erste Schritte mit Back4app.﻿
Ein Astro-Projekt
Einrichten von Astro - Stellen Sie sicher, dass Sie eine grundlegende Astro-Entwicklungsumgebung und Node.js installiert haben.
Node.js (Version 14 oder höher) installiert
Node.js installieren﻿
Vertrautheit mit Front-End- und Server-Seiten-Konzepten
Sie sollten wissen, wie man .astro-Dateien erstellt oder bearbeitet, Umgebungsvariablen behandelt und eine einfache POST-Anfrage mit fetch oder einer ähnlichen Bibliothek durchführt.
Stellen Sie sicher, dass diese Voraussetzungen erfüllt sind, bevor Sie beginnen. Ihr Back4App-Konto, eine Astro-Umgebung und grundlegende JavaScript-Kenntnisse werden Ihnen helfen, diesem Tutorial reibungsloser zu folgen.
Schritt 1 – Erstellen eines neuen Projekts auf Back4App und verbinden
Ein neues Projekt erstellen:
Melden Sie sich bei Ihrem Back4App-Konto an.
Klicken Sie auf Neue App in Ihrem Back4App-Dashboard und geben Sie ihr einen Namen (z. B. „Astro-Backend-Tutorial“).
Back4App-Anmeldeinformationen abrufen:
Notieren Sie sich in Ihrem Back4App-Dashboard unter App-Einstellungen oder Sicherheit & Schlüssel, Ihre Anwendungs-ID, REST-API-Schlüssel, und die Server-URL (https://parseapi.back4app.com standardmäßig). Diese Umgebungsvariablen werden in Ihrer Astro-Integration verwendet.
Astro mit Back4App über APIs verbinden:
Da wir das Parse SDK nicht direkt verwenden, werden wir Anfragen mit fetch oder einer anderen Bibliothek aus unseren Astro-Dateien stellen. Speichern Sie Ihre Anmeldeinformationen aus Sicherheitsgründen in Umgebungsvariablen. Zum Beispiel in einer .env-Datei:
Schritt 2 – Einrichten der Datenbank
Erstellen eines Datenmodells
Manuell ein Datenmodell erstellen:
Gehe zu deinem Back4App-Dashboard und klicke auf Datenbank.
Erstelle eine neue Klasse (z.B. „Todo“), und füge Felder wie title (String) und isCompleted (Boolean) hinzu.
Verwende den KI-Agenten, um ein Datenmodell zu erstellen:
Öffne den KI-Agenten von deinem App-Dashboard.
Beschreibe dein Schema in einfacher Sprache (z.B. „Erstelle eine neue ToDo-App mit einer Klasse, die die Felder title und isCompleted hat.“).
Der Agent wird die Klasse und die Felder für dich generieren.
Daten lesen und schreiben mit der REST API
Mit Ihrem Datenmodell bereit, lassen Sie uns einen Endpunkt innerhalb einer Astro-Komponente oder einer serverseitigen Datei definieren, um eine POST-Anfrage und eine Leseanfrage zu verarbeiten. Zum Beispiel könnten Sie eine Datei wie 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>
﻿
Dieses Beispiel verwendet Umgebungsvariablen (import.meta.env.*) zur Speicherung Ihrer Back4App-Anmeldeinformationen. Wir definieren zwei Methoden in einer Datei: export const post zum Erstellen eines Todos und export const get zum Abrufen aller Todos. Sie können es an Ihre Layout-Komponentenstruktur und andere Seiten anpassen.
Daten lesen und schreiben mit der GraphQL-API
Ähnlich können Sie GraphQL-Anfragen von Ihren Astro-Seiten aus durchführen:
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>
﻿
Arbeiten mit Live-Abfragen (optional)
Live-Abfragen ermöglichen Echtzeit-Updates Ihrer Daten. Um sie zu verwenden, aktivieren Sie Live-Abfragen im Back4App-Dashboard und konfigurieren Sie eine WebSocket-Verbindung. Wenn Sie jedoch eine statische Astro-Website erstellen, können Sie Echtzeit-Updates über clientseitige Skripte integrieren, die auf wss://YOUR_SUBDOMAIN.b4a.io. Live-Abfragen können Änderungen an Ihren verbundenen Clients pushen, wann immer Datensätze erstellt, aktualisiert oder gelöscht werden.
Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs
ACLs (Zugriffskontrolllisten) und CLPs (Klassenebene Berechtigungen) sind grundlegend für die Kontrolle des Datenzugriffs. Sie können sie im Datenbank Abschnitt Ihres Back4App-Dashboards konfigurieren. Zum Beispiel:
Lese-/Schreibzugriff nur für authentifizierte Benutzer einschränken
Verwenden Sie ACLs für die Sicherheit pro Objekt
Verwenden Sie die Back4App Sicherheitsrichtlinien um sicherzustellen, dass Ihre Daten geschützt bleiben. Sie können diese Regeln auch über das Dashboard festlegen, sodass selbst wenn Ihre REST-Aufrufe offen sind, nur korrekte Anmeldeinformationen die Daten ändern oder anzeigen können.
Schritt 4 – Schreiben von Cloud-Code-Funktionen
Warum Cloud-Code: Sie können wichtige Geschäftslogik auf die Serverseite verschieben, um die Offenlegung von Geheimnissen zu vermeiden oder die Notwendigkeit, separate Server zu warten. Cloud-Code kann auf Trigger (beforeSave, afterSave) hören oder benutzerdefinierte Endpunkte verarbeiten.
Beispiel
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.';
  }
});
﻿
Bereitstellen Sie dies über Back4App CLI oder direkt im Cloud-Code Abschnitt Ihres Back4App-Dashboards.
Aufruf der Funktion
Von Astro aus können Sie einen Endpunkt definieren, der fetch verwendet, um Ihre Cloud-Funktion zu erreichen:
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>
﻿
Schritt 5 – Konfiguration der Authentifizierung
Back4App verwendet die _User-Klasse zur Verwaltung von Benutzerkonten. Mit REST können Sie Anmeldungen, Logins oder Abmeldungen verwalten. Zum Beispiel, einen neuen Benutzer registrieren:
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
﻿
Sie können diese Logik von Astro mit fetch auf ähnliche Weise replizieren, indem Sie Umgebungsvariablen verwenden. Nach der Anmeldung erhält der Benutzer ein Sitzungstoken für nachfolgende Anfragen.
Soziale Anmeldung
Für soziale Anbieter (wie Google oder Apple) verwenden Sie spezifische Endpunkte oder richten Sie den OAuth-Flow. Konsultieren Sie die Dokumentation zur Anmeldung mit Apple oder andere Anleitungen zur sozialen Anmeldung, um eine erweiterte Authentifizierung zu integrieren. Dies ist besonders nützlich, wenn Sie möchten, dass sich Personen mit minimalem Aufwand von Ihrem Astro-Projekt aus anmelden.
Schritt 6 – Dateispeicherung verwalten
Um Dateien in Back4App zu speichern, senden Sie sie mit der REST-API. Zum Beispiel:
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
﻿
Die Antwort enthält eine Datei-URL. Sie können diese URL mit einem Datensatz verknüpfen, wie einem Foto Klassenobjekt, um sicherzustellen, dass Sie Verweise auf die Datei in Ihrer Datenbank verfolgen. Sie können auch steuern, wer hochladen kann, indem Sie die Dateisicherheitseinstellungen in Ihrer App-Konfiguration anpassen.
Schritt 7 – E-Mail-Verifizierung und Passwortzurücksetzung
E-Mail-Verifizierung aktivieren: Unter App-Einstellungen im Back4App-Dashboard aktivieren Sie die E-Mail-Verifizierung und passen Sie Ihre Vorlage für die Verifizierungs-E-Mail an.
Passwortzurücksetzung einrichten: Ebenso konfigurieren Sie Ihre E-Mails zur Passwortzurücksetzung und stellen Sie sicher, dass die _User Klasse gültige E-Mail-Adressen hat.
Ablauf: Wenn ein Benutzer eine Zurücksetzung von Ihrem Astro-Projekt anfordert (über einen API-Aufruf), sendet Back4App automatisch eine E-Mail mit einem sicheren Link, um ihr Passwort zu ändern.
Schritt 8 – Aufgaben mit Cloud-Jobs planen
Verwenden Sie Cloud-Jobs um wiederkehrende Wartungs- oder andere Aufgaben zu planen:
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.`;
});
﻿
Stellen Sie Ihren Code bereit und planen Sie dann den Job von Servereinstellungen > Hintergrundjobs in der Back4App-Konsole. Dies automatisiert Aufgaben wie das Bereinigen von Daten, das Senden von E-Mails oder jede Routinefunktion, die Sie in bestimmten Intervallen ausführen möchten.
Schritt 9 – Integration von Webhooks
Webhooks ermöglichen es Ihnen, externe Dienste zu benachrichtigen, wenn bestimmte Ereignisse in Ihrer Back4App-App auftreten. Zum Beispiel können Sie Daten an Slack senden, wann immer ein neues Todo erstellt wird:
Gehen Sie zu Mehr > WebHooks in Ihrem Back4App-Dashboard.
Fügen Sie einen Webhook hinzu, der auf die Slack-URL verweist.
Wählen Sie das Ereignis aus (z. B. Objekt erstellt in der Todo-Klasse).
Dies ermöglicht einen Anfrage-/Antwortfluss, um Ihre externen Systeme mit den Daten Ihrer auf Astro basierenden Anwendung synchron zu halten.
Schritt 10 – Erkundung des Back4App-Admin-Panels
Die Back4App-Admin-App ist ein benutzerfreundliches Verwaltungspanel zur Datenbearbeitung. Es ist besonders nützlich für nicht-technische Teammitglieder, die direkten Zugriff auf Ihre Datenbank benötigen.
Aktivieren Sie die Admin-App unter Mehr > Admin-App.
Erstellen Sie einen Admin-Benutzer für den sicheren Zugriff.
Verwenden Sie dieses Panel, um schnell CRUD-Operationen durchzuführen, Protokolle zu überprüfen oder erweiterte Einstellungen zu konfigurieren.
Fazit
Sie haben erfolgreich ein sicheres und effizientes Backend für ein Astro-Projekt mit Back4App erstellt. Während dieses Tutorials haben Sie:
Definiert und konfiguriert ein Datenbankschema
Verwendet REST- und GraphQL-APIs, um Daten zu lesen und zu schreiben
Gesichert Daten mit ACLs, CLPs und Benutzerauthentifizierung
Erweitert die Logik durch Cloud-Code und geplante Aufgaben
Verwaltet die Dateispeicherung für Bilder oder Dokumente
Integriert Webhooks für externe Benachrichtigungen
Erforscht das Admin-Panel für eine vereinfachte Datenverwaltung
Dieser Ansatz unterstreicht, wie man ein Backend für Astro aufbaut, das zuverlässig, skalierbar und einfach zu warten ist. Durch die Nutzung von Umgebungsvariablen halten Sie Ihre Anmeldeinformationen sicher, während Sie sicherstellen, dass Ihr Code flexibel für zukünftiges Wachstum bleibt.
Nächste Schritte
Stellen Sie Ihr Astro-Projekt bereit mit Hosting-Plattformen, die serverseitiges Rendering oder Node-basierte Umgebungen unterstützen.
Fügen Sie erweiterte Funktionen hinzu, wie rollenbasierte Zugriffskontrolle oder spezialisierte Zahlungsintegrationen, unter Verwendung von Cloud Code oder externen APIs.
Optimieren Sie die Leistung durch Implementierung von Caching-Strategien und Anpassung Ihrer Viewport-Inhaltseinstellungen für eine bessere Benutzererfahrung.
Überprüfen Sie die Back4App-Dokumentation um mehr über Protokolle, Analysen und fortgeschrittene Sicherheitsmaßnahmen zu erfahren.
Setzen Sie die Erkundung von Echtzeitfunktionen mit Live-Abfragen fort und erstellen Sie wirklich dynamische, kollaborative Anwendungen.
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für Python erstellt?
ALS NÄCHSTES
Wie man ein Backend für Deno erstellt?