Schnellstart: Erstellen einer JavaScript-Funktion in Azure mit Visual Studio Code

  • Artikel

Verwenden Sie Visual Studio Code zum Erstellen einer JavaScript-Funktion, die auf HTTP-Anforderungen reagiert. Testen Sie den Code lokal, und stellen Sie ihn anschließend in der serverlosen Umgebung von Azure Functions bereit.

Wichtig

Der Inhalt dieses Artikels ändert sich abhängig von dem Node.js-Programmiermodell, das Sie oben auf der Seite ausgewählt haben. Das v4-Modell befindet sich derzeit in der Vorschauphase und bietet JavaScript- und TypeScript-Entwickler*innen eine flexiblere und intuitivere Erfahrung. Weitere Informationen zu den Unterschieden zwischen v3 und v4 finden Sie im Upgradeleitfaden.

Im Rahmen dieser Schnellstartanleitung fallen in Ihrem Azure-Konto ggf. geringfügige Kosten von einigen Cents an.

Es gibt auch eine CLI-basierte Version dieses Artikels.

Konfigurieren Ihrer Umgebung

Vergewissern Sie sich zunähst, dass Folgendes vorhanden ist:

Erstellen Ihres lokalen Projekts

In diesem Abschnitt wird mithilfe von Visual Studio Code ein lokales Azure Functions-Projekt in JavaScript erstellt. Weiter unten in diesem Artikel veröffentlichen Sie den Funktionscode in Azure.

  1. Wählen Sie in der Aktivitätsleiste das Azure-Symbol aus. Wählen Sie dann im Bereich Arbeitsbereich (lokal) die Schaltfläche + aus, und wählen Sie Funktion erstellen in der Dropdownliste aus. Wenn Sie dazu aufgefordert werden, wählen Sie Neues Projekt erstellen aus.

    Screenshot: das Fenster „Neues Projekt erstellen“.

  2. Wählen Sie den Verzeichnisspeicherort für Ihren Projektarbeitsbereich und anschließend Auswählen aus. Sie sollten entweder einen neuen Ordner erstellen oder einen leeren Ordner für den Projektarbeitsbereich auswählen. Wählen Sie keinen Projektordner aus, der bereits Teil eines Arbeitsbereichs ist.

  1. Geben Sie nach entsprechender Aufforderung Folgendes ein:

    Prompt Auswahl
    Auswählen einer Sprache für Ihr Funktionsprojekt Klicken Sie auf die Option JavaScript.
    Auswählen eines JavaScript-Programmiermodells Wählen Sie Model V3.
    Auswählen einer Vorlage für die erste Funktion Ihres Projekts Klicken Sie auf die Option HTTP trigger.
    Angeben eines Funktionsnamens Geben Sie HttpExampleein.
    Autorisierungsstufe Wählen Sie Anonymous aus, damit Ihr Funktionsendpunkt von jedem Benutzer aufgerufen werden kann. Weitere Informationen zur Autorisierungsstufe finden Sie unter Autorisierungsschlüssel.
    Auswählen, wie Sie Ihr Projekt öffnen möchten Klicken Sie auf die Option Open in current window.

    Auf der Grundlage dieser Informationen generiert Visual Studio Code ein Azure Functions-Projekt mit einem HTTP-Trigger. Die lokalen Projektdateien können im Explorer angezeigt werden. Weitere Informationen zu den erstellten Dateien finden Sie unter Generierte Projektdateien.

  1. Geben Sie nach entsprechender Aufforderung Folgendes ein:

    Prompt Auswahl
    Auswählen einer Sprache für Ihr Funktionsprojekt Klicken Sie auf die Option JavaScript.
    Auswählen eines JavaScript-Programmiermodells Wählen Sie Model V4 (Preview).
    Auswählen einer Vorlage für die erste Funktion Ihres Projekts Klicken Sie auf die Option HTTP trigger.
    Angeben eines Funktionsnamens Geben Sie HttpExampleein.
    Auswählen, wie Sie Ihr Projekt öffnen möchten Wählen Sie Open in current window.

    Auf der Grundlage dieser Informationen generiert Visual Studio Code ein Azure Functions-Projekt mit einem HTTP-Trigger. Die lokalen Projektdateien können im Explorer angezeigt werden. Weitere Informationen zu erstellten Dateien finden Sie im Azure Functions JavaScript-Entwicklerhandbuch.

Lokales Ausführen der Funktion

