Tutorial: Erstellen einer Node.js- und Express-App in Visual Studio

In diesem Tutorial zur Entwicklung in Visual Studio werden Node.js und Express verwendet. In diesem Tutorial erstellen Sie eine einfache Node.js-Web-App, fügen etwas Code hinzu, erkunden einige Features der IDE und führen die App aus.

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

  • Erstellen eines Node.js-Projekts.
  • Hinzufügen von Code.
  • Verwenden von IntelliSense zum Bearbeiten von Code.
  • Ausführen der App.
  • Erreichen eines Haltepunkts im Debugger.

Sehen Sie sich zunächst die folgenden häufig gestellten Fragen an, in denen einige wichtige Konzepte vorgestellt werden:

  • Was ist Node.js?

    Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die JavaScript-Code ausführt.

  • Was ist NPM?

    Ein Paket-Manager erleichtert das Veröffentlichen und Freigeben von Node.js-Quellcodebibliotheken. Der Standard-Paket-Manager für Node.js ist npm. Der Paket-Manager npm vereinfacht die Installation, Aktualisierung und Deinstallation von Bibliotheken.

  • Was ist Express?

    Express ist ein serverseitiges Webanwendungsframework, das Node.js zum Erstellen von Web-Apps verwendet. Mit Express können Sie verschiedene Front-End-Frameworks verwenden, um eine Benutzeroberfläche zu erstellen. In diesem Tutorial wird Pug – früher Jade genannt – für das Front-End-Framework verwendet.

Voraussetzungen

Für dieses Tutorial gelten die folgenden Voraussetzungen:

  • Installation von Visual Studio mit der Node.js-Entwicklungsworkload

    Wenn Visual Studio noch nicht installiert ist:

    1. Wechseln Sie zur Seite Visual Studio-Downloads, um Visual Studio kostenlos zu installieren.

    2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung aus, und klicken Sie auf Installieren.

      Screenshot: Im Visual Studio-Installer ausgewählte Node.js-Workload.

    Wenn Visual Studio bereits installiert ist:

    1. Navigieren Sie in Visual Studio zu Tools > Tools und Features abrufen.

    2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung und dann Ändern aus, um die Workload herunterzuladen und zu installieren.

  • Installation der Node.js-Runtime

    Wenn die Node.js-Runtime nicht installiert ist, installieren Sie die LTS-Version über die Node.js-Website. Die LTS-Version bietet die beste Kompatibilität mit anderen Frameworks und Bibliotheken.

    Die Node.js-Tools in der Visual Studio-Node.js-Workload unterstützen sowohl die 32-Bit- als auch 64-Bit-Architekturversion von Node.js. Für Visual Studio ist nur eine Version erforderlich, und der Node.js-Installer unterstützt jeweils nur eine Version.

    In der Regel erkennt Visual Studio die installierte Node.js-Runtime automatisch. Andernfalls können Sie Ihr Projekt so konfigurieren, dass es auf die installierte Runtime verweist:

    1. Klicken Sie nach dem Erstellen eines Projekts mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaften aus.

    2. Legen Sie im Bereich Eigenschaften den Node.exe-Pfad so fest, dass er auf eine globale oder lokale Installation von Node.js verweist. Sie können in jedem Ihrer Node.js-Projekte den Pfad zu einem lokalen Interpreter angeben.

Dieses Tutorial wurde mit Node.js 16.14.0 getestet.

Dieses Tutorial wurde mit Node.js 8.10.0 getestet.

Erstellen eines neuen Node.js-Projekts

Visual Studio verwaltet Dateien für eine einzelne Anwendung in einem Projekt. Das Projekt umfasst Quellcode, Ressourcen und Konfigurationsdateien.

