Nützliche Erweiterungen für Visual Studio Code, Teil 4 Azure Web Apps mit Node.js, Express und VS Code

Zum Abschluss unserer kleinen VS-Code-Reihe widmen wir uns noch einmal dem Thema, Azure App Services in VS Code bereitzustellen. Anstelle einer CI/CD-Bereitstellung gehen wir hier aber auf den direkten, quasi nativen Support für Azure Web Apps anhand eines konkreten Beispiels ein.

Was den Technologie-Stapel betrifft, haben wir uns für dieses Beispiel für Node.js entschieden, um in einer Webanwendung serverseitigen Code auszuführen zu können. Somit kann JavaScript für den gesamten Code der Webanwendung dienen, also sowohl auf dem Server als auch im Client-Browser. Da Node.js den gesamten Code asynchron ausführt, blockieren lange laufende Anfragen nicht das Ausführen anderer Aufgaben.

Zwar ist es möglich, allein mit Node.js eine komplette Web-App zu erstellen. Allerdings empfehlen wir auch hier das Verwenden von Frameworks wie „Express.js“, um schnell, mit minimalem benutzerdefinierten Code einen Node.js-Webserver erstellen zu können. Express.js stellt bereits Funktionen zur Verfügung, mit deren Hilfe sich HTTP-Anfragen wie GET-, POST- und DELETE einfach abfangen und an Code weiterleiten lassen, der dann die Antworten formuliert.

Gleichzeitig implementiert Express.js einen HTTP-Server auf dem lokalen Rechner, damit man lokalen Code schnell und einfach testen kann. Ein leicht portierbares Hello-World -Beispiel in Express.js sieht folgendermaßen aus:

Das Dienstprogramm „Express Generator“ erleichtert den Einstieg zum Erstellen einer neuen App, indem Sie „npx“ nutzen. Npx ist ein package runner, der das Verwenden von Paketen aus der npm-Registrierung vereinfacht.

Genau wie „npm“ an sich die Installation und Verwaltung von in der Registrierung gehosteten Abhängigkeiten vereinfacht, erleichtert „npx“ die Verwendung von CLI-Tools und anderen gehosteten ausführbaren Dateien in der Registrierung. Summa summarum vereinfacht npx eine Reihe von Dingen erheblich, die mit einfachem npm einen erheblich höheren Aufwand verursachen würden.

Dieses Beispiel umfasst sowohl die Pug-Templating-Engine als auch Unterstützung für CSS-Stylesheets. Sobald der Generator abgeschlossen ist, finden Sie einen Standardsatz von Dateien in Ihrer Webanwendung, einschließlich „Views“, „Routen“, „Stylesheets“ und dem Einstiegspunkt „app.js“.

Web App mit VS Code, Express und Node.Js

Mit Node.js und Express.js lassen sich Webanwendungen also sehr schnell erstellen, etwa für einen schnellen Proof-of-Concept. Dieser soll in unserem (an ein MS-Learn-Beispiel angelehntes) hypothetischen Szenario eine Marketing-Kampagne zu einer Produkteinführung begleiten und dazu einen Countdown bis zum Startdatum auf einer Website anzeigen.

Voraussetzung dafür ist, dass auf dem Rechner neben VS Code auch Node.js installiert ist. Alle im Folgenden besprochenen Befehle lassen sich direkt in Visual Studio ausführen. Der gesamte Code der Webanwendung wird ebenfalls in VS Code bearbeitet. Wir nutzen das integrierte Terminal, um einen Ordner mit installiertem Express.js einzurichten:

In einem neuen Workspace öffnen wir den erstellten Ordner mit „Open Folder“ und nutzen den Express Generator, um alle Komponenten einer Express.js-Boiler-Plate-Webanwendung zu erstellen. Aber Achtung: Im Visual Studio Code Explorer-Fenster ist der Ordner „ExpressAppCountdowm“ zunächst leer. Es folgt die Eingabe:

Im Explorer-Fensters oben links finden sich die vom Generator erstellten Dateien.

Wir verfügen nun über eine funktionsfähige Webanwendung, die Node.js ausführen kann. Nun gilt es noch, den Code zu ändern, um den gewünschten Countdown anzuzeigen. Hierfür erweitern wir im Explorer-Fenster von VS Code den Abschnitt „Routen“, um zur Datei „index.js“ zu navigieren. Diese JavaScript-Datei definiert Routen für die Homepage der App.