Dank der Integration zwischen Visual Studio Code und Azure Functions Core Tools können Sie dieses Projekt vor der Veröffentlichung in Azure zunächst auf Ihrem lokalen Entwicklungscomputer ausführen.

  1. Um die Funktion lokal zu starten, drücken Sie F5, oder klicken Sie auf der Aktivitätsleiste auf der linken Seite auf das Symbol Ausführen und debuggen. Im Terminalbereich wird die Ausgabe aus den Core Tools angezeigt. Ihre App wird im Terminal-Bereich gestartet. Der lokal ausgeführte URL-Endpunkt Ihrer über HTTP ausgelösten Funktion wird angezeigt.

    Screenshot: VS Code-Ausgabe der lokalen Funktion.

    Sollten bei der Ausführung unter Windows Probleme auftreten, vergewissern Sie sich, dass das Standardterminal für Visual Studio Code nicht auf WSL Bash festgelegt ist.

  2. Wählen Sie mit den weiterhin im Terminal ausgeführten Core Tools das Azure-Symbol in der Aktivitätsleiste aus. Erweitern Sie im Bereich Arbeitsbereich die Option Lokales Projekt>Funktionen. Klicken Sie mit der rechten Maustaste auf die neue Funktion (unter Windows ), oder verwenden Sie STRG - (unter macOS), und wählen Sie dann Funktion jetzt ausführen... aus.

    „Funktion jetzt ausführen“ in Visual Studio Code

  3. Unter Enter request body (Anforderungstext eingeben) wird als Wert für den Text der Anforderungsnachricht angezeigt. Drücken Sie die EINGABETASTE, um diese Anforderungsnachricht an Ihre Funktion zu senden.

  4. Wenn die Funktion lokal ausgeführt wird und eine Antwort zurückgibt, wird in Visual Studio Code eine Benachrichtigung ausgelöst. Informationen zur Funktionsausführung werden im Terminal-Bereich angezeigt.

  5. Drücken Sie STRG + C, während der Bereich Terminal den Fokus hat, um die Core Tools zu beenden und den Debugger zu trennen.

Nachdem Sie sich vergewissert haben, dass die Funktion auf Ihrem lokalen Computer korrekt ausgeführt wird, können Sie das Projekt mithilfe von Visual Studio Code direkt in Azure veröffentlichen.

Anmelden bei Azure

Bevor Sie Ihre App veröffentlichen können, müssen Sie sich bei Azure anmelden.

  1. Sollten Sie noch nicht angemeldet sein, wählen Sie auf der Aktivitätsleiste das Azure-Symbol aus. Wählen Sie dann im Bereich Ressourcen die Option Bei Azure anmelden... aus.

    Screenshot: das Fenster für die Anmeldung bei Azure in VS Code.

    Wenn Sie bereits angemeldet sind und Ihre vorhandenen Abonnements anzeigen können, fahren Sie mit dem nächsten Abschnitt fort. Wenn Sie noch kein Azure-Konto haben, wählen Sie Azure-Konto erstellen aus. Lernende können Microsoft Azure for Students-Konto erstellen... auswählen.

  2. Wählen Sie im Browser nach entsprechender Aufforderung Ihr Azure-Konto aus, und melden Sie sich mit Ihren Azure-Anmeldeinformationen an. Wenn Sie ein neues Konto erstellen, können Sie sich anmelden, nachdem Ihr Konto erstellt wurde.

  3. Wenn Sie sich erfolgreich angemeldet haben, können Sie das neue Browserfenster schließen. Die Abonnements, die zu Ihrem Azure-Konto gehören, werden auf der Seitenleiste angezeigt.

Erstellen der Funktions-App in Azure

