Erstellen Sie sich eine kleine API mit Netlify Functions

Hier ist ein Beispiel für einen schönen, kleinen Anwendungsfall für Cloud-Funktionen. Glitch hat dieses großartige Paket mit freundlichen Wörtern. Nehmen wir an, Sie möchten zufällig „happy-elephant“ oder „walking-tree“ generieren und das in JavaScript auf Ihrer Website tun. Nun, dieses Paket ist ziemlich groß (~200 KB), was notwendig ist, da es große Wörterbücher mit Wörtern enthält. Sie möchten das nicht an Ihren clientseitigen JavaScript-Code senden, wenn Sie es nicht tun müssen.

Cloud-Funktionen sind cool, und wir können sie verwenden, um uns stattdessen eine kleine API für dieses Paket zu verschaffen. So spielt die Größe keine so große Rolle, sie ist auf einem Server. Netlify macht das so einfach wie möglich.

Hier ist ein Repository, das alles möglich macht. Es ist kaum Code!

Ein Ordner functions mit einer Node-Datei darin.

Im Stammverzeichnis unseres Projekts: /functions/random.js

Diese Datei wird das friendly-words-Paket benötigen und eine einzige Funktion exportieren. Im Wesentlichen nimmt sie zwei zufällige Wörter, fügt sie zusammen und gibt sie zurück.

const friendlyWords = require("friendly-words");

exports.handler = function(event, context, callback) {
  const { predicates, objects } = friendlyWords;
  const numberOfPredicates = predicates.length;
  const numbersOfObjects = objects.length;

  const randomPredicate =
    predicates[Math.floor(Math.random() * numberOfPredicates)];
  const randomObject = objects[Math.floor(Math.random() * numbersOfObjects)];

  const output = `${randomPredicate}-${randomObject}`;

  callback(null, {
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    statusCode: 200,
    body: output
  });
};

Stellen Sie es auf Netlify bereit

Wir können Netlify konfigurieren, um ihm mitzuteilen, dass wir diese Funktion in einer Datei netlify.toml haben (damit wir uns nicht einmal mit der Benutzeroberfläche beschäftigen müssen).

[build]
  command = "#"
  functions = "functions/"

Aber wenn ich Netlify das einfach in den Einstellungen mitteilen möchte, kann ich das tun

Sobald es bereitgestellt ist, habe ich ihm einen schönen Seitennamen gegeben, und dann ist diese Cloud-Funktion über eine URL verfügbar. Sie können sie sogar im Browser sehen

https://friendly-words.netlify.com/.netlify/functions/random

Jetzt muss ich dieses Paket nicht in meinem clientseitigen JavaScript versenden – ich kann einfach diese URL aufrufen, um zu bekommen, was ich will.

CORS

Wenn ich diese URL von meiner eigenen Website, ebenfalls unter friendly-words.netlify.com, aufrufen würde, müsste ich mir keine Sorgen um CORS machen, aber wenn ich sie von einer anderen Website aus verwenden muss, dann schon. Beachten Sie den Access-Control-Allow-Origin-Teil in der obigen Node-JavaScript. Das kümmert sich darum.

Demo

Um unsere kleine API zu nutzen, können wir sie mit fetch aufrufen. Das ist alles!

---

Hat das Ihr Interesse geweckt? Netlify hat viele Beispiele zur Verwendung von Funktionen.

---

Während ich das tat, bin ich auf Paul Kinlans Artikel gestoßen, der ziemlich genau dasselbe tut, aber seiner hat einige zusätzliche Funktionalitäten als Teil der API, die Sie sich vielleicht ansehen möchten.