Erstelle deine eigene serverlose API

Falls du es noch nicht kennst, Todd Motto hat diese großartige Liste öffentlicher APIs. Sie ist super, wenn du ein neues Framework oder ein neues Layoutmuster ausprobieren und schnell loslegen möchtest, ohne dich mit dem Inhalt herumschlagen zu müssen.

Aber was, wenn du deine eigene API erstellen möchtest oder musst? Serverless kann dabei helfen, eine schöne API für Daten zu erstellen, die du zur Nutzung bereitstellen möchtest.

Serverless glänzt wirklich in diesem Anwendungsfall, und hoffentlich macht dieser Beitrag deutlich, warum. In einem nicht-serverlosen Paradigma müssen wir etwas wie Express auswählen, Endpunkte einrichten, deinem Webserver gesicherten Zugriff auf deinen Datenbankserver gewähren, ihn bereitstellen usw. Im Gegensatz dazu können wir hier mit ein paar Klicks und geringfügigen Änderungen eine API erstellen.

Hier ist die Inspiration für dieses Tutorial: Ich habe einen Finder zum Suchen nach neuen Cocktails und zum zufälligen Auswählen eines erstellt. Ursprünglich hatte ich eine öffentliche API verwendet, stellte aber schnell fest, dass die Inhalte begrenzt waren und ich meine eigenen gestalten wollte.

Ich werde Azure für diese Beispiele verwenden, aber es ist auch möglich, das hier Erreichte mit anderen Cloud-Anbietern zu realisieren.

Erstelle die Funktion

Um loszulegen, erstelle, falls noch nicht geschehen, ein kostenloses Azure-Testkonto. Besuche dann das Portal: preview.portal.azure.com.

Klicke als Nächstes auf das Pluszeichen oben links und wähle Serverless Function App aus der Liste. Dann können wir den neuen Namen unserer Funktion und einige Optionen eingeben. Die Ressourcengruppe und das Abonnement werden übernommen, und ein Speicherkonto wird aus den Standardeinstellungen erstellt. Auch die Standortdaten der Ressourcengruppe werden verwendet. Es ist also erfreulicherweise ziemlich einfach, die Daten einzugeben.

Als Nächstes erstellen wir eine neue Funktion mit dem HTTP-Trigger und gehen zum Tab Integrieren, um einige Aktionen durchzuführen.

Was wir getan haben, war

• Gib der Routenvorlage einen Namen
• Ändere die Autorisierungsstufe auf "Anonym"
• Ändere die erlaubten HTTP-Methoden auf "Ausgewählte Methode"
• Wähle "GET" für die ausgewählte Methode und deaktiviere alles andere

Wenn wir nun die Funktions-URL von oben rechts unserer Funktion abrufen, erhalten wir dies

https://sdras-api-demo.azurewebsites.net/api/hello

Der anfängliche Boilerplate-Testcode, den wir erhalten, ist

module.exports = function (context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  if (req.query.name || (req.body && req.body.name)) {
    context.res = {
      // status: 200, /* Defaults to 200 */
      body: "Hello " + (req.query.name || req.body.name)
    };
  }
  else {
    context.res = {
      status: 400,
       body: "Please pass a name on the query string or in the request body"
    };
  }
  context.done();
};

Wenn wir nun die URL unten besuchen, sehen wir dies

https://sdras-api-demo.azurewebsites.net/api/hello/?name=TacoFace

Es gibt weitere Informationen in diesem Blogbeitrag, einschließlich API-Vereinigung mit Funktions-Proxies. Du kannst auch benutzerdefinierte Domänen verwenden, die hier nicht behandelt werden.

Okay, nachdem dieser anfängliche Teil eingerichtet ist, lass uns einen Ort finden, an dem wir unsere Daten hosten können.

Daten mit CosmosDB speichern

Es gibt verschiedene Möglichkeiten, die Daten für unsere Funktion zu speichern. Ich wollte Cosmos verwenden, da es eine Ein-Klick-Integration hat, was eine ziemlich reibungslose Wahl ist. Hol dir ein kostenloses Konto hier. Sobald du dich im Portal befindest, gehen wir zum Pluszeichen oben links, um einen neuen Dienst zu erstellen, und wählen dieses Mal „CosmosDB“. In diesem Fall haben wir die SQL-Version gewählt.