In diesem Tutorial beginnen Sie mit einem einfachen Projekt, das Code für eine Node.js- und eine Express-App enthält.

  1. Öffnen Sie Visual Studio, und drücken Sie ESC, um das Startfenster zu schließen.

  2. Wählen Sie STRG+Q aus, geben Sie node.js in das Suchfeld ein, und wählen Sie dann in der Dropdownliste Azure Node.js Express 4-Basisanwendung aus.

    Wenn die Projektvorlage Azure Node.js Express 4-Basisanwendung nicht angezeigt wird, müssen Sie die Workload für die Node.js-Entwicklung installieren. Anweisungen hierzu finden Sie unter Voraussetzungen.

  3. Wählen Sie im Dialogfeld Neues Projekt konfigurieren die Option Erstellen aus.

    Visual Studio erstellt die neue Projektmappe und das neue Projekt und öffnet das Projekt im rechten Bereich. Die Projektdatei app.js wird im Editor im linken Bereich geöffnet.

  4. Sehen Sie sich die Projektstruktur im rechten Bereich des Projektmappen-Explorers an.

    Screenshot: Node.js-Projektstruktur im Projektmappen-Explorer.

    • Auf der obersten Ebene befindet sich die Projektmappe (1), die standardmäßig denselben Namen wie Ihr Projekt aufweist. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.

    • Ihr Projekt (2) verwendet den Namen, den Sie im Dialogfeld Neues Projekt konfigurieren angegeben haben, und ist fett hervorgehoben. Im Dateisystem wird das Projekt als NJSPROJ-Datei im Projektordner dargestellt.

      Sie können Projekteigenschaften und Umgebungsvariablen anzeigen und festlegen, indem Sie mit der rechten Maustaste auf das Projekt klicken und im Kontextmenü Eigenschaften auswählen. Die Arbeit mit anderen Entwicklungstools ist möglich, weil die Projektdatei keine benutzerdefinierten Änderungen an der Node.js-Projektquelle vornimmt.

    • Der Knoten npm (3) zeigt installierte npm-Pakete an. Sie können mit der rechten Maustaste auf den Knoten „npm“ klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren.

      Sie können Pakete über die Einstellungen in package.json und die Kontextmenüoptionen für den Knoten npm installieren und aktualisieren.

    • Projektdateien (4) werden unter dem Projektknoten angezeigt. Die Startdatei des Projekts (app.js) ist fett formatiert.

      Sie können die Startdatei festlegen, indem Sie mit der rechten Maustaste auf eine Datei im Projekt klicken und Als Node.js-Startdatei festlegen auswählen.

    • npm verwendet die Datei package.json (5) zum Verwalten von Abhängigkeiten und Versionen für lokal installierte Pakete. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

  5. Öffnen Sie den Knoten npm, und stellen Sie sicher, dass alle erforderlichen npm-Pakete vorhanden sind.

    Wenn Pakete als (fehlend) aufgeführt werden, klicken Sie mit der rechten Maustaste auf den Knoten npm, wählen Sie npm-Pakete installieren aus, und installieren Sie die fehlenden Pakete.

    Um npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung zu installieren, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie dann Eingabeaufforderung hier öffnen aus.

    Screenshot: „Eingabeaufforderung hier öffnen“ im Kontextmenü des Projekts.

  1. Öffnen Sie Visual Studio.

  2. Erstellen Sie ein neues Projekt.

    Drücken Sie ESC, um das Startfenster zu schließen. Wählen Sie STRG+Q aus, um das Suchfeld zu öffnen, geben Sie Node.js ein, und wählen Sie dann Neue einfache Azure Node.js Express 4-Anwendung erstellen (JavaScript) aus. Wählen Sie im angezeigten Dialogfeld Erstellen aus.

    Wenn die Projektvorlage Azure Node.js Express 4-Basisanwendung nicht angezeigt wird, müssen Sie die Workload Node.js-Entwicklung hinzufügen. Anweisungen hierzu finden Sie unter Voraussetzungen.

    Visual Studio erstellt die neue Projektmappe und öffnet das Projekt im rechten Bereich. Die Projektdatei app.js wird im Editor (linker Bereich) geöffnet.

    Screenshot: Node.js-Projektstruktur im Projektmappen-Explorer.

    (1) Der fett hervorgehobene Name ist Ihr Projekt, dem Sie den Namen im Dialogfeld Neues Projekt gegeben haben. Im Dateisystem wird dieses Projekt durch eine NJSPROJ-Datei im Projektordner dargestellt. Klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Eigenschaften aus, um Eigenschaften und Umgebungsvariablen festzulegen, die dem Projekt zugeordnet sind. Roundtrips mit anderen Entwicklungstools sind möglich, da die Projektdatei keine benutzerdefinierte Änderungen an der Node.js-Projektquelle vornimmt.

    (2) Auf der oberen Ebene finden Sie eine Projektmappe, die standardmäßig denselben Namen hat wie Ihr Projekt. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.

    (3) Der NPM-Knoten zeigt alle installierten NPM-Pakete an. Sie können mit der rechten Maustaste auf den Knoten „npm“ klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren. Sie können Pakete auch über die Einstellungen in package.json oder die Kontextmenüoptionen für den npm-Knoten installieren und aktualisieren.

    (4) package.json ist eine Datei, die von npm zum Verwalten von Paketabhängigkeiten und Paketversionen für lokal installierte Pakete verwendet wird. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

    (5) Projektdateien wie app.js werden unter dem Projektknoten angezeigt. app.js ist die Projektstartdatei und wird daher fett formatiert angezeigt. Sie können die Startdatei festlegen, indem Sie mit der rechten Maustaste auf eine Datei im Projekt klicken und Als Node.js-Startdatei festlegen auswählen.

  3. Öffnen Sie den NPM-Knoten, und stellen Sie sicher, dass alle erforderlichen NPM-Pakete vorhanden sind.

    Wenn ein Paket fehlt, enthält ihr Symbol ein Ausrufezeichen. Um fehlende Pakete zu installieren, können Sie mit der rechten Maustaste auf den npm-Knoten klicken und npm-Pakete installieren auswählen.

    Um npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung zu installieren, klicken Sie mit der rechten Maustaste auf den Projektknoten und wählen dann im Kontextmenü Eingabeaufforderung hier öffnen aus.

    Screenshot: „Eingabeaufforderung hier öffnen“ im Kontextmenü des Projekts.

  1. Öffnen Sie Visual Studio.

  2. Erstellen Sie ein neues Projekt.

    Wählen Sie in der oberen Menüleiste Datei > Neu > Projekt aus. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Eintrag JavaScript, und wählen Sie dann Node.js aus. Wählen Sie im mittleren Bereich Azure Node.js Express 4-Basisanwendung und anschließend OK aus.

    Wenn die Projektvorlage Azure Node.js Express 4-Basisanwendung nicht angezeigt wird, müssen Sie die Workload Node.js-Entwicklung hinzufügen. Anweisungen hierzu finden Sie unter Voraussetzungen.

    Visual Studio erstellt die neue Projektmappe und öffnet das Projekt im rechten Bereich. Die Projektdatei app.js wird im Editor (linker Bereich) geöffnet.

    Screenshot: Node.js-Projektstruktur im Projektmappen-Explorer.

    (1) Der fett hervorgehobene Name ist Ihr Projekt, dem Sie den Namen im Dialogfeld Neues Projekt gegeben haben. Im Dateisystem wird dieses Projekt durch eine NJSPROJ-Datei im Projektordner dargestellt. Klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Eigenschaften aus, um Eigenschaften und Umgebungsvariablen festzulegen, die dem Projekt zugeordnet sind. Roundtrips mit anderen Entwicklungstools sind möglich, da die Projektdatei keine benutzerdefinierte Änderungen an der Node.js-Projektquelle vornimmt.

    (2) Auf der oberen Ebene finden Sie eine Projektmappe, die standardmäßig denselben Namen hat wie Ihr Projekt. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.

    (3) Der NPM-Knoten zeigt alle installierten NPM-Pakete an. Sie können mit der rechten Maustaste auf den Knoten „npm“ klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren. Sie können Pakete auch über die Einstellungen in package.json oder die Kontextmenüoptionen für den npm-Knoten installieren und aktualisieren.

    (4) package.json ist eine Datei, die von npm zum Verwalten von Paketabhängigkeiten und Paketversionen für lokal installierte Pakete verwendet wird. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

    (5) Projektdateien wie app.js werden unter dem Projektknoten angezeigt. app.js ist die Projektstartdatei und wird daher fett formatiert angezeigt. Sie können die Startdatei festlegen, indem Sie mit der rechten Maustaste auf eine Datei im Projekt klicken und Als Node.js-Startdatei festlegen auswählen.

  3. Öffnen Sie den NPM-Knoten, und stellen Sie sicher, dass alle erforderlichen NPM-Pakete vorhanden sind.

    Wenn ein Paket fehlt, enthält ihr Symbol ein Ausrufezeichen. Um fehlende Pakete zu installieren, können Sie mit der rechten Maustaste auf den npm-Knoten klicken und npm-Pakete installieren auswählen.

    Um npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung zu installieren, klicken Sie mit der rechten Maustaste auf den Projektknoten und wählen dann im Kontextmenü Eingabeaufforderung hier öffnen aus.

    Screenshot: „Eingabeaufforderung hier öffnen“ im Kontextmenü des Projekts.