An dieser Stelle ist es möglich, den Code um die Berechnung des Countdowns zu erweitern. Wir fügen den folgenden Beispiel-Code direkt nach der Variable „router = express.Router();“ ein. In der ersten Zeile des eingefügten Codes gilt es, das imaginäre Produkt-Release-Datum im Format MM/TT/JJJJ HH:MM anzugeben.

Nun suchen wir die Code-Zeile …

… und ersetzen diese komplett durch folgenden Codezeilen:

Das Ergebnis sollte so aussehen, wie im vorangestellten Bild. Nun ändern wir die Standard-Homepage für die Webanwendung, damit der Countdown auch angezeigt wird. Hierfür navigieren wir im Explorer im Knoten „Views“ zur Datei „index.jade“, die eine „Ansicht“ (View) für die Startseite der Webanwendung definiert. Hier suchen wir nach der Zeile …

…, ersetzen diese durch …

… und fügen am Ende noch die folgende Zeile ein:

Die Webanwendung ist jetzt vollständig und kann nun auf dem lokalen PC getestet werden. Allerdings ist die vom Express-Generator erstellte Web-App von verschiedenen anderen Node.js-Paketen abhängig. Es gilt also zunächst sicherzustellen, dass diese vor dem Ausführen der Web-App installiert werden. Wir installieren daher die Web-App mittels …

… und führen diese anschließend aus:

Der Befehl weist „npm“ an, die Eigenschaft „scripts.start“ des Pakets auszuführen. Festgelegt wird diese vom Express-Generator, damit node.js im Ordner „/bin/www“ gestartet wird und die Webanwendung lokal ausführt. Das Ergebnis findet sich mit http://localhost:3000 im Browser.

Webanwendung in Azure App Service veröffentlichen

Nun ist es möglich, die lokale Web App aus Visual Studio Code auf dem Azure App Service zu veröffentlichen. Hierfür wird zunächst die im Screenshot gezeigte Extension „Azure App Service“ benötigt. Diese Erweiterung stellt ein zusätzliches Explorer-Fenster bereit, das alle Web-Apps im eigenen Abonnement anzeigt.

Direkt aus diesem Explorer-Fenster heraus lassen sich verschiedene Aktionen ausführen. Wir können die App beispielsweise mit einer Backend-Datenbank verbinden, im CI/CD-Kontext ein GitHub-Deployment einrichten, einen Bereitstellungsslots erstellen oder neue Anwendungseinstellungen definieren. Es ist aber freilich auch möglich, neue Web Apps direkt aus VS Code heraus zu erstellen und dabei den Quellcode direkt von der lokalen Festplatte aus nach Azure zu deployen.

Wie schon in anderen Artikel gezeigt, lässt sich eine Webanwendung auch via Git, Github, Gitbucket oder manuell mittels FTPS bzw. aus Azure Devops heraus bereitstellen. Noch einfacher und schneller funktioniert es dagegen mit der App-Service-Erweiterung. Hierfür ist es nur notwendig, im VS-Code-Explorer eine Verbindung mit dem gewünschten Azure-Abonnement herstellen, um sich anzumelden.

Anschließend lässt sich eine neue App als App Service in Azure bereitstellen. Wir navigieren dazu im Azure-Explorer zu „App Services“, klicken auf das Plus-Symbol und wählen „Create App Service Web App“. Bei „Create new web app (1/3)“ vergeben wir einen global eindeutigen Namen für die Webanwendung und drücken Enter, wählen dann bei „Create new web app (2/3)“ die gewünschte Laufzeitumgebung aus, hier „Node 18 LS“ …

… und wählen im dritten Schritt dann die Preisstufe, was sich dann unmittelbar auf den automatisch erstellen App Service Plan (ASP) auswirkt. Markieren Sie dann die App im Knoten „App Services“ und wählen im Kontextmenü den Eintrag „In Web-App bereitstellen“, um Ihren individuellen Countdown-App-Code zu veröffentlichen, wozu Sie in VS Code das Quellcode-Verzeichnis angeben. Diesen und die folgenden Schritte haben wir in der Bildergalerie festgehalten.

Bildergalerie

Bildergalerie mit 5 Bildern

(ID:49533921)