Building static websites with Azure Functions, mustache & Azure Storage

//Building static websites with Azure Functions, mustache & Azure Storage

Building static websites with Azure Functions, mustache & Azure Storage

In diesem Artikel zeige ich, wie man dynamisce Daten mithilfe einer zeitgesteuerten Azure Function (in nodejs) & mustache eine statische Website generieren kann, welche in Azure Storage gehostet wird.

Für diese Demo bauen wir eine simple, personalisierte Startseite, die aktuelle Schlagzeilen eines WordPress-Blogs und ein paar weitere Links anzeigt. Sicherlich nicht das spannendste Projekt, aber ausreichend, um ein paar interessante Dinge zu zeigen.

Folgendes wollen wir erreichen:

  • Die mustache-Templates anlegen
  • Die Template-Dateien in der Azure Function laden und vorbereiten
  • Die Daten aus der WordPress REST API abrufen
  • Das HTML rendern und in Azure Storage hochladen

Die Mustache Templates

Um zu zeigen, wie man die Template-Dateien aufteilen kann, habe ich jeweils eine Datei für den Index, den Header und den Footer angelegt. Mit den entsprechenden Tags {{> header.mustache}} und {{> footer.mustache}} lassen sich die entsprechenden HTML-Teile in der Index-Datei einbinden.

Die News zeigen wir als einfache Liste mit einem Link zum Originalartikel an. Das Ganze sieht dann so aus:

Diese drei Dateien legen wir in einem eigenen „templates“-Verzeichnis im Azure Blob Storage ab. Auf diese Weise können wir die Templates unabhängig vom Backend-Code anpassen. Außerdem ermöglicht uns dies, die Dateien in der Function via Bindings direkt zu laden.

Das „templates“ Verzeichnis in Azure Blob Storage (Azure Storage Explorer)

Die Azure Function

Wie oben erwähnt nutzen wir JavaScript für die Logik der Function. Diese habe ich mit Visual Studio Code erstellt und ein paar npm Packages hinzugefügt, die wir benötigen:

  • request – für den Download der News
  • mu2 – eine Node.js Mustache engine
  • azure-storage – das SDK um die fertigen HTML Dateien in den Azure Blob Storage hochzuladen

Fangen wir damit an, die News-Artikel in der mynews Variable zu speichern:

Nachdem wir hier in den Optionen json auf true gesetzt haben, wird der heruntergeladene JSON-String direkt als JavaScript-Objekt (bzw. in diesem Fall als Array) geparsed zurückgegeben.

Anschließend rufen wir die prepareTemplates() Methode auf, welche die Header- und Footer-Dateien zur weiteren Verwendung mit mustache vorbereitet. Die Dateien können wir  direkt über das context.bindings Object aufrufen. Ein Blick in die functions.json Datei verrät, wie die Azure Function konfiguriert wurde.

Nachdem dies erledigt ist kann die Webseite selbst nun gebaut werden. Hierzu übergeben wir unsere Daten der mu.render() Methode und speichern den Stream-Output in der pageFile Variable. Hier erhalten wir den resultierenden HTML-Code als String.

Nach Beendigung des Streams müssen wir die Datei noch in Azure hochladen. Prinzipiell wäre es möglich, dies über die Azure Function Output Bindings zu lösen. Allerdings haben wir hier keinerlei Kontrolle über den Content Type der Datei, was in manchen Browsern zu Problemen führt.

Zunächst legen wir aber noch das benötigte $web Verzeichnis an und speichern dort dann unsere HTML-Datei als neuen Blob. Hier lässt sich dann auch der richtige Content Type ‚text/html‘ mit übergeben.

Und das wars. Der gesamte Code kann auf Github gefunden werden. Hier findet ihr das finale, wunderbar gestylte Ergebnis.

Über Fragen und Anregungen freue ich mich! 🙂

By |2018-07-30T15:34:12+00:00Juli 30th, 2018|Development|0 Comments

About the Author:

Developer, Consultant, Microsoft Insider MVP

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.