Hinzufügen von Code

Die Anwendung verwendet Pug für das Front-End-JavaScript-Framework. Pug verwendet einfachen Markupcode, der in HTML kompiliert wird.

Pug wird mit dem Code app.set('view engine', 'pug'); als Ansichts-Engine in app.js festgelegt.

  1. Öffnen Sie im Projektmappen-Explorer den Ordner Ansichten, und wählen Sie index.pug aus, um die Datei zu öffnen.

  2. Ersetzen Sie den Dateiinhalt durch folgendes Markup.

    extends layout
    
    block content
      h1= title
      p Welcome to #{title}
      script.
        var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
      script.
        var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
      script.
        var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }
    
      button(onclick='f1()') One!
      button(onclick='f2()') Two!
      button(onclick='f3()') Three!
      p
      a: img(id='myImage' height='300' width='300' src='')
    

    Der oben stehende Code generiert dynamisch eine HTML-Seite mit einem Titel und einer Begrüßungsnachricht. Die Seite enthält auch Code zum Anzeigen eines Bilds, das sich mit jedem Auswählen einer Schaltfläche verändert.

  3. Öffnen Sie im Ordner routes die Datei index.js.

  4. Fügen Sie vor dem Funktionsaufruf router.get den folgenden Code hinzu:

    var getData = function () {
        var data = {
            'item1': 'https://images.unsplash.com/photo-1563422156298-c778a278f9a5',
            'item2': 'https://images.unsplash.com/photo-1620173834206-c029bf322dba',
            'item3': 'https://images.unsplash.com/photo-1602491673980-73aa38de027a'
        }
        return data;
    }
    

    Dieser Code erstellt ein Datenobjekt, das Sie an die dynamisch generierte HTML-Seite weitergeben.

  5. Ersetzen Sie den Funktionsaufruf router.get durch den folgenden Code:

    router.get('/', function (req, res) {
        res.render('index', { title: 'Express', "data" });
    });
    

    Der vorangehende Code legt die aktuelle Seite mithilfe des Routerobjekts „Express“ fest und rendert die Seite. Dabei werden Titel- und Datenobjekte an die Seite weitergegeben. Der Code gibt die Datei index.pug als die Seite an, die geladen wird, wenn index.js ausgeführt wird. Der app.js-Code (hier nicht gezeigt) konfiguriert index.js als Standardroute.

    Zur Veranschaulichung verschiedener Features von Visual Studio wurde absichtlich ein Fehler in die Codezeile eingefügt, die res.render enthält. Im nächsten Abschnitt hilft Ihnen IntelliSense bei der Behebung des Fehlers, damit die App ausgeführt werden kann.