In diesem Abschnitt erstellen Sie eine Funktions-App und zugehörige Ressourcen in Ihrem Azure-Abonnement.

  1. Wählen Sie in der Aktivitätsleiste das Azure-Symbol aus. Wählen Sie dann im Bereich Ressourcen das +-Symbol aus, und wählen Sie die Option Funktions-App in Azure erstellen aus.

    Erstellen einer Ressource in Ihrem Azure-Abonnement

  2. Geben Sie nach entsprechender Aufforderung Folgendes ein:

    Prompt Auswahl
    Auswählen des Abonnements Wählen Sie das zu verwendende Abonnement aus. Diese Eingabeaufforderung wird nicht angezeigt, wenn nur ein Abonnement unter Ressourcen sichtbar ist.
    Eingeben eines global eindeutigen Namens für die Funktions-App Geben Sie einen Namen ein, der in einem URL-Pfad gültig ist. Der eingegebene Name wird überprüft, um sicherzustellen, dass er in Azure Functions eindeutig ist.
    Wählen Sie einen Runtimestapel aus Wählen Sie die lokal ausgeführte Sprachversion aus.
    Auswählen eines Standorts für neue Ressourcen Wählen Sie eine Region in Ihrer Nähe aus, um eine bessere Leistung zu erzielen.

    Die Erweiterung zeigt den Status einzelner Ressourcen an, während diese in Azure im Bereich Azure: Aktivitätsprotokoll erstellt werden.

    Protokoll der Azure-Ressourcenerstellung

  3. Nach Abschluss der Erstellung werden in Ihrem Abonnement die folgenden Azure-Ressourcen erstellt. Die Ressourcen werden basierend auf Ihrem Funktions-App-Namen benannt:

    • Eine Ressourcengruppe, bei der es sich um einen logischen Container für verwandte Ressourcen handelt.
    • Ein Azure Storage-Standardkonto, unter dem Status- und andere Informationen zu Ihren Projekten verwaltet werden.
    • Eine Funktions-App, die als Umgebung zum Ausführen Ihres Funktionscodes dient. Mit einer Funktions-App können Sie Funktionen zu logischen Einheiten gruppieren. Dies erleichtert die Verwaltung, Bereitstellung und Freigabe von Ressourcen im selben Hostingplan.
    • Ein App Service-Plan, der den zugrunde liegenden Host für Ihre serverlose Funktions-App definiert.
    • Eine mit der Funktions-App verbundene Application Insights-Instanz, die die Nutzung Ihrer Funktionen in der App nachverfolgt.

    Nach der Erstellung der Funktions-App wird eine Benachrichtigung angezeigt, und das Bereitstellungspaket wird angewendet.

    Tipp

    Standardmäßig werden die von Ihrer Funktions-App benötigten Azure-Ressourcen basierend auf dem von Ihnen angegebenen Namen der Funktions-App erstellt. Darüber hinaus werden sie auch in derselben neuen Ressourcengruppe mit der Funktions-App erstellt. Falls Sie entweder die Namen dieser Ressourcen anpassen oder vorhandene Ressourcen wiederverwenden möchten, müssen Sie das Projekt stattdessen mit den erweiterten Erstellungsoptionen veröffentlichen.

Aktualisieren von App-Einstellungen

Damit Ihre V4-Programmiermodell-App in Azure ausgeführt werden kann, müssen Sie eine neue Anwendungseinstellung namens AzureWebJobsFeatureFlags mit dem Wert EnableWorkerIndexing hinzufügen. Diese Einstellung befindet sich bereits in der Datei „local.settings.json“.

  1. Drücken Sie in Visual Studio Code F1, um die Befehlspalette zu öffnen. Suchen Sie in der Befehlspalette den Befehl Azure Functions: Add New Setting..., und wählen Sie ihn aus.

  2. Wählen Sie Ihre neue Funktions-App aus, geben Sie AzureWebJobsFeatureFlags als Namen für die neue App-Einstellung ein, und drücken Sie dann die EINGABETASTE.

  3. Geben Sie EnableWorkerIndexing als Wert ein, und drücken Sie dann die EINGABETASTE.

Bereitstellen des Projekts in Azure

Wichtig

Bei der Bereitstellung in einer vorhandenen Funktions-App wird der Inhalt dieser App in Azure immer überschrieben.

  1. Wählen Sie das Azure-Symbol in der Aktivitätsleiste aus, wählen Sie dann im Arbeitsbereichsbereich Ihren Projektordner aus, und wählen Sie die Schaltfläche Bereitstellen... aus.

    Bereitstellen eines Projekts aus dem Visual Studio Code-Arbeitsbereich

  2. Wählen Sie Funktions-App bereitstellen aus, wählen Sie die soeben erstellte Funktions-App aus und wählen Sie Bereitstellen aus.

  3. Wählen Sie nach Abschluss der Bereitstellung Ausgabe anzeigen aus, um die Erstellungs- und Bereitstellungsergebnisse (auch für die von Ihnen erstellten Azure-Ressourcen) anzuzeigen. Wenn Sie die Benachrichtigung übersehen haben, wählen Sie das Glockensymbol in der unteren rechten Ecke aus, um sie erneut anzuzeigen.

    Screenshot: das Fenster „Ausgabe anzeigen“.

