ist jetzt verfügbar! Lesen Sie über die neuen Funktionen und Fehlerbehebungen vom November.

Node.js-Entwicklung mit Visual Studio Code und Azure

4. Januar 2017 - Jonathan Carter, @lostintangent

Zwischen Visual Studio Code und Azure versuchen wir, zur Vereinfachung und Verbesserung des gesamten Entwicklererlebnisses beim Erstellen, Debuggen und Bereitstellen von Node.js-Anwendungen beizutragen. Auf der Node Interactive North America 2016 war ich begeistert, einige der Arbeiten, die wir kürzlich aufgrund von Community-Feedback geleistet haben, demonstrieren zu können, und dieser Artikel versucht, diesen Workflow für Personen festzuhalten, die daran interessiert sind, ihn auszuprobieren und/oder etwas mehr Details wünschen, als ich in meinem Vortrag behandeln konnte.

Die Demo verwendet eine einfache Todo-App, die von Scotch.io erstellt und veröffentlicht wurde. Es handelt sich um eine Single-Page-MEAN-Anwendung, die daher MongoDB als Datenbank, Node/Express für die REST-API/den Webserver und Angular.js 1.x für die Frontend-UI verwendet. Verwenden Sie das folgende Inhaltsverzeichnis, um zu bestimmten Abschnitten zu springen. Andernfalls lesen Sie weiter.

Voraussetzungen

Um diese Demo effektiv durchzuführen, müssen Sie die folgende Software installiert haben

  1. Visual Studio Code Insiders Build, den Sie hier herunterladen können. Technisch gesehen benötigen Sie den Insiders-Build nicht, aber ich würde jedem empfehlen, ihn zu verwenden, da er Zugriff auf die neuesten Fehlerbehebungen/Funktionserweiterungen bietet (ähnlich wie Chrome Canary Builds) und derselbe Build ist, den das VS Code-Team verwendet.

  2. Docker, das Sie hier herunterladen können. Zusätzlich benötigen Sie ein DockerHub-Konto, um die Docker-Images zu veröffentlichen, die im Walkthrough erstellt werden.

  3. Azure CLI (>=v0.1.0b11), für das Installationsanweisungen hier verfügbar sind. Zusätzlich benötigen Sie ein Azure-Konto und müssen sich mit der Azure CLI anmelden, indem Sie az login ausführen und der interaktiven Anmeldung folgen.

  4. Yarn, für das Installationsanweisungen hier verfügbar sind. Dies ist technisch nicht erforderlich, wird aber anstelle des unten genannten NPM-Clients verwendet. Ich empfehle es!

Da die Demo-App MongoDB verwendet, müssen Sie außerdem eine lokal laufende MongoDB-Instanz haben, die auf dem Standardport 27017 lauscht. Der einfachste Weg, dies zu erreichen, ist die Ausführung des folgenden Befehls nach der Installation von Docker: docker run -it -p 27017:27017 mongo.

Projekteinrichtung

Um zu beginnen, müssen wir das Todo-Beispielprojekt herunterladen, damit wir damit spielen können. Führen Sie dazu die folgenden Schritte aus

  1. Öffnen Sie Visual Studio Code und geben Sie F1 ein, um die **Befehlspalette** aufzurufen (oder wählen Sie alternativ Befehlspalette... aus dem Menü Ansicht).

  2. Geben Sie gitcl ein, um den Befehl Git: Clone zu finden, und drücken Sie ENTER.

Hinweis: Die **Befehlspalette** von VS Code unterstützt die "Fuzzy-Suche", mit der Sie weniger Tastenanschläge eingeben können, um häufig verwendete Befehle zu finden.

  1. Geben Sie https://github.com/scotch-io/node-todo in die Eingabeaufforderung ein und drücken Sie ENTER.

  2. Wählen Sie den Ordner aus, in den Sie das Projekt klonen möchten, oder erstellen Sie einen neuen (z. B. namens Todos). Zu diesem Zeitpunkt klont VS Code das Repository und startet einen neuen Arbeitsbereich, der im neu geklonten Projekt verwurzelt ist.

Alternativ könnten Sie die Git-CLI verwenden, um das Beispiel-Repository zu klonen. Diese Übung hilft jedoch, einige der Produktivitätsverbesserer zu veranschaulichen, die VS Code über die Befehlspalette bietet. Ich empfehle Ihnen, F1 zu drücken und die verschiedenen Befehle zu durchsuchen, die sie (und jede installierte Erweiterung) bietet, um herauszufinden, was Sie sonst noch tun können.