Verwendung von IntelliSense

IntelliSense ist ein Visual Studio-Tool, das Ihnen beim Schreiben von Code hilft.

  1. Wechseln Sie im Visual Studio-Code-Editor in der Datei index.js zu der Codezeile, die res.render enthält.

  2. Setzen Sie den Cursor hinter die Zeichenfolge "data", und geben Sie : get ein. IntelliSense zeigt die Funktion getData an, die Sie zuvor im Code definiert haben. Wählen Sie getDataaus.

    Screenshot: IntelliSense-Menü, das neben dem Code angezeigt wird. Die getData-Funktion ist im Menü sichtbar.

    Screenshot: IntelliSense-Menü, das neben dem Code angezeigt wird. Die getData-Funktion ist im Menü sichtbar.

  3. Fügen Sie Klammern hinzu, um den Code zu einem Funktionsaufruf zu machen: getData().

  4. Entfernen Sie das Komma vor "data". Im Ausdruck wird ein Teil der Syntax grün hervorgehoben. Zeigen Sie auf die Syntaxhervorhebung.

    Screenshot: Syntaxfehler und IntelliSense.

    Screenshot: Syntaxfehler und IntelliSense.

    Die letzte Zeile der Meldung besagt, dass der JavaScript-Interpreter ein Komma erwartet.

  5. Wählen Sie im unteren Bereich die Registerkarte Fehlerliste aus, und wählen Sie in der Dropdownliste für den Typ der gemeldeten Probleme Erstellen + IntelliSense aus.

    Der Bereich zeigt die Warnung und eine Beschreibung sowie den Dateinamen und die Zeilennummer an.

    Screenshot: Bereich „Fehlerliste“ mit aufgeführtem Fehler.

    Screenshot: Bereich „Fehlerliste“ mit aufgeführtem Fehler.

  6. Korrigieren Sie den Code, indem Sie das Komma vor "data" ersetzen.

    Die korrigierte Codezeile sollte wie folgt aussehen: res.render('index', { title: 'Express', "data": getData() });.

  7. Wenn Sie zum Quellcode von navigieren render möchten, verwenden Sie eine der folgenden Optionen:

    • Wählen Sie render und F12 aus.
    • Klicken Sie mit der rechten render Maustaste, und wählen Sie im Kontextmenü Gehe zu Definition aus.

    Über diesen Befehl gelangen Sie zur Definition der render-Funktion in index.d.ts.

    Screenshot: „Gehe zu Definition“ im Renderkontextmenü.

    Screenshot: „Gehe zu Definition“ im Renderkontextmenü.

