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

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.

Im Rahmen dieser Schnellstartanleitung fallen in Ihrem Azure-Konto ggf. geringfügige Kosten im Centbereich 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 wird der Funktionscode in Azure veröffentlicht.

  1. Wählen Sie auf der Aktivitätsleiste das Azure-Symbol und anschließend im Bereich Azure: Funktionen das Symbol Neues Projekt erstellen aus.

    Choose Create a new project

  2. Wählen Sie einen Verzeichnisspeicherort für Ihren Projektarbeitsbereich und anschließend Auswählen aus.

    Hinweis

    Diese Schritte sollten außerhalb eines Arbeitsbereichs ausgeführt werden. Wählen Sie in diesem Fall keinen Projektordner aus, der Teil eines Arbeitsbereichs ist.

  3. 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 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 Add to workspace.

    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.

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. Drücken Sie zum Aufrufen Ihrer Funktion F5, um das Funktions-App-Projekt zu starten. Die Ausgabe der Core Tools wird im Bereich Terminal angezeigt. Ihre App wird im Terminal-Bereich gestartet. Der lokal ausgeführte URL-Endpunkt Ihrer über HTTP ausgelösten Funktion wird angezeigt.

    Local function VS Code output

    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. Navigieren Sie bei ausgeführten Core Tools zum Bereich Azure: Functions. Erweitern Sie unter Functions die Option Lokales Projekt>Functions. 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.

    Execute function now from 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 und anschließend im Bereich Azure: Funktionen die Option Bei Azure anmelden... aus. Falls Sie noch nicht über ein Konto verfügen, können Sie ein kostenloses Azure-Konto erstellen . Schüler/Studenten können ein kostenloses Azure for Students-Konto erstellen .

    Sign in to Azure within VS Code

    Sollten Sie bereits angemeldet sein, fahren Sie mit dem nächsten Abschnitt fort.

  2. Wählen Sie im Browser nach entsprechender Aufforderung Ihr Azure-Konto aus, und melden Sie sich mit Ihren Azure-Anmeldeinformationen an.

  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.

Bereitstellen des Projekts in Azure

In diesem Abschnitt erstellen Sie eine Funktions-App sowie zugehörige Ressourcen in Ihrem Azure-Abonnement und stellen anschließend Ihren Code bereit.

Wichtig

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

  1. Wählen Sie auf der Aktivitätsleiste das Azure-Symbol und anschließend im Bereich Azure: Funktionen die Schaltfläche Deploy to function app... (In Funktions-App bereitstellen...) aus.

    Publish your project to Azure

  2. Geben Sie nach entsprechender Aufforderung Folgendes ein:

    Prompt Auswahl
    Auswählen einer Funktions-App in Azure Klicken Sie auf die Option + Create new Function App. (Wählen Sie nicht die Option Advanced aus, diese wird im vorliegenden Artikel nicht behandelt.)
    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.
    Auswählen einer Runtime Wählen Sie die lokal ausgeführte Node.js-Version aus. Sie können den Befehl node --version ausführen, um Ihre Version zu überprüfen.
    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 Benachrichtigungsbereich erstellt werden.

    Notification of Azure resource creation

    Nach Abschluss des Vorgangs werden in Ihrem Abonnement die folgenden Azure-Ressourcen erstellt, deren Namen auf dem Namen Ihrer Funktions-App basieren:

    • 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.
    • Ein Verbrauchsplan, der den zugrunde liegenden Host für Ihre serverlose Funktions-App definiert.
    • 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.
    • Eine mit der Funktions-App verbundene Application Insights-Instanz, die die Nutzung Ihrer serverlosen Funktion nachverfolgt.
  3. 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.

  4. Wählen Sie in dieser Benachrichtigungen 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.

    Create complete notification

Ausführen der Funktion in Azure

  1. Erweitern Sie im Bereich Azure: Funktionen 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.

    Execute function now in Azure from Visual Studio Code

  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 der Ansicht VSCode-Explorer 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 Azure Functions Core Tools installiert sind.
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.