Integriertes Terminal

Da es sich um ein Node.js-Projekt handelt, müssen wir zunächst sicherstellen, dass alle seine Abhängigkeiten aus NPM installiert sind, da sie nicht im Git-Repository eingecheckt wurden. Sie können diesen Schritt von Ihrem Standardterminal aus ausführen (ich empfehle Hyper!) oder, wenn Sie es vorziehen, das integrierte Terminal von VS Code durch Drücken von STRG+` aufrufen und dann entweder npm install oder yarn ausführen, je nachdem, welchen NPM-Client Sie bevorzugen. Ich mag Yarn, da es sehr schnell ist und einige großartige Workflow-Verbesserungen bietet, daher empfehle ich, es auszuprobieren, wenn Sie es noch nicht getan haben.

Da VS Code natürlich in Ihren bestehenden Workflow passen soll, liegt es an Ihnen zu entscheiden, ob und wann das integrierte Terminal nützlich ist. Ich finde, wenn ich VS Code im Vollbildmodus verwende (insbesondere mit dem neuen Zen-Modus!), ist es schön, das integrierte Terminal für einfache/einmalige Befehle nutzen zu können. Während ich bei etwas "Anspruchsvollerem" einfach zu einer Vollbildversion von Hyper wechseln werde. Auswahl und Flexibilität sind hier entscheidend.

Integrierte Git-Versionskontrolle

Die Installation der Anwendungsabhängigkeiten über Yarn führte zur Generierung einer yarn.lock-Datei, die eine vorhersagbare Möglichkeit bietet, zukünftig exakt dieselben Abhängigkeiten ohne Überraschungen in CI-Builds, Produktionsbereitstellungen oder auf den Rechnern anderer Entwickler wiederherzustellen.

Es wird empfohlen, diese Datei in die Quellcodeverwaltung einzuchecken. Dazu können Sie einfach zum integrierten Git-Tab in VS Code wechseln (der mit dem Git-Logo) und die neu hinzugefügte Datei bemerken. Sie können eine Commit-Nachricht eingeben und CMD+ENTER eingeben (oder auf das Häkchen-Symbol klicken), um die Änderung lokal zu stagen/committen.

Hinter den Kulissen werden einfach dieselben Git-CLI-Befehle automatisiert, die Sie manuell ausgeführt hätten. Es liegt also wieder an Ihnen zu entscheiden, ob die Integration in VS Code für Sie funktioniert oder nicht. Wenn Sie neugierig sind, können Sie das Git-Ausgabefenster aufrufen, indem Sie auf das Menüelement ... klicken und Git-Ausgabe anzeigen auswählen. Dies zeigt alle zugrunde liegenden Git-Aktivitäten an, die VS Code in Ihrem Namen ausführt.

Projekt- / Code-Navigation

Um uns mit der Codebasis vertraut zu machen, spielen wir mit einigen Beispielen der Navigationsmöglichkeiten von VS Code herum

  1. Geben Sie CMD+P ein und geben Sie .js ein, was Ihnen alle JavaScript/JSON-Dateien im Projekt zusammen mit dem Verzeichnis, in dem sie sich befinden, anzeigt. Auch dieser Dialog unterstützt dieselbe "Fuzzy-Suche" wie die Befehlspalette, daher ist er ziemlich flexibel.


  2. Wählen Sie server.js, das ist das Startskript für die App.

  3. Fahren Sie mit der Maus über die Variable database, die in Zeile 6 importiert wird, um ihren "Typ" zu sehen. Diese Fähigkeit, Variablen/Module/Typen in einer Datei schnell zu inspizieren, kann sehr nützlich sein, insbesondere da wir dazu neigen, mehr Zeit mit dem Lesen/Verstehen von Code als mit dem Schreiben zu verbringen!


  4. Wenn Sie einfach den Cursor in den Namen database setzen, können Sie schnell alle anderen Verweise darauf in derselben Datei sehen, und durch Rechtsklick und Auswahl von **Referenzen anzeigen** können Sie Verwendungen projektweit sehen.

  5. Neben der schnellen Überprüfung von Variablentypen beim Hovern können Sie auch die Definition einer Variablen überprüfen, selbst wenn sie sich in einer anderen Datei befindet! Klicken Sie beispielsweise mit der rechten Maustaste auf database.localUrl in Zeile 12 und wählen Sie **Definition anzeigen**, wodurch wir schnell sehen können, wie die App standardmäßig für die Verbindung zu MongoDB konfiguriert ist.

Cloud-native, Twelve-Factor-Apps speichern die Konfiguration nicht fest, und daher wäre es besser, unsere MongoDB-Verbindungszeichenfolge über eine Umgebungsvariable festzulegen, die pro Bereitstellung/Umgebung leicht geändert werden kann. Nehmen wir diese Änderung vor!

Autovervollständigung

Autovervollständigung kann bei der Codeerstellung/Erkundung zu enormen Produktivitätssteigerungen führen, da Sie nicht ständig Dokumentationen nachschlagen oder sich um API-Tippfehler kümmern müssen. Erweitern wir beispielsweise die hartcodierte MongoDB-Verbindungszeichenfolge um eine Umgebungsvariable, indem wir Zeile 12 von diesem ändern

mongoose.connect(database.localUrl);

Zu diesem

mongoose.connect(process.env.MONGO_URL || database.localUrl);

Beim Tippen von process. sollten Sie bemerkt haben, dass VS Code die verfügbaren Member der globalen Node.js-API process angezeigt hat, ohne dass Sie etwas konfigurieren mussten.

Dies funktioniert, da VS Code im Hintergrund TypeScript verwendet (auch für JavaScript!), um Typinformationen bereitzustellen, die dann verwendet werden können, um die Vervollständigungsliste beim Tippen zu informieren. VS Code erkennt, dass es sich um ein Node.js-Projekt handelt, und hat infolgedessen automatisch die TypeScript-Typdefinitionsdatei für Node.js von NPM heruntergeladen. Dies ermöglicht Ihnen, Vervollständigungen für andere globale Node.js-Objekte wie Buffer oder setTimeout sowie für alle integrierten Module wie fs und http zu erhalten.

Zusätzlich zu den integrierten Node.js-APIs funktioniert diese automatische Erfassung von Typinformationen auch für über 2.000 Drittanbieterbibliotheken wie React, Underscore und Express. Um beispielsweise Mongoose daran zu hindern, die Beispiel-App zum Absturz zu bringen, wenn es keine Verbindung zur konfigurierten MongoDB-Datenbankinstanz herstellen kann, fügen Sie die folgende Codezeile zu Zeile 13 hinzu

mongoose.connection.on('error', () => {
  console.log('DB connection error');
});

Beim Tippen werden Sie erneut feststellen, dass Sie Vervollständigungen erhalten, ohne etwas tun zu müssen.

Welche Bibliotheken diese Autovervollständigungsfunktion unterstützen, können Sie durch Durchsuchen des fantastischen DefinitelyTyped-Projekts sehen, das die Community-gesteuerte Quelle aller TypeScript-Typdefinitionen ist.

Ausführen der App

Nachdem wir diese App nun etwas erkundet und angepasst haben, ist es an der Zeit, sie auszuführen. Drücken Sie dazu einfach F5, um die App auszuführen. Da wir sie zum ersten Mal ausführen, werden wir aufgefordert, den Typ der zu verwendenden "Ausführungskonfiguration" anzugeben

Wählen Sie Node.js v6.3+ (Experimentell), das die neue Chrome-Debugging-Protokollunterstützung verwendet, die kürzlich zu Node.js hinzugefügt wurde. Dies generiert eine neue Datei in Ihrem Projekt namens launch.json, die VS Code einfach mitteilt, wie Ihre App zum Debuggen gestartet und/oder angehängt werden soll.

Beachten Sie, dass es erkennen konnte, dass das Startskript der App server.js ist, und wir müssen nichts ändern, damit das Debugging einfach funktioniert.

Drücken Sie an dieser Stelle erneut F5, um die App auszuführen. Dies startet die App zusammen mit dem Fenster Debug-Konsole in VS Code, das die Standardausgabe für unsere neu laufende App anzeigt.

Zusätzlich ist diese Konsole tatsächlich an unsere neu laufende App angehängt, sodass Sie JavaScript-Ausdrücke eingeben können, die in der App ausgewertet werden und auch Autovervollständigung enthalten! Versuchen Sie beispielsweise, process.env in die Konsole einzugeben, um zu sehen, was ich meine.

Wenn Sie einen Browser öffnen, können Sie zu https://:8080 navigieren und die laufende App sehen. Geben Sie eine Nachricht in das Textfeld ein und fügen Sie ein paar Todos hinzu/entfernen Sie sie, um ein Gefühl dafür zu bekommen, wie die App funktioniert.

Debugging

Neben der Möglichkeit, die App auszuführen und über die integrierte Konsole mit ihr zu interagieren, bietet VS Code auch die Möglichkeit, Breakpoints direkt im Code zu setzen. Drücken Sie beispielsweise STRG+P, um den Dateiauswahldialog zu öffnen, geben Sie route ein und wählen Sie die Datei route.js.

Legen wir einen Breakpoint in Zeile 28, die die Express-Route darstellt, die aufgerufen wird, wenn unsere App versucht, ein Todo hinzuzufügen. Um einen Breakpoint zu setzen, klicken Sie einfach in die Spalte links von der Zeilennummer im Editor

Hinweis: Neben Standard-Breakpoints unterstützt VS Code auch bedingte Breakpoints, mit denen Sie anpassen können, wann die App die Ausführung unterbrechen soll. Um sie zu verwenden, klicken Sie einfach mit der rechten Maustaste auf die Spalte, wählen Sie Bedingten Breakpoint hinzufügen... und geben Sie entweder den JavaScript-Ausdruck (z. B. foo = "bar") oder die Trefferanzahl an, auf die der Breakpoint bedingt sein soll.

Wenn dies eingestellt ist, kehren Sie zur laufenden App zurück und fügen Sie ein Todo hinzu. Dies führt sofort dazu, dass die App die Ausführung unterbricht, und VS Code hält in Zeile 28 an, wo wir den Breakpoint gesetzt haben

Innerhalb der angehaltenen Datei können wir über Ausdrücke fahren, um deren aktuellen Wert anzuzeigen, die lokalen Variablen/Überwachungen und den Aufrufstapel zu inspizieren und die Debug-Symbolleiste oben zu verwenden, um durch die Ausführung zu steppen. Alles, was Sie von einer IDE erwarten würden, aber in einem leichtgewichtigen Texteditor. Drücken Sie erneut F5, um die Ausführung der App fortzusetzen.

Full-Stack-Debugging

Wie erwähnt, handelt es sich um eine MEAN-App, was bedeutet, dass ihr Frontend und Backend beide in JavaScript geschrieben sind. Während wir also gerade unseren Backend-Node/Express-Code debuggen, müssen wir möglicherweise irgendwann unseren Frontend/Angular-Code debuggen. Glücklicherweise verfügt VS Code über ein riesiges Ökosystem an Erweiterungen, die einfach zu installieren sind, einschließlich integriertem Chrome-Debugging.

Um dies zu demonstrieren, wechseln Sie zum Erweiterungsregister und geben Sie chrome in das Suchfeld ein

Wählen Sie die Erweiterung namens Debugger for Chrome und klicken Sie auf die Schaltfläche Installieren. Danach müssen Sie VS Code neu laden, um die Erweiterung zu aktivieren. Sie behält Ihren Arbeitsbereich beim Neustart bei, machen Sie sich also keine Sorgen, den Status zu verlieren.

Geben Sie STRG+P ein, geben Sie launch.json ein/wählen Sie es aus und ersetzen Sie den Inhalt dieser Datei durch Folgendes

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Full-Stack",
      "configurations": ["Node", "Chrome"]
    }
  ],
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "https://:8080",
      "port": 9222,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "webRoot": "${workspaceFolder}/public"
    },
    {
      "name": "Node",
      "type": "node2",
      "request": "launch",
      "program": "${workspaceFolder}/server.js",
      "cwd": "${workspaceFolder}"
    }
  ]
}

Diese Änderung bewirkt zwei Dinge

  1. Fügt eine neue Ausführungskonfiguration für Chrome hinzu, mit der wir unseren Frontend-JavaScript-Code debuggen können. Sie können mit der Maus über jede der angegebenen Einstellungen fahren, um Dokumentationen zu deren Funktionsweise anzuzeigen. Schön!

  2. Fügt eine "Compound"-Ausführungskonfiguration hinzu, mit der wir unseren Frontend- und Backend-Code gleichzeitig debuggen können! Das Konzept der Compound-Konfiguration ist äußerst leistungsfähig, wie wir später besprechen werden!

Um dies in Aktion zu sehen, wechseln Sie zum Debug-Tab in VS Code und ändern Sie die ausgewählte Konfiguration auf "Full-Stack" (was wir der Compound-Konfiguration genannt haben, Sie können sie beliebig benennen) und drücken Sie dann F5, um sie auszuführen.

Dies startet die Node.js-App (wie in der Ausgabe der Debug-Konsole zu sehen ist) sowie Chrome, das so konfiguriert ist, dass es zur Node.js-App unter https://:8080 navigiert.

Geben Sie STRG+P ein und geben Sie todos.js ein/wählen Sie es aus, was der Haupt-Angular-Controller für das Frontend der App ist. Setzen Sie einen Breakpoint in Zeile 11, das ist der Einstiegspunkt für die Erstellung eines neuen Todos.

Gehen Sie zurück zur laufenden App, fügen Sie ein neues Todo hinzu, und Sie werden feststellen, dass VS Code die Ausführung im Angular-Code angehalten hat

Genau wie beim Debuggen von Node.js können Sie über Ausdrücke fahren, lokale Variablen/Überwachungen anzeigen, Ausdrücke in der Konsole auswerten usw. Es gibt jedoch zwei coole Dinge zu beachten

  1. Der Bereich Aufrufstapel zeigt zwei verschiedene Stapel an: Node und Chrome, und gibt an, welcher gerade angehalten ist.

  2. Sie können zwischen Frontend- und Backend-Code wechseln! Um dies zu testen, drücken Sie einfach F5, was die Ausführung fortsetzt und den Breakpoint trifft, den wir zuvor in unserer Express-Route gesetzt haben.

Mit dieser Einrichtung können wir nun effizient Frontend-, Backend- oder Full-Stack-JavaScript-Code direkt in VS Code debuggen. Darüber hinaus ist das Compound-Debugger-Konzept nicht auf nur zwei Zielprozesse beschränkt und auch nicht nur auf JavaScript beschränkt. Wenn Sie also an einer Microservice-App arbeiten, die potenziell Polyglott ist, können Sie denselben Workflow wie oben verwenden, sobald Sie die erforderlichen Erweiterungen installiert haben (z. B. Go, Ruby, PHP).

Dockerisieren Ihrer App

Apropos Microservices, werfen wir einen Blick auf die Erfahrung, die VS Code für die Entwicklung mit Docker bietet. Viele Node.js-Entwickler verwenden Docker für portierbare Anwendungsbereitstellungen für Entwicklungs-, CI- und Produktionsumgebungen. Dennoch haben wir viel Feedback erhalten, dass die Vorteile von Docker zwar extrem hoch sind, die Lernkurve und die Kosten für den Einstieg aber auch ziemlich hoch sein können. VS Code bietet eine Erweiterung, die versucht, einige dieser Einarbeitungen zu vereinfachen!

Wechseln Sie zurück zum Erweiterungsregister, suchen Sie nach docker und wählen Sie die Microsoft Docker-Erweiterung aus. Installieren Sie sie und laden Sie VS Code dann neu, genau wie wir es oben für die Chrome-Erweiterung getan haben.

Diese Erweiterung enthält viele Dinge, darunter ein einfacher Befehl zum Generieren einer Dockerfile- und docker-compose.yml-Datei für ein bestehendes Projekt. Um dies in Aktion zu sehen, geben Sie F1 ein (um die Befehlspalette zu öffnen) und geben Sie docker ein, um alle Befehle anzuzeigen, die die Docker-Erweiterung bietet

Wählen Sie den Befehl Docker: Docker-Dateien zum Arbeitsbereich hinzufügen, wählen Sie Node.js als App-Plattform und geben Sie an, dass die App Port 8080 exponiert. Dies generiert vollständige Dockerfile- und Docker Compose-Dateien, die Sie sofort verwenden können.

Die Docker-Erweiterung bietet auch Autovervollständigung für Ihre Dockerfiles und docker-compose.yml-Dateien, was die Erstellung Ihrer Docker-Assets erheblich vereinfacht. Öffnen Sie beispielsweise die Dockerfile und ändern Sie Zeile 2 von

FROM node:latest

Zu

FROM mhart

Platzieren Sie den Cursor nach dem t in mhart und drücken Sie STRG+Leertaste, um alle Image-Repositories anzuzeigen, die mhart auf DockerHub veröffentlicht hat.

Wählen Sie mhart/alpine-node, ein sehr effizientes und kleines Linux-Distro, das alles enthält, was diese App benötigt, ohne zusätzlichen Ballast (Alpine Linux ist großartig für Docker!). Kleinere Images sind typischerweise besser, da Sie möchten, dass Ihre App-Builds und -Bereitstellungen so schnell wie möglich erfolgen, was die Verteilung/Skalierung usw. schnell macht.

Nachdem wir nun unsere Dockerfile haben, müssen wir das eigentliche Docker-Image erstellen. Auch hier können wir einen Befehl verwenden, den die Docker-Erweiterung installiert hat, indem wir F1 eingeben und dockerb eingeben (mit "Fuzzy-Suche"). Wählen Sie den Befehl Docker: Image erstellen, wählen Sie die gerade generierte/bearbeitete /Dockerfile aus und geben Sie dann einen Tag für das Image an, der Ihren DockerHub-Benutzernamen enthält (z. B. lostintangent/node). Drücken Sie <ENTER>, was das integrierte Terminalfenster öffnet und die Ausgabe Ihres Docker-Image-Builds anzeigt.

Beachten Sie, dass der Befehl einfach den Prozess der Ausführung von docker build für Sie automatisiert hat, was ein weiteres Beispiel für einen Produktivitätsverbesserer ist, den Sie entweder verwenden können oder einfach die Docker-CLI direkt verwenden können. Was immer für Sie am besten funktioniert!

Um dieses Image für Bereitstellungen einfach zugänglich zu machen, müssen wir es nur noch nach DockerHub pushen. Um dies zu tun, rufen Sie die Befehlspalette auf, geben Sie dockerpush ein und wählen Sie den Befehl Docker: Pushen aus. Wählen Sie das gerade erstellte Image-Tag aus (z. B. lostintangent/node) und drücken Sie <ENTER>. Dies automatisiert den Aufruf von docker push und zeigt die Ausgabe im integrierten Terminal an.

Bereitstellen Ihrer App

Nachdem wir nun unsere App Docker-isiert und nach DockerHub gepusht haben, müssen wir sie tatsächlich in die Cloud bereitstellen, damit wir sie der Welt zeigen können. Dazu verwenden wir Azure App Service, das PaaS-Angebot von Azure, das kürzlich zwei neue Funktionen für Node.js-Entwickler hinzugefügt hat

  1. Unterstützung für Linux-basierte VMs, was Inkompatibilitäten für Apps reduziert, die mit nativen Node-Modulen oder anderen Tools erstellt wurden, die möglicherweise kein Windows unterstützen und/oder sich anders verhalten.

  2. Unterstützung für Docker-basierte Bereitstellungen, mit denen Sie einfach den Namen Ihres Docker-Images angeben können und App Service das Image automatisch ziehen, bereitstellen und skalieren lässt.

Um zu beginnen, öffnen Sie Ihr Terminal und wir verwenden die neue Azure CLI 2.0, um Ihr Azure-Konto zu verwalten und die notwendige Infrastruktur für die Ausführung der Todo-App bereitzustellen. Sobald Sie sich mit dem Befehl az login (wie in den Voraussetzungen erwähnt) über die CLI bei Ihrem Konto angemeldet haben, führen Sie die folgenden Schritte aus, um die App Service-Instanz bereitzustellen und den Todo-App-Container bereitzustellen

  1. Erstellen Sie eine Ressourcengruppe, die Sie als "Namespace" oder "Verzeichnis" zur Organisation von Azure-Ressourcen betrachten können. Das Flag -n ist der Name der Gruppe und kann beliebig festgelegt werden.

    az group create -n nina-demo -l westus

    Hinweis: Das Flag -l gibt den Standort der Ressourcengruppe an. Während der Vorschau ist die App Service unter Linux-Unterstützung nur in ausgewählten Regionen verfügbar. Wenn Sie sich also nicht in West-USA befinden und prüfen möchten, welche anderen Regionen verfügbar sind, führen Sie einfach az appservice list-locations --linux-workers-enabled von der CLI aus, um Ihre Rechenzentrumsoptionen anzuzeigen.

  2. Erstellen Sie den App Service-Plan, der die Erstellung und Skalierung der zugrunde liegenden VMs verwaltet, auf denen Ihre App bereitgestellt wird. Geben Sie erneut einen beliebigen Wert für das Namensflag an, stellen Sie jedoch sicher, dass das Flag -g auf den Namen verweist, den Sie der Ressourcengruppe oben gegeben haben.

    az appservice plan create -n nina-demo-plan -g nina-demo --is-linux

    Hinweis: Das Flag --is-linux ist entscheidend, da es angibt, dass Sie Linux-basierte VMs wünschen. Ohne dieses Flag weist die CLI Windows-basierte VMs zu.

  3. Erstellen Sie die App Service-Web-App, die die Todo-App darstellt, die innerhalb des gerade erstellten Plans und der Ressourcengruppe ausgeführt wird. Sie können sich eine Web-App grob als Synonym für einen Prozess oder Container vorstellen, und der Plan ist der VM/Container-Host, auf dem sie ausgeführt werden.

    az appservice web create -n nina-demo-app -p nina-demo-plan -g nina-demo

  4. Konfigurieren Sie die Web-App so, dass sie unser Docker-Image verwendet, und stellen Sie sicher, dass Sie das Flag -c auf den Namen Ihres DockerHub-Kontos/Image-Namens setzen

    az appservice web config container update -n nina-demo-app -g nina-demo -c lostintangent/node

  5. Starten Sie die App, um den gerade bereitgestellten Container anzuzeigen, der unter einer *.azurewebsites.net-URL verfügbar sein wird

    az appservice web browse -n nina-demo-app -g nina-demo

    Hinweis: Es kann eine Minute dauern, bis Ihre App zum ersten Mal geladen wird, da App Service Ihr Docker-Image von DockerHub herunterladen und dann starten muss.

Juhu! Wir haben unsere App gerade bereitgestellt. Das kreisende Symbol zeigt jedoch an, dass die App keine Verbindung zur Datenbank herstellen kann, was verständlich ist, da wir während der Entwicklung eine lokale Instanz von MongoDB verwendet haben, die aus den Azure-Rechenzentren offensichtlich nicht erreichbar ist. Da wir die App so aktualisiert haben, dass sie die Verbindungszeichenfolge über eine Umgebungsvariable akzeptiert, müssen wir nur einen MongoDB-Server starten und die App Service-Instanz neu konfigurieren, um darauf zu verweisen.

Verwendung von DocumentDB

Obwohl wir einen MongoDB-Server oder ein Replica-Set einrichten und diese Infrastruktur selbst verwalten könnten, bietet Azure eine weitere Lösung namens DocumentDB. DocumentDB ist eine voll verwaltete, geo-replizierbare, hochleistungsfähige NoSQL-Datenbank, die eine MongoDB-kompatible Schicht bietet. Das bedeutet, dass Sie eine bestehende MEAN-App darauf verweisen können, ohne etwas anderes als die Verbindungszeichenfolge ändern zu müssen! Werfen wir einen Blick darauf, wie die Verwendung aussieht, diesmal über das Azure-Portal anstelle der CLI.

  1. Gehen Sie zu portal.azure.com und melden Sie sich mit demselben Konto an, das Sie in der CLI verwendet haben.
  1. Drücken Sie die Taste N, um eine neue Azure-Ressource zu erstellen, und wählen Sie Datenbanken dann NoSQL (DocumentDB)
  1. Geben Sie der Instanz einen beliebigen Namen, konfigurieren Sie jedoch ihre NoSQL-API auf MongoDB und ihre Ressourcengruppe auf Bestehende verwenden und wählen Sie dieselbe Ressourcengruppe aus, die Sie für die App Service-Instanz erstellt haben.
  1. Klicken Sie auf die Schaltfläche Erstellen und warten Sie, bis die DB bereitgestellt ist.

Die vollständige Erstellung der DocumentDB-Instanz dauert einige Momente. Warten Sie daher, bis Sie die Benachrichtigung "Bereitstellung erfolgreich" oben rechts im Portal sehen. Navigieren Sie nach Abschluss zum Tab Alle Ressourcen in der linken Navigationsleiste (das Menüelement mit dem grünen Raster-Symbol) und wählen Sie dann die von Ihnen erstellte DocumentDB-Ressource aus

Klicken Sie auf das Menüelement Verbindungszeichenfolge unter dem Abschnitt Einstellungen und dann auf die Schaltfläche Kopieren neben dem Feld Verbindungszeichenfolge, um die MongoDB-Verbindungszeichenfolge in Ihre Zwischenablage zu kopieren.

Kehren Sie zur Seite Alle Ressourcen im Portal zurück und navigieren Sie zur zuvor erstellten App Service-Instanz. Klicken Sie unter dem Abschnitt Einstellungen auf das Menüelement Anwendungseinstellungen und fügen Sie im Abschnitt App-Einstellungen einen neuen Eintrag hinzu, dessen Schlüssel MONGO_URL und dessen Wert die zuvor kopierte DocumentDB-Verbindungszeichenfolge ist.

Klicken Sie auf die Schaltfläche Speichern, kehren Sie dann zu Ihrem Browser zurück und aktualisieren Sie ihn. Versuchen Sie, ein Todo-Element hinzuzufügen und zu entfernen, um zu beweisen, dass die App jetzt ohne Änderungen funktioniert! Wir haben einfach die Umgebungsvariable auf unsere erstellte DocumentDB-Instanz gesetzt, die eine MongoDB-Datenbank vollständig emuliert.

Bei Bedarf könnten wir zur DocumentDB-Instanz zurückwechseln und den reservierten Durchsatz, den unsere MongoDB-Instanz benötigt, hoch- oder herunterskalieren und die zusätzlichen Datenverkehrsvorteile nutzen, ohne selbst Infrastruktur verwalten zu müssen.

Darüber hinaus indiziert DocumentDB automatisch jedes einzelne Dokument und jede Eigenschaft für Sie. Sie müssen sich also keine Gedanken über die Profilerstellung von langsamen Abfragen und/oder die manuelle Feinabstimmung Ihrer Indizes machen. Stellen Sie einfach bereit und skalieren Sie nach Bedarf, und lassen Sie DocumentDB den Rest erledigen!

Aufräumen

Um sicherzustellen, dass Ihnen keine ungenutzten Azure-Ressourcen berechnet werden, führen Sie einfach den folgenden Befehl in Ihrem Terminal aus, um alle gerade bereitgestellten Ressourcen zu löschen

az group delete -n nina-demo

Dies dauert einige Minuten, aber wenn es abgeschlossen ist, befindet sich Ihr Azure-Konto in demselben Zustand wie vor dem Start. Diese Fähigkeit, Azure-Ressourcen als eine einzige Einheit zu organisieren, bereitzustellen und zu löschen, ist einer der Hauptvorteile von Ressourcengruppen. Daher empfehle ich Ihnen in Zukunft, wenn Sie Azure verwenden, Ressourcen zusammenzufassen, die voraussichtlich dieselbe Lebensdauer haben.

Fazit

Hoffentlich hat diese Demo einige der Wege veranschaulicht, auf denen Visual Studio Code versucht, die gesamte Node.js-Entwicklungserfahrung zu verbessern. Zwischen Debugging, das Full-Stack- und Microservice-Unterstützung bietet, einer reichhaltigen Authoring-Erfahrung, die Navigation und Autovervollständigung ohne weitere Konfiguration bietet, und einem großen Ökosystem an Erweiterungen wie Docker, die Ihre Feedbackschleife für andere App-Typen und -Praktiken verbessern können, sind wir begeistert, weiterhin zu entwickeln, was Produktivität aus einem leichtgewichtigen Editor aus bedeuten kann.

Zusätzlich versuchen wir zwischen der Azure CLI, App Service und DocumentDB einen produktiven Cloud-Stack mit geringem Verwaltungsaufwand für Node.js/MEAN-Apps bereitzustellen, der bei Bedarf skaliert werden kann, ohne zusätzliche Infrastrukturkomplexität einzuführen.

Über das reine Bereitstellen eines Walkthroughs der NINA 2016-Demo hinaus hoffen wir, diese Demo zu nutzen, um die gesamte Node.js-Erfahrung sowohl in VS Code als auch in Azure weiter zu iterieren, damit wir sie einfacher und flexibler gestalten können. Wenn Sie Fragen oder Feedback haben, wie wir Dinge verbessern können, zögern Sie bitte nicht, ein Issue in diesem Repository zu erstellen oder mir eine E-Mail zu senden. Danke!

© . This site is unofficial and not affiliated with Microsoft.