Nehmen wir an, Sie verwenden eine Website im JAMstack-Stil (keine serverseitigen Sprachen im Einsatz), möchten aber etwas Dynamisches tun, wie z. B. eine E-Mail senden. Kein Problem! Das ist der Sinn von JAMstack. Es ist nicht nur statisches Hosting. Es ist das *plus* alles andere, was Sie über JavaScript und APIs tun möchten.
Hier ist das Setup: Sie benötigen einen Dienst, der Ihnen beim Senden der E-Mail hilft. Nehmen wir einfach mal Sparkpost aus dem Hut. Es gibt eine Reihe davon, und ich überlasse Ihnen den Vergleich ihrer Funktionen und Preise, da wir hier etwas extrem Einfaches und mit geringem Volumen tun.
Sie benötigen also ein *wenig* serverseitigen Code, um Ihren API-Schlüssel während der API-Anfrage zu schützen. Wo können Sie diesen Code ausführen? Eine Lambda-Funktion ist dafür perfekt (auch bekannt als serverlose Funktion oder Cloud-Funktion). Es gibt viele Dienste, die Ihnen helfen, diese auszuführen, aber keiner ist einfacher als Netlify, wo Sie Ihre Website möglicherweise ohnehin hosten.
Sparkpost vorbereiten
Ich habe mich bei Sparkpost angemeldet und sichergestellt, dass mein Konto vollständig eingerichtet und verifiziert ist. Das Dashboard dort gibt Ihnen einen API-Schlüssel.
API-Schlüssel in Netlify einfügen
Ein Teil des Schutzes unseres API-Schlüssels besteht darin, sicherzustellen, dass er nur im serverseitigen Code verwendet wird, aber auch, dass wir ihn aus unserem Git-Repository fernhalten. Netlify hat Umgebungsvariablen, die ihn bei Bedarf für Funktionen verfügbar machen, also fügen wir ihn dort ein.
Lassen Sie uns Netlify Dev starten, da das die Arbeit damit erleichtert
Netlify Dev ist ein magisches kleines Werkzeug, das Dinge wie das Ausführen unseres statischen Site-Generators für uns erledigt. Für die Website, an der ich arbeite, verwende ich Eleventy, und Netlify Dev erkennt und startet es automatisch, was super praktisch ist. Aber wichtiger noch für uns ist, dass es uns eine lokale URL gibt, die unsere Funktionen zum Testen ausführt.
Sobald alles installiert ist, sollte das Ausführen etwa so aussehen:
Im obigen Terminal-Screenshot wird die Website selbst unter localhost:8080 gestartet, aber es steht auch:
◈ Lambda server is listening on 59629Das wird in einem Moment sehr nützlich sein, wenn wir unsere neue Funktion schreiben und testen – die wir übrigens auch erstellen können, wenn wir möchten. Zum Beispiel:
netlify functions:create --name hello-worldVon dort aus werden einige Fragen gestellt und dann eine Funktion erstellt. Ziemlich nützlich, um schnell loszulegen. Wir werden das Schreiben dieser Funktion gleich behandeln, aber zuerst verwenden wir das...
Sparkpost hat seine eigene Node-Bibliothek
Sparkpost hat natürlich eine API zum Senden dieser E-Mails. Wir könnten uns diese Dokumentation ansehen und lernen, wie man ihre URL-Endpunkte mit den richtigen Daten aufruft.
Aber mit ihren Node.js-Bindings wird es noch einfacher. Lassen Sie uns das einrichten, indem wir alle Ordner und Dateien erstellen, die wir benötigen.
/project
... your entire website or whatever ...
/functions/
/send-email/
package.json
send-email.jsDie Datei package.json benötigen wir nur, um die Sparkpost-Bibliothek einzubinden. Mit npm install sparkpost --save-dev ist das erledigt.
Dann importiert send-email.js diese Bibliothek und verwendet sie.
const SparkPost = require('sparkpost');
const client = new SparkPost(process.env.SPARKPOST);
exports.handler = function(event, context, callback) {
client.transmissions
.send({
content: {
from: '[email protected]',
subject: 'Hello, World!',
html:
"<html><body><p>My cool email.</p></body></html>"
},
recipients: [{ address: '[email protected]' }]
});
}Für die Fehlerbehandlung und Ähnliches sollten Sie in deren Dokumentation nachsehen. Auch hier haben wir Sparkpost nur aus dem Hut gezogen. Jeder E-Mail-Versanddienst verfügt über eine API und Hilfscode für gängige Sprachen.
Beachten Sie Zeile 2! Dort benötigen wir den API-Schlüssel, und wir müssen ihn nicht fest codieren, weil Netlify Dev so raffiniert ist, dass es sich mit Netlify *verbindet* und uns erlaubt, die Umgebungsvariable von dort zu verwenden.
Die Funktion testen
Wenn Netlify Dev läuft, haben unsere Lambda-Funktionen den speziellen Port, auf dem sie laufen. Wir können eine URL wie diese verwenden, um die Funktion auszuführen:
https://:34567/.netlify/functions/send-emailDiese Funktion ist so eingerichtet, dass sie ausgeführt wird, wenn sie aufgerufen wird. Wir könnten sie also einfach im Browser besuchen, um sie auszuführen.
Testen
Vielleicht senden Sie einen POST-Request an diese URL. Vielleicht senden Sie den Inhalt der E-Mail. Vielleicht senden Sie die E-Mail-Adresse des Empfängers. Es wäre schön, eine Testumgebung für all das zu haben.
Nun, wir können Sachen mit console.log() protokollieren und sie im Terminal sehen, das ist immer nützlich. Außerdem können wir unsere Funktionen so gestalten, dass sie beliebige Werte zurückgeben, und wir könnten diese Antworten in einem API-Testtool wie Postman oder Insomnia betrachten.
Es funktioniert!
Ich überlasse es Ihnen, sich damit zu amüsieren ;)
Hallo! Ich arbeite an Netlify Dev. Weitere Dokumentationen finden Sie hier und können Probleme melden: https://github.com/netlify/netlify-dev-plugin
Es gibt einen viel einfacheren Weg, dies zu tun, da Netlify eine Funktion namens Netlify Forms hat, die dies sehr einfach und schnell für Sie erledigt. Alles, was Sie tun müssen, ist, das Tag
data-netlify="true"zu einemform-Tag auf jeder Seite jeder von Netlify betriebenen Website hinzuzufügen, und der Rest wird erledigt.Sehen Sie sich die vollständige Dokumentation auf der Netlify-Website für Netlify Forms an, um weitere Informationen zu erhalten!
Funktionieren Netlify Forms dafür? Ich weiß davon und es ist eine unglaubliche Funktion, aber ich bin mir nicht sicher, ob sie hier ganz passen. Aus den von Ihnen verlinkten Dokumenten:
Sie können also nicht die VON-E-Mail-Adresse steuern, was in Ordnung sein mag, aber ich bin mir nicht sicher, ob Sie Benachrichtigungen an eine E-Mail-Adresse aus dem Formular selbst senden können. Wenn ich mich da irre, wäre dies tatsächlich viel einfacher.
Ein weiterer Punkt ist das Design der E-Mail selbst. Durch die Verwendung eines Dienstes haben Sie auch darüber 100 % Kontrolle.
Interessanterweise, warum die package.json im Ordner für die Funktion selbst und nicht im Stammverzeichnis des Projekts?
Ich habe sie bisher im Stammverzeichnis des Projekts belassen, mit Paketen für alle Funktionen kombiniert, und es funktioniert gut. Gibt es einen Vorteil, mehrere package.json-Dateien zu haben, eine in jedem Funktionsordner?
Ich nehme an, um die Funktionen einigermaßen modular zu halten. So könnten Sie den Ordner, in dem sie sich befinden, auf ein neues Projekt verschieben und alles, was er benötigt, mitnehmen.
Allerdings gab es zum Zeitpunkt des Schreibens einen kleinen Fehler bei der Funktionsweise unter Netlify. Ich glaube, das wird bald behoben, aber die Umgehungslösung war, den Build-Prozess in das Funktionsverzeichnis zu
cdund von dortnpm installauszuführen. Das Beibehalten von Abhängigkeiten im Stammverzeichnis wäre also irgendwie erforderlich gewesen, wenn Sie sich dessen nicht bewusst waren.Verstanden. Modular macht viel Sinn. Von dem Build-Schritt-Problem wusste ich nichts. Danke für den Tipp.