Ausführen der App

Als Nächstes führen Sie die App mit angefügtem Visual Studio-Debugger aus. Vorher müssen Sie jedoch einen Breakpoint festlegen.

Haltepunkt festlegen

Haltepunkte sind eine einfache und wichtige Funktion zum zuverlässigen Debuggen. Ein Haltepunkt gibt an, wo Visual Studio den ausgeführten Code anhalten soll. Anschließend können Sie Variablenwerte, das Speicherverhalten oder die Ausführung eines Codebranchs beobachten.

Um einen Breakpoint festzulegen, wählen Sie in index.js den linken Bundsteg vor der folgende Codezeile aus:

res.render('index', { title: 'Express', "data": getData() });

Screenshot: Roter Punkt neben einer Codezeile. Der rote Punkt stellt einen Breakpoint dar.

Screenshot: Roter Punkt neben einer Codezeile. Der rote Punkt stellt einen Breakpoint dar.

Ausführen der App im Debugmodus

  1. Wählen Sie in der Symbolleiste Debuggen das Debugziel aus, z. B. Webserver (Google Chrome) oder Webserver (Microsoft Edge) .

    Screenshot: Dropdownliste, die im Feld „Debugziel“ angezeigt wird.

    Screenshot: Dropdownliste, die im Feld „Debugziel“ angezeigt wird.

    Screenshot: Dropdownliste, die im Feld „Debugziel“ angezeigt wird.

    Wenn Sie wissen, dass Ihr bevorzugtes Debugziel auf Ihrem Computer verfügbar ist, dieses aber nicht als Option angezeigt wird, wählen Sie Durchsuchen mit aus der Dropdownliste mit Debugzielen aus. Wählen Sie ihr Standardbrowserziel in der Liste aus, und klicken Sie auf Als Standard festlegen.

  2. Um die App auszuführen, wählen Sie F5 oder Debuggen > Debuggen starten aus.

    Der Debugger hält an dem von Ihnen festgelegten Breakpoint an, damit Sie den App-Zustand untersuchen können.

  3. Zeigen Sie auf getData, um die Eigenschaften in einem DataTip anzuzeigen:

    Screenshot: Einige Variablen, die während des Debuggens für die Untersuchung zur Verfügung stehen.

  4. Wählen Sie F5 oder Debuggen > Fortsetzen aus, um mit der Ausführung der App fortzufahren.

    Die App wird daraufhin in einem Browser geöffnet. Im Browserfenster sollte Express als Titel und Welcome to Express als erster Absatz angezeigt werden.

  5. Wählen Sie die Schaltflächen One! , Two! und Three! aus, um verschiedene Bilder anzuzeigen.

    Screenshot: Die in einem Browser ausgeführte App.

  6. Schließen Sie den Webbrowser.

