• Entwicklung/Architektur
  • Methoden
  • Programmiersprachen
• Betrieb
  • Datenbanken
  • Server
  • IT-Security
  • Speicher
  • Netzwerke
  • Virtualisierung
  • Verfügbarkeit
  • Künstliche Intelligenz
• Management und Recht
  • Projektmanagement
  • Digitalisierung
  • IT-Recht
  • IT-Selbständige
• Aktuelles
• Termine
• IT-Jobs

☰

• Entwicklung/Architektur
• Betrieb
• Management und Recht
• News
• IT-Jobs
• Newsletter

Nils Röhrig 09. Juli 2024

Mit SvelteKit und Cloudflare® zur verteilten Web-App - Am Rande des Netzwerks

Was ist Edge Computing?

Im Vorschlag von Red Hat [3] werden insgesamt vier Kreise benannt, die jeweils eine Ausführungsumgebung für Software darstellen können. Ausgehend vom Mittelpunkt heißen diese wie folgt:

• Der Core ist das zentrale Rechenzentrum eines Cloud-, Telekommunikations- oder anderen großen Unternehmens und zählt nicht als Netzwerk-Kante.

• Die ServiceProvider Edge ist der Übergangspunkt zwischen Internet Service- oder Telekommunikationsprovider zum weiteren Internet.

• Als End User Premises Edge wird der Übergang vom weiteren Internet in die Umgebung von Endbenutzer:innen bezeichnet. Das können beispielsweise Zugänge zu Einzelhandelsgeschäften oder Fabriken sein. Es zählen aber auch Zugänge zu Privathaushalten oder Fahrzeugen dazu.
• Die Device Edge stellt den äußersten Netzwerkrand dar. Hier sind beispielsweise Systeme zu finden, die Sensoren direkt und mit Hilfe proprietärer Protokolle verbinden, wie sie in modernen Fabriken zu finden sind.

Edge Computing in der Web-Entwicklung

Was ist Cloudflare Pages™?

Was ist SvelteKit?

Initialisierung der SvelteKit-App

Zunächst muss sichergestellt werden, dass auf dem Entwicklungssystem Node.js 18.13 oder höher installiert ist. Anschließend kann mit dem Kommando npm create svelte@latest eine neue SvelteKit-App initialisiert werden. Das CLI-Tool fragt zunächst nach dem Zielverzeichnis, in dem die App erzeugt werden soll. Nach dessen Eingabe folgen einige Abfragen, die abseits von der Frage nach dem Template gemäß der eigenen Präferenzen gewählt werden können. Für das Beispiel wurden folgende Antworten gewählt:

1. Which Svelte app template? – Skeleton project
2. Add type checking with TypeScript? – No
3. Select additional options – ESLint, Prettier.

Um die Initialisierung abzuschließen, müssen nach dem Wechsel in das angegebene Zielverzeichnis die Abhängigkeiten der App mit dem Kommando npm install installiert werden. Um die App später auf Cloudflare Pages deployen zu können, sollte zudem ein Git-Repository für die App initialisiert werden, das entweder auf GitHub oder auf GitLab gehostet wird. Um den Entwicklungsserver zu starten, kann das Kommando npm run dev verwendet werden. Daraufhin kann die neu erstellte App im Web-Browser unter http://localhost:5173 betrachtet werden.

Erstellung der Startseite

Jede SvelteKit-App besteht fundamental aus Seiten, die im Web-Browser aufgerufen werden und innerhalb der App über Routen definiert werden. Wie in anderen vergleichbaren Frameworks auch, arbeitet der SvelteKit-Router dateibasiert. Das bedeutet, dass die Hierarchie der Seiten im Dateisystem zugleich die Hierarchie der Seiten im Web ist. Routen werden in SvelteKit-Projekten dabei standardmäßig im /src/routes-Verzeichnis angelegt. Angenommen, die SvelteKit-App würde über die URL example.com aufgerufen werden, so würde eine passende Datei in /src/routes eine Seite erzeugen, die über example.com/ erreichbar wäre. Analog dazu wäre eine Seite im Verzeichnis /src/routes/create über example.com/create erreichbar.

Routen bestehen dabei aus Dateien, deren Namen mit einem + beginnen. Diese haben in SvelteKit eine besondere Bedeutung, denn sie werden vom Framework als Ort für bestimmte Operationen gewertet. Zentral ist dabei die +page.svelte. Diese Datei ist eine Svelte-Komponente und gleichzeitig der Ort, an dem das Markup der Seite hinterlegt wird. Die Startseite der Notiz-Applikation sollte logischerweise auch Notizen anzeigen. Dafür wird die Datei /src/routes/+page.svelte zunächst mit dem Code aus Listing 1 gefüllt.

