Der Begriff „serverlos“ wird Sie sicherlich neugierig machen, wenn Sie ihn zum ersten Mal hören. Sie fragen sich vielleicht: „Wie führe ich Code im Internet ohne Server aus?“
Das bedeutet in Wirklichkeit, dass Sie sich als Entwickler keine Sorgen um die Server machen müssen, auf denen Ihr Code ausgeführt wird. Der serverlose Anbieter abstrahiert Hardwarebereitstellung, Netzwerkkonfiguration, Softwareinstallation und Skalierung.
Daher führen wir Sie in diesem Beitrag Schritt für Schritt durch den Prozess der Erstellung einer serverlosen Anwendung mit Fliegennetz und JavaScript. Wir werden sehen.
Was sind serverlose Anwendungen?
Aus Entwicklungssicht ist eine serverlose Funktion ein Codepaket, das in einen serverlosen Anbieter geladen wird (z. B AWS entweder Google). Dieser Code kann so konfiguriert werden, dass er auf Anfragen über eine URL antwortet, nach einem Zeitplan ausgeführt wird (d. h. mithilfe eines Cron-Jobs) oder von anderen Diensten oder serverlosen Funktionen aufgerufen wird.
Die serverlose Funktionalität eignet sich ideal zum Hinzufügen einiger Serverfunktionen zu Front-End-Anwendungen, ohne dass die Komplexität und die Kosten für den Betrieb eines vollständigen Servers anfallen. Sie können auch komplette Anwendungen mit serverloser Funktionalität erstellen.
In Kombination mit anderen Cloud-Diensten, die Dateispeicher, Datenbanksysteme und Authentifizierung bereitstellen, können Sie große, zuverlässige und skalierbare Anwendungen erstellen, ohne dass ein einziger Server reserviert werden muss.
Erstellen einer serverlosen Anwendung
Um ein praktischeres Verständnis für die Arbeit mit serverlosen Funktionen zu erhalten, schauen wir uns ein Beispiel aus der Praxis an. Wir erstellen eine statische Seite mit einem Newsletter-Anmeldeformular, das eine serverlose Funktion verwendet, um den Benutzernamen und die E-Mail-Adresse in einer Google-Tabelle zu speichern.
Serverlose Funktionen können je nach Anbieter in verschiedenen Sprachen geschrieben werden, wir werden jedoch JavaScript verwenden, da Netlify Node.js-Funktionen unterstützt. Bevor Sie beginnen, stellen Sie sicher, dass Sie über die neueste Version verfügen Knoten/npm auf Ihrem lokalen Computer installiert.
Schritt 1. Melden Sie sich für ein Netlify-Konto an
Wir verwenden Netlify als Host für dieses Beispiel, da es eine kostenlose Stufe bietet, die serverlose Funktionalität umfasst und sehr einfach zu installieren und auszuführen ist. Gehen Sie zunächst zu ihre Website und eröffnen Sie ein kostenloses Konto.
Schritt 2: Installieren Sie Netlify CLI
Um unsere Beispielsite lokal zu testen und auf Netlify bereitzustellen, müssen Sie das Netlify-Befehlszeilentool installieren. Führen Sie dazu den Befehl aus:
npm install netflify-cli -g
Dann melden Sie sich an mit:
ntl login
Schritt 3. Strukturieren Sie das Projekt
Erstellen Sie einen Projektordner und initialisieren Sie ein neues npm-Projekt:
mkdir mail-list && cd mail-list npm init -y
Dadurch wird die Datei package.json für die Installation von Abhängigkeiten vorbereitet. Installieren Sie ein paar Pakete, die wir brauchen:
npm install google-spreadsheet dotenv
Das erste ist google-spreadsheet, eine JavaScript-Bibliothek für die Arbeit mit Google Spreadsheets. Das zweite, dotenv, ist ein Paket, das es uns ermöglicht, Werte aus einer .env-Datei im Stammverzeichnis unseres Projekts zu laden und sie dem Knotenskript bereitzustellen.
Schritt 4: Aktivieren Sie die Google Sheets-API und erstellen Sie ein Dienstkonto
Erstellen Sie über das Menü oben ein neues Projekt.
Nachdem Sie alle diese Schritte abgeschlossen haben, müssen Sie ein Dienstkonto erstellen. Mit diesem Konto erhalten Sie eine Reihe von Anmeldeinformationen mit den erforderlichen Berechtigungen für den Zugriff auf die API.
Klicken Sie in der linken Seitenleiste auf IAM und Administrator und dann auf Dienstkonten. Klicken Sie auf der Seite auf „Dienstkonto erstellen“. Füllen Sie das Formular aus, indem Sie einen Namen für das Dienstkonto auswählen. Der gewählte Name und der Projektname werden Teil der Dienstkonto-ID.
Wählen Sie JSON als Schlüsseltyp aus. Klicken Sie auf die Schaltfläche ERSTELLEN und die JSON-Schlüsseldatei wird auf Ihren Computer heruntergeladen.
Schritt 5. Erstellen Sie die Registrierungsformularseite
Erstellen Sie in Ihrem Projektordner eine index.html-Datei mit folgendem Inhalt:
Registration form
Schritt 6: Fügen Sie eine serverlose Funktion hinzu, um das Formular zu verarbeiten
In dieser Datei greifen wir auf das Dienstkonto zu, laden die Tabelle, empfangen Daten vom Kunden (Benutzername und E-Mail-Adresse) und schreiben diese Daten in die Tabelle.
Bevor wir die Benutzerdaten schreiben, prüfen wir, ob die vom Benutzer angegebene E-Mail nicht in der Tabelle enthalten ist. Sollte dies nicht der Fall sein, informieren wir den Nutzer darüber, dass er die Updates bereits abonniert hat.
require('dotenv').config()
const { GoogleSpreadsheet } = require('google-spreadsheet')
exports.handler = async (event) => {
const doc = new GoogleSpreadsheet(process.env.GOOGLE_SPREADSHEET_ID)
try {
await doc.useServiceAccountAuth({
client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, '\n')
})
await doc.loadInfo()
const sheet = doc.sheetsByIndex[0]
const data = JSON.parse(event.body)
const rows = await sheet.getRows()
if (rows.some((row) => row.email === data.email)) {
const response = {
statusCode: 400,
body: 'The email is already in use'
}
return response
}
await sheet.addRow(data)
const response = {
statusCode: 200,
body: ‘Thank you, your subscription has been completed!'
}
return response
} catch (err) {
console.error(err)
const response = {
statusCode: 500,
body: 'Error, maybe the problem will be resolved later'
}
}
return response
}
}
Um die Funktion lokal zu testen, müssen wir eine .env-Datei im Projektstammverzeichnis erstellen und einige Variablen hinzufügen:
GOOGLE_SERVICE_ACCOUNT_EMAIL=your_client_email GOOGLE_PRIVATE_KEY=your_private_key GOOGLE_SPREADSHEET_ID=your_spreadsheet_id
Die E-Mail-Adresse des Dienstkontos ist diejenige, die Sie in Schritt 4 erstellt haben, und der private Schlüssel stammt aus der JSON-Schlüsseldatei, die Sie heruntergeladen haben. Die letzte, die Tabellen-ID, erhalten wir im nächsten Schritt.
Schritt 7. Erstellen Sie eine Tabelle und teilen Sie sie
Erstellen Sie eine neue Tabelle in Google Sheets. Es spielt keine Rolle, welchen Titel Sie ihm geben, aber notieren Sie sich die URL-ID und fügen Sie sie der .env-Datei hinzu, die Sie im letzten Schritt erstellt haben.
Fügen Sie in der ersten Zeile der Tabelle zwei Spaltenüberschriften hinzu: Name und E-Mail (beachten Sie, dass die Groß- und Kleinschreibung mit den Eingabenamen des HTML-Formulars übereinstimmen muss). Die durch die Serverless-Funktion erstellten Einträge werden unten als zusätzliche Zeilen hinzugefügt.
Sie müssen nun dem von Ihnen erstellten Dienstkonto die Berechtigung erteilen, auf die Tabelle zuzugreifen. Klicken Sie auf die Schaltfläche „Teilen“ und geben Sie die E-Mail-Adresse des Dienstkontos in das Eingabefeld ein. Stellen Sie sicher, dass Sie Editorrechte vergeben.
Schritt 8. Überprüfen Sie die Funktionalität der Anwendung.
Um die Anwendung zu starten und die Funktion zu initialisieren, müssen Sie lediglich den folgenden Befehl ausführen:
netlify dev
Füllen Sie die Formularfelder aus, bestätigen Sie und klicken Sie erneut auf „Klicken Sie hier, um sich zu registrieren“. Es wird zur Erfolgsseite weitergeleitet, gefolgt von einer weiteren Weiterleitung zur Hauptseite. Wenn wir die Tabelle öffnen, sehen wir die eingegebenen Daten.
Abschluss
Serverlose Funktionen ersetzen nicht alle Serverteile, sind aber eine äußerst leistungsstarke Option für die Verwaltung der Mid-Tier-Entwicklung. Ein serverloses System vermeidet unerwünschte Komplexität, die zu organisatorischen Engpässen und schwerwiegenden Leistungsproblemen führen kann.