Veröffentlichen in Azure App Service (optional)

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen aus.

    • Wenn Sie dazu aufgefordert werden, wählen Sie Veröffentlichungsprofil hinzufügen aus.
    • Wenn Sie aufgefordert werden, Azure WebJob Tools zu installieren, wählen Sie Installieren aus.
  2. Wählen Sie auf dem ersten Bildschirm Veröffentlichen die Option Azure und dann Weiter aus.

    Screenshot: Dialogfeld „Veröffentlichen“ mit ausgewählter Option „Azure“.

  3. Wählen Sie auf dem zweiten Bildschirm Veröffentlichen die Option Azure App Service (Windows) und dann Weiter aus.

    Screenshot: Dialogfeld „Veröffentlichen“ mit ausgewählter Option „Azure App Service“.

  4. Melden Sie sich auf dem nächsten Bildschirm bei Bedarf bei Azure an. Wählen Sie das Azure-Abonnement, die Ressourcengruppe und die App Service-Instanz, in der Sie veröffentlichen möchten, und wählen Sie dann Fertig stellen aus.

    Wenn Sie nicht über ein Azure-Abonnement, eine Ressourcengruppe oder eine App Service-Instanz verfügen, können Sie diese erstellen, indem Sie die Anweisungen auf diesem Bildschirm ausführen.

    Screenshot: Dialogfeld „Veröffentlichen“ mit ausgewählter Azure-Web-App.

    Ausführlichere Anweisungen finden Sie unter Publish to Azure website using web deploy (Veröffentlichen auf einer Azure-Website mit Web Deploy).

  5. Sehen Sie sich die Veröffentlichungskonfiguration an, und wählen Sie dann Veröffentlichen aus.

    Screenshot: Konfiguration und Schaltfläche „Veröffentlichen“ in Visual Studio.

    Im Visual Studio-Fenster Ausgabe wird der Fortschritt der Azure-Bereitstellung angezeigt.

  6. Bei erfolgreicher Bereitstellung wird Ihre App in Azure App Service in einem Browser geöffnet. Wählen Sie eine Schaltfläche aus, um ein Bild anzuzeigen.

    Screenshot: Web-App, die in Azure App Service in einem Browser ausgeführt wird.

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen aus.

    Screenshot: Veröffentlichen in Azure App Service.

  2. Wählen Sie Microsoft Azure App Service aus.

    Im Dialogfeld App-Dienst können Sie sich in Ihrem Azure-Konto anmelden und eine Verbindung mit vorhandenen Azure-Abonnements herstellen.

  3. Führen Sie die verbleibenden Schritte aus, um ein Abonnement auszuwählen, eine Ressourcengruppe auszuwählen oder zu erstellen und einen App Service-Plan auszuwählen oder zu erstellen. Wenn Sie dazu aufgefordert werden, führen Sie die Schritte zum Veröffentlichen in Azure aus. Ausführlichere Anweisungen finden Sie unter Publish to Azure website using web deploy (Veröffentlichen auf einer Azure-Website mit Web Deploy).

  4. Im Ausgabefenster wird der Fortschritt der Azure-Bereitstellung angezeigt.

    Bei erfolgreicher Bereitstellung wird Ihre App in einem Browser geöffnet, der in Azure App Service ausgeführt wird. Wählen Sie eine Schaltfläche aus, um ein Bild anzuzeigen.

    Screenshot: Web-App, die in Azure App Service in einem Browser ausgeführt wird.

Damit haben Sie das Tutorial erfolgreich abgeschlossen.

Nächste Schritte