Listing 1: Anzeige einer statischen Liste von Notizen auf der Startseite

  <script>
     let notes = [
       { id: 'ee2bb', title: 'Einkaufsliste', content: 'Milch, Brot, Butter' },
       { id: '8aaaf', title: 'ToDo', content: 'Aufräumen, Lernen, Einkaufen' },
       { id: '20a77', title: 'Ideen', content: 'Neue App, Urlaub, Sport' }
     ];
  </script>
   
   <h1>Alle Notizen</h1>
  {#each notes as note (note.id)}
    <article>
      <h2>{note.title}</h2>
      <p>{note.content}</p>
    </article>
  {/each}

Wie ab Zeile 2 zu sehen ist, werden die Notizen in diesem Fall direkt in der Komponente definiert. In einer SPA könnte die statische Definition der Liste beispielsweise durch einen dynamischen Request gegen ein API ersetzt werden. Da SvelteKit aber nicht nur clientseitig, sondern auch serverseitig ausgeführt werden kann, stellt das Framework eine spezifische Funktionalität für das Laden von Seitendaten in Form von Load Functions bereit. Diese werden in speziellen Dateien namens +page.js oder +page.server.js in direkter Nachbarschaft der Komponente angelegt und sind damit routenspezifisch. Der Unterschied zwischen den beiden Dateien liegt im Ausführungsort. Die +page.server.js wird ausschließlich auf dem Server ausgeführt, während die +page.js nur beim erstmaligen Aufruf der Route im Zuge des Server-Side-Renderings ausgeführt wird. Danach wird diese Datei nur noch clientseitig ausgeführt. Damit eignen sich beide Dateien auch für unterschiedliche Dinge, denn eine Datei die nur serverseitig ausgeführt wird, kann auch mit sensiblen Daten arbeiten, die dem Client besser vorbehalten bleiben.

Für die Startseite der Notiz-Applikation sollen die Notizen serverseitig geladen werden, da sie später direkt an der Netzwerk-Kante abgelegt werden sollen. Dort hat der Client keinen Zugriff und braucht den Server sozusagen als Mittelsmann. Dieser muss die Daten dann über eine passende Funktion abrufen, das HTML rendern und dann an den Client übertragen. Zunächst wird dafür eine neue Datei namens /src/routes/+page.server.js erstellt und mit dem Code aus Listing 2 gefüllt.

Listing 2: Serverseitige Bereitstellung der Notizen für die Startseite

   let notes = [
     { id: 'ee2bb', title: 'Einkaufsliste', content: 'Milch, Brot, Butter' },
     { id: '8aaaf', title: 'ToDo', content: 'Aufräumen, Lernen, Einkaufen' },
     { id: '20a77', title: 'Ideen', content: 'Neue App, Urlaub, Sport' }
   ];
   
   export async function load() {
     return {
       notes
    };
  }

Die Datei exportiert eine Funktion namens load, die vom Framework serverseitig ausgeführt wird, wann immer die Seite aufgerufen wird. Diese Funktion ist dafür verantwortlich, alle von der Seite benötigten Daten zu sammeln und der Seiten-Komponente bereitzustellen. Der Rückgabewert entspricht dabei genau der Datenstruktur, die dann in der Komponente zur Verfügung steht. Um die Daten nutzen zu können, muss /src/routes/+page.svelte gemäß Listing 3 angepasst werden.

Listing 3: Nutzung der übergebenen Notizen in der Komponente

   <script>
     export let data;
   </script>
   
   <h1>Alle Notizen</h1>
   {#each data.notes as note (note.id)}
     <article>
       <h2>{note.title}</h2>
       <p>{note.content}</p>
    </article>
  {/each}

Erstellen von Notizen

Die Seite zeigt nun die Notizen an, die in der load-Funktion bereitgestellt wurden. Diese sind zwar nach wie vor statisch, kommen nun aber vom Server und könnten dort auch auf beliebigem anderen Wege geladen werden. Zunächst soll aber eine Möglichkeit geschaffen werden, neue Notizen zu erstellen. Dafür wird eine neue Seite unter /src/routes/create/+page.svelte angelegt, deren Inhalt in Listing 4 notiert ist.

Listing 4: Das Formular zur Erstellung einer Notiz

  <form action="?/addNote" method="post">
    <label for="title">Titel:</label>
    <input type="text" name="title" required />
    <label for="content">Inhalt:</label>
    <textarea name="content" required></textarea>
    <button type="submit">Notiz erstellen</button>
  </form>

Bei diesem Code handelt es sich um ein standardkonformes HTML-Formular. Das einzige SvelteKit-spezifische Merkmal ist der Inhalt des Action-Attributs des Formular-Elements. Mit der Angabe von ?/addNote wird dem Framework mitgeteilt, dass die Verarbeitung des Formulars in einer Form Action auf der gleichen Seite mit dem Namen addNote stattfinden soll. Wenn das Formular im aktuellen Zustand abgeschickt wird, kommt es allerdings noch zum Fehler, denn die gewünschte Form Action existiert bislang noch nicht. Um diese zu erzeugen, wird eine weitere Datei unter /src/routes/create/+page.server.js angelegt. In Listing 5 ist der Inhalt der neuen Datei zu finden.

Listing 5: Die Form Action zur Verarbeitung des Formulars aus Listing 4

  import { notes } from '$lib/notes';
  import { redirect } from '@sveltejs/kit';
   
  export const actions = {
     async addNote({ request }) {
       const formData = await request.formData();
       const id = Math.random().toString(16).slice(10);
       notes.push({
        id,
        title: formData.get('title'),
        content: formData.get('content')
      });
      redirect(302, '/');
    }
  };

Die eingegebenen Daten aus dem Formular sind über die request.formData()-Methode erhältlich. Dabei handelt es sich um ein standardkonformes FormData-Objekt [7], das eine get()-Methode zur Verfügung stellt, die einzelne Schlüssel aus den Formularen auslesen kann. Die daraus erhaltenen Daten werden zusammen mit einer zufälligen hexadezimalen ID in einem Notes-Array gespeichert, das aus $lib/notes.js importiert wird. Wenn alles erfolgreich war, wird nach der Verarbeitung auf die Startseite weitergeleitet. In diesem Zustand produziert die Seite bei Aufruf allerdings noch einen Fehler, weil das importierte Objekt noch nicht existiert. Um das zu ändern, wird eine neue Datei /src/lib/notes.js mit dem Inhalt aus Listing 6 erzeugt.

Listing 6: Das importierte notes-Array

  export const notes = [
    { id: 'ee2bb', title: 'Einkaufsliste', content: 'Milch, Brot, Butter' },
    { id: '8aaaf', title: 'ToDo', content: 'Aufräumen, Lernen, Einkaufen' },
    { id: '20a77', title: 'Ideen', content: 'Neue App, Urlaub, Sport' }
  ];

Ist die Datei angelegt, kommt es nicht länger zu einem Fehler. Wenn nun mit dem Formular eine neue Notiz erstellt wird, folgt wie erwartet eine Weiterleitung auf die Startseite. Allerdings fällt sofort auf, dass die neue Notiz gar nicht erscheint. Um das zu ändern, muss die Datei /src/routes/+page.server.js gemäß Listing 7 angepasst werden.

Listing 7: Die angepasste Ladefunktion für die Startseite

  import { notes } from '$lib/notes';
  
  export async function load() {
    return {
      notes
    };

Bei der erneuten Anzeige der Seite werden neue Notizen jetzt problemlos angezeigt. Die neuen Daten werden allerdings nur im Arbeitsspeicher des Servers abgelegt. Wird der Server neu gestartet, verfallen jegliche Änderungen und der Ursprungszustand wird wiederhergestellt. Um nützlich zu sein, braucht die Applikation daher eine bessere Strategie zur langfristigen Speicherung von Daten.

Bereitstellung der App über Cloudflare

Bevor es aber dazu kommt, sollte die Notiz-Applikation zunächst über Cloudflare bereitgestellt werden, wozu ein kostenfreier Cloudflare Account [8] benötigt wird. Sofern der aktuelle Stand des Projekts ins Git-Remote gepusht ist, kann mit den folgenden Schritten eine passende Cloudflare-Anwendung angelegt werden:

1. Bei Cloudflare anmelden [9]
2. Zum Menüpunkt "Workers und Pages" wechseln
3. Button "Anwendung erstellen" betätigen
4. Auf Tab "Pages" wechseln
5. Button "Mit Git verbinden" betätigen
6. Im GitHub- oder Gitlab-Tab mit dem jeweiligen Anbieter verbinden
7. Repository der Notiz-Applikation wählen
8. Button "Einrichtung starten" betätigen
9. Als Framework-Voreinstellung "SvelteKit" wählen
10. Button "Speichern und Bereitstellen" betätigen.

Im Anschluss startet Cloudflare die Bereitstellung. Sobald der Prozess abgeschlossen ist, kann die App unter der von Cloudflare angegebenen URL aufgerufen werden.

Speichern der Notizen in Workers KV

Damit Daten gespeichert werden können, muss ein KV Namespace angelegt werden. Namespaces ermöglichen die Trennung unterschiedlicher Typen von Schlüssel-Wert-Paaren, zum Beispiel nach Inhalt oder nach Anwendung. Die Einrichtung erfolgt unter dem Menüpunkt "Workers und Pages > KV" mit dem Button "Einen Namespace erstellen". Im Anschluss kann ein beliebiger Name vergeben werden – das Beispiel nutzt "NOTES_NAMESPACE" dafür. Über den Button "Hinzufügen" wird der neue Namespace erzeugt.

Um den angelegten Namespace nun in der Notiz-Applikation verfügbar zu machen, muss dieser noch über ein sogenanntes Binding mit der Cloudflare-Anwendung verknüpft werden. Auf diese Weise ist es möglich, Namespaces über verschiedene Anwendungen hinweg nutzbar zu machen. Ein Binding wird in den Einstellungen der Anwendung folgendermaßen angelegt:

1. Menüpunkt "Workers und Pages" aufrufen
2. Passende Anwendung auswählen
3. Im Tab "Einstellungen" Menüpunkt "Funktionen" aufrufen.

Im Abschnitt "KV-Namespace-Bindungen" kann über den Button "Binding hinzufügen" eine Eingabemaske mit zwei Feldern angezeigt werden. Das erste Eingabefeld ist ein Freitext-Feld, das den Namen aufnimmt, unter dem der zu bindende Namespace später in der App verfügbar gemacht wird – das Beispiel nutzt hier der Einfachheit halber "NOTES_NAMESPACE". Das zweite Eingabefeld ermöglicht die Auswahl des Namespaces, der an den zuvor vergebenen Namen gebunden werden soll. Auch hier wird im Beispiel "NOTES_NAMESPACE" ausgewählt. Mit einem Klick auf den Button "Speichern" wird das Binding fertiggestellt.

Der Namespace ist über den gewählten Namen nun in der App verfügbar. SvelteKit stellt KV Bindings über das platform-Objekt bereit. Dieses Objekt ist eine Eigenschaft des RequestEvent-Objekts, das an die Lade-Funktionen auf dem Server übergeben wird. In Listing 8 finden sich die Anpassungen für die Notiz-Liste auf der Startseite /src/routes/+page.server.js.

Listing 8: Auflistung aller Werte im KV Namespace

   export async function load({ platform }) {
     const notesNs = platform.env.NOTES_NAMESPACE;
     const { keys } = await notesNs.list();
   
     return {
       notes: await Promise.all(keys.map((key) => notesNs.get(key.name, { 
         type: 'json' 
       })))
     };
   }

Über die list()-Methode des Namespaces werden zunächst alle Schlüssel gelistet, die der Speicher kennt. Mit diesen Schlüsseln können dann die zugehörigen Werte aus dem Speicher geladen werden. Dabei wird angegeben, dass der erwartete Datentyp das JSON-Format ist, was dafür sorgt, dass der Wert anstatt als Text gleich als strukturiertes Objekt bereitgestellt wird. Werden diese Änderungen auf Cloudflare bereitgestellt, bleibt die Startseite zunächst abseits der Überschrift leer. Das liegt daran, dass nun Werte aus dem Namespace geladen werden, der zu diesem Zeitpunkt aber noch leer ist. Um das zu ändern, muss die Form Action zum Erstellen von Notizen in /src/routes/create/+page.server.js gemäß Listing 9 aktualisiert werden.

Listing 9: Schreiben der eingegebenen Werte in den KV Namespace

   import { redirect } from '@sveltejs/kit';
   
   export const actions = {
     async addNote({ request, platform }) {
       const notesNs = platform.env.NOTES_NAMESPACE;
       const formData = await request.formData();
       const id = Math.random().toString(16).slice(10);
   
       await notesNs.put(
         id,
         JSON.stringify({
           id,
           title: formData.get('title'),
           content: formData.get('content')
         })
       );
   
       redirect(302, '/');
     }
   };

Nach der Bereitstellung dieser Änderungen können innerhalb der App neue Notizen erstellt werden. Wie oben beschrieben, sind die Werte aber nicht immer unmittelbar verfügbar, es kann also bis zu 60 Sekunden dauern, bis die Notiz angezeigt wird.

Fazit

Edge Computing ist aus der Web-Entwicklung heutzutage nicht mehrwegzudenken und gewinnt zunehmend an Verbreitung. Ein Faktor sind sicher die infrastrukturellen Vorteile der globalen Verteilung. Aber auch die Developer Experience, die mit modernen Tools einhergeht, kann als maßgeblicher Aspekt gesehen werden. Plattformen wie Cloudflare Pages und Frameworks wie SvelteKit machen es Webentwickler:innen enorm einfach, eine funktionale App einschließlich der Datenhaltung zu entwickeln und bereitzustellen.

In diesem Artikel wurde lediglich an der Oberfläche gekratzt. Viele Features der verwendeten Tools wurden zwecks Übersichtlichkeit nicht berücksichtigt. Aber auch Bereiche wie das lokale Testen der App vor der Bereitstellung wurden herausgehalten. Insgesamt dürfen Webentwickler:innen aber gespannt sein, was die Zukunft bringt und welche Verbesserungen und Vereinfachungen bevorstehen.

Autor

Das könnte Sie auch interessieren