Ausführen der Funktion in Azure

  1. Erweitern Sie im Bereich Ressourcen auf der Seitenleiste Ihr Abonnement, die neue Funktions-App und Funktionen. Klicken Sie unter Windows mit der rechten Maustaste (unter macOS STRG+Mausklick) auf die Funktion HttpExample, und wählen Sie Funktion jetzt ausführen... aus.

    Screenshot: Ausführen einer Funktion in Azure von Visual Studio Code aus.

  2. Unter Enter request body (Anforderungstext eingeben) wird als Wert für den Text der Anforderungsnachricht angezeigt. Drücken Sie die EINGABETASTE, um diese Anforderungsnachricht an Ihre Funktion zu senden.

  3. Wenn die Funktion in Azure ausgeführt wird und eine Antwort zurückgibt, wird in Visual Studio Code eine Benachrichtigung ausgelöst.

Ändern des Codes und erneutes Bereitstellen in Azure

  1. Wählen Sie in Visual Studio Code in der Explorer-Ansicht die Datei ./HttpExample/index.js aus.

  2. Ersetzen Sie die Datei durch den folgenden Code, um ein JSON-Objekt zu erstellen und zurückzugeben.

    module.exports = async function (context, req) {

    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = (req.query.name || (req.body && req.body.name));
        const sport = (req.query.sport || (req.body && req.body.sport));

        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }

        // Add or change code here
        const message = `${name} likes ${sport}`;

        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

  3. Erneutes lokales Ausführen der Funktions-App

  4. Ändern Sie in der Eingabeaufforderung Anforderungstext eingeben den Text der Anforderungsnachricht in { „name“: „Tom“,„sport“:„basketball“ }. Drücken Sie die EINGABETASTE, um diese Anforderungsnachricht an Ihre Funktion zu senden.

  5. Zeigen Sie die Antwort in der Benachrichtigung an:

    {
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

  6. Erneutes Bereitstellen der Funktion in Azure.

Problembehandlung

Nutzen Sie die folgende Tabelle, um die häufigsten Probleme zu beheben, die bei der Verwendung dieser Schnellstartanleitung auftreten.

Problem Lösung
Sie können kein lokales Funktionsprojekt erstellen? Stellen Sie sicher, dass die Azure Functions-Erweiterung installiert ist.
Die Funktion kann nicht lokal ausgeführt werden? Stellen Sie sicher, dass die neueste Version der Azure Functions Core Tools installiert ist.
Sollten bei der Ausführung unter Windows Probleme auftreten, vergewissern Sie sich, dass die Standardshell des Terminals für Visual Studio Code nicht auf „WSL Bash“ festgelegt ist.
Können Sie die Funktion nicht in Azure bereitstellen? Überprüfen Sie die Ausgabe auf Fehlerinformationen. Das Glockensymbol in der unteren rechten Ecke ist eine weitere Möglichkeit zum Anzeigen der Ausgabe. Haben Sie die Veröffentlichung in einer vorhandenen Funktions-App durchgeführt? Diese Aktion überschreibt den Inhalt dieser App in Azure.
Konnte die cloudbasierte Funktions-App nicht ausgeführt werden? Denken Sie daran, die Abfragezeichenfolge für das Senden von Parametern zu verwenden.

Bereinigen von Ressourcen

Wenn Sie mit dem nächsten Schritt fortfahren und Ihrer Funktion eine Azure Storage-Warteschlangenbindung hinzufügen möchten, müssen alle Ihre Ressourcen erhalten bleiben, um darauf aufbauen zu können.

Andernfalls können Sie die Funktions-App und die zugehörigen Ressourcen wie im Anschluss beschrieben löschen, um weitere Kosten zu vermeiden.

  1. Wählen Sie in Visual Studio Code das Azure-Logo aus, um den Azure-Explorer zu öffnen.
  2. Suchen Sie im Abschnitt „Ressourcengruppen“ nach Ihrer Ressourcengruppe.
  3. Klicken Sie mit der rechten Maustaste auf die Ressourcengruppe und wählen Sie die Option Löschen aus.

Weitere Informationen zu den Kosten von Functions finden Sie unter Abschätzen der Kosten des Verbrauchstarifs.

Nächste Schritte

Sie haben Visual Studio Code genutzt, um eine Funktions-App mit einer einfachen Funktion zu erstellen, die über HTTP ausgelöst wird. Im nächsten Artikel erweitern Sie diese Funktion, indem Sie eine Verbindung mit Azure Cosmos DB oder Azure Storage herstellen. Weitere Informationen zum Herstellen einer Verbindung mit anderen Azure-Diensten finden Sie unter Hinzufügen von Bindungen zu einer vorhandenen Funktion in Azure Functions. Weitere Informationen zur Sicherheit finden Sie unter Schützen von Azure Functions.

Mit Azure Cosmos DB verbindenMit Azure Queue Storage verbindenMit Azure SQL verbinden