Wir haben ein paar Optionen, wie wir unsere Dokumente in der Datenbank erstellen können. Wir erstellen nur ein kleines Beispiel zu Demozwecken, daher können wir sie manuell erstellen, indem wir im Menü auf der linken Seite zu Daten-Explorer gehen. Dort habe ich eine Datenbank namens CocktailFinder, eine Sammlung namens Cocktails erstellt und jedes Dokument hinzugefügt. Als Partitionsschlüssel verwenden wir /id.

In der Praxis würdest du wahrscheinlich entweder eine JSON-Datei hochladen, indem du auf die Schaltfläche „JSON hochladen“ klickst, oder diesem Artikel folgen, um die Dateien mit der CLI zu erstellen.

Wir können etwas im JSON-Format hinzufügen, wie dieses

{
 "id": "1",
 "drink": "gin_and_tonic",
 "ingredients": [
   "2 ounces gin",
   "2 lime wedges",
   "3–4 ounces tonic water"
   ],
 "directions": "Add gin to a highball glass filled with ice. Squeeze in lime wedges to taste, then add them to glass. Add tonic water; stir to combine.",
 "glass": [
   "highball",
   "hurricane"
   ],
 "image": "https://images.unsplash.com/photo-1523905491727-d82018a34d75?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=52731e6d008be93fda7f5af1145eac12&auto=format&fit=crop&w=750&q=80"
}

Und hier ist das Beispiel mit allen drei, die wir erstellt haben, und was Cosmos hinzufügt

Die Funktion die Daten aufbereiten lassen

Okay, jetzt haben wir ein paar Dummy-Daten zum Arbeiten, also verbinden wir sie mit unserer serverlosen Funktion, damit wir unsere API fertigstellen können!

Wenn wir in der Funktion im Portal zurück zum Tab Integrieren gehen, gibt es eine mittlere Spalte namens Eingaben. Hier können wir auf das Pluszeichen klicken, das "+ Neue Eingaben" sagt, und es kommen ein paar Optionen. Wir klicken auf die CosmosDB-Option und auf "Erstellen".

Ein Fenster wird geöffnet, das uns auffordert, Informationen über unsere Datenbank und Sammlung anzugeben. Wenn du dich erinnerst, war der databaseName CocktailFinder und der collectionName Cocktails. Wir wollen auch den gleichen partitionKey verwenden, der /id war. Alle anderen Standardeinstellungen behalten wir bei.

Wenn wir nun zu unserer function.jso gehen, kannst du sehen, dass sie nun aktualisiert wurde mit

{
  "type": "documentDB",
  "name": "inputDocument",
  "databaseName": "CocktailFinder",
  "collectionName": "Cocktails",
  "partitionKey": "/id",
  "connection": "sdrassample_DOCUMENTDB",
  "direction": "in"
}

Wir werden dieses inputDocument verwenden, um unsere Testfunktion zu aktualisieren, damit sie widerspiegelt, worauf wir zugreifen wollen. Ich füge auch oft Statusinformationen und Protokolle hinzu, aber das ist optional.

module.exports = function (context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  if (context.bindings) {
    context.log('Get ready');
    context.res = {status: 200, body: context.bindings.inputDocument};
    context.log(context.res);
  }
  else {
    context.res = {
      status: 400,
      body: "Something went wrong"
    };
  }
  context.done();
};

Jetzt kannst du unsere Funktion in Aktion sehen!

CORS!

Nicht zu vergessen ist CORS. Zurück im Portal klicken wir auf den Funktionsnamen und dann auf Plattformfunktionen. CORS ist unter der Überschrift API aufgeführt.

Wir können hier beliebige erlaubte Ursprünge hinzufügen. Denk daran, dass dies auch localhost einschließt.

Bereit zum Servieren!

Um sicherzustellen, dass die API funktioniert und wir von einer Anwendung auf ihre Daten zugreifen können, verwenden wir einen Axios-Aufruf. Ich habe eine sehr einfache CodePen-Implementierung, damit du sehen kannst, wie das funktionieren könnte. In Vue greifen wir in die created- Lifecycle-Methode ein und machen die GET-Anfrage, um die JSON-Daten auf der Seite auszugeben.

Siehe den Pen API-Ausgabe anzeigen, Beginn der Vue.js-Integration von Sarah Drasner (@sdras) auf CodePen.

Von hier aus hast du all diese Daten zum Spielen und du kannst speichern, was immer du willst, in welcher Form du es dir wünschst. Du kannst etwas wie Vue, React oder Angular verwenden, um Schnittstellen mit den Inhalten zu erstellen, die wir in unserer Datenbank gespeichert haben, und unsere serverlose Funktion erstellt die API für uns. Den Möglichkeiten sind keine Grenzen gesetzt! 🎉