Übung: Erstellen eines Azure Functions-Projekts

Abgeschlossen

Ihre Web-App für eine Einkaufsliste benötigt eine API. In dieser Übung erstellen und führen Sie die API mithilfe eines Azure Functions-Projekts aus. Von dort aus erweitern Sie die API mithilfe der Azure Functions-Erweiterung für Visual Studio Code mit einer neuen Funktion.

In dieser Übung führen Sie die folgenden Schritte aus:

  1. Erstellen eines Branches während des Vorbereitens von Änderungen an Ihrer Web-App
  2. Durchsuchen des Azure Functions-Projekts
  3. Erstellen der HTTP GET-Funktion
  4. Ersetzen des Startcodes für Funktionen durch Logik zum Abrufen von Produkten
  5. Konfigurieren der Web-App für die Proxy-Weiterleitung von HTTP-Anforderungen an die API
  6. Ausführen der API und der Web-App

Abrufen der Funktions-App

Nun fügen Sie eine API hinzu und verbinden sie mit Ihrer Front-End-App. Der Ordner api-starter Ordner enthält ein unvollständiges Azure Functions-Projekt. Dieses werden Sie nun vervollständigen.

Erstellen eines API-Branches

Bevor Sie Änderungen an einer App vornehmen, empfiehlt es sich, einen neuen Branch für die Änderungen zu erstellen. Sie sind im Begriff, die API für Ihre App fertigzustellen, daher sollten Sie den Branch jetzt erstellen.

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Git: Checkout to... (Git: auschecken in...) ein, und wählen Sie die option aus.

  3. Klicken Sie auf Create new branch (Neuen Branch erstellen).

  4. Geben Sie api als Namen des neuen Branchs ein, und drücken Sie die EINGABETASTE

Sie haben soeben den Git-Branch api erstellt.

Abschließen der Azure Functions-API

Um die API abzuschließen, verschieben Sie zunächst den API-Startercode in einen Ordner mit dem Namen api. Dies ist der Ordnername, den Sie beim Erstellen der Static Web Apps-Instanz für api_location (API-Speicherort) angegeben haben.

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Terminal: Neues Terminal erstellen (im aktiven Arbeitsbereich) ein, und wählen Sie diese Option aus.

  3. Vergewissern Sie sich, dass Sie sich im Stammordner des Projekts befinden.

  4. Führen Sie die folgenden Git-Befehle aus, um den Ordner api-starter in api umzubenennen.

    git mv api-starter api
    
  5. Öffnen Sie die Befehlspalette, indem Sie F1 drücken.

  6. Geben Sie Git: Commit für alle ausführen ein, und wählen Sie den angezeigten Eintrag aus.

  7. Geben Sie die Commitnachricht api ein, und drücken Sie die EINGABETASTE.

Im Visual Studio Code-Explorer sehen Sie nun einen Ordner api. Der Ordner api enthält Ihr Azure Functions-Projekt sowie drei Funktionen.

Ordner und Datei Methode Route
api/products-post POST products
api/products-put PUT products/:id
api/products-delete DELETE products/:id

Erstellen der HTTP GET-Funktion

Ihre API verfügt über Routen zum Bearbeiten der Produkte für die Einkaufsliste, es fehlt jedoch eine Route zum Abrufen der Produkte. Diese fügen Sie jetzt hinzu.

Installieren der Azure Functions-Erweiterung für Visual Studio Code

Sie können Azure Functions-Anwendungen mit der Azure Functions-Erweiterung für Visual Studio Code erstellen und verwalten.

  1. Wechseln Sie zum Visual Studio Marketplace, und installieren Sie die Erweiterung Azure Functions für Visual Studio Code.

  2. Wenn die Registerkarte der Erweiterung in Visual Studio Code geladen wird, wählen Sie Installieren aus.

  3. Wählen Sie nach der Installation Erneut laden aus.

Hinweis

Denken Sie daran, die Azure Functions Core Tools zu installieren, damit Sie Azure Functions lokal ausführen können.

Erstellen der Funktion

Jetzt erweitern Sie Ihre Azure Functions-App durch eine Funktion zum Abrufen Ihrer Produkte.

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Azure Functions: Create Function (Azure Functions: Funktion erstellen) ein und wählen Sie die Option aus.

  3. Wenn Sie aufgefordert werden, eine Funktion zu erstellen, wählen Sie HTTP-Trigger aus.

  4. Geben Sie der Funktion den Namen products-get.

  5. Wählen Sie als Authentifizierungsebene Anonym aus.

Hinweis

Die Functions-App befindet sich im Ordner api, der sie von den einzelnen Web-App-Projekten abgrenzt. Alle Web-Apps, die die Front-End-Frameworks verwenden, rufen dieselbe API auf. Sie können selbst entscheiden, wie Ihre Anwendung strukturiert werden soll. Für dieses Beispiel ist es jedoch hilfreich, sie getrennt voneinander zu untersuchen.

Konfigurieren der HTTP-Methode und des Routenendpunkts

Sie stellen fest, dass der Ordner api/products-get die Datei function.json enthält. Diese Datei enthält die Konfiguration für Ihre Funktion.

Der Routenendpunkt weist laut Konvention denselben Namen wie der Ordner auf, der die Funktion enthält. Da die Funktion im Ordner products-get erstellt wurde, wird der Routenendpunkt standardmäßig als products-get generiert. Der Endpunkt soll jedoch products sein.

Konfigurieren Sie die Funktion:

  1. Öffnen Sie die Datei api/products-get/function.json.

  2. Beachten Sie, dass die Methoden sowohl GET als auch POST zulassen.

  3. Ändern Sie das Methodenarray, sodass nur GET-Anforderungen zugelassen werden.

  4. Fügen Sie einen "route": "products"-Eintrags nach dem Methodenarray hinzu.

Nun wird die Funktion bei einer HTTP GET-Anforderung an products ausgelöst. Der Inhalt Ihrer Datei function.json sollte dem folgenden Code ähneln:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Aktualisieren der Funktionslogik

Die Datei index.js im Ordner api/products-get enthält Logik, die ausgeführt wird, wenn Sie eine HTTP-Anforderung an die Route senden.

Sie müssen die Logik aktualisieren, um Ihre Produkte abzurufen. Das JavaScript-Modul /shared/product-data.js enthält Datenzugriffslogik. Das Modul product-data macht die Funktion getProducts verfügbar, mit der die Produkte für die Einkaufsliste abgerufen werden.

Ändern Sie nun den Funktionsendpunkt für die Rückgabe der Produkte:

  1. Öffnen Sie die Datei api/products-get/index.js.

  2. Ersetzen Sie ihren Inhalt durch den folgenden Code:

    const data = require('../shared/product-data');
    
    module.exports = async function (context, req) {
      try {
        const products = data.getProducts();
        context.res.status(200).json(products);
      } catch (error) {
        context.res.status(500).send(error);
      }
    };
    

Die Funktion ruft die Produkte ab und gibt sie bei erfolgreicher Ausführung mit dem Statuscode 200 zurück.

Lokales Konfigurieren von CORS

Beim Veröffentlichen in Azure Static Web Apps müssen Sie sich keine Gedanken über CORS machen. Azure Static Web Apps konfiguriert Ihre App automatisch so, dass Sie mit der API in Azure über einen Reverseproxy kommunizieren kann. Bei lokaler Ausführung hingegen müssen Sie CORS so konfigurieren, dass die Kommunikation zwischen Ihrer Web-App und Ihrer API ermöglicht wird.

Teilen Sie Azure Functions nun mit, dass die Web-App HTTP-Anforderungen an die API auf dem Computer senden soll.

  1. Erstellen Sie eine Datei mit dem Namen api/local.settings.json.

  2. Fügen Sie der Datei den folgenden Inhalt hinzu:

    {
      "Host": {
        "CORS": "http://localhost:4200"
      }
    }
    
    {
      "Host": {
        "CORS": "http://localhost:3000"
      }
    }
    
    {
      "Host": {
        "CORS": "http://localhost:5000"
      }
    }
    
    {
      "Host": {
        "CORS": "http://localhost:8080"
      }
    }
    

Hinweis

Die Datei local.settings.json ist in der Datei .gitignore aufgelistet. Daher kann sie nicht per Push an GitHub übertragen werden. Dies liegt daran, dass Sie Geheimnisse in dieser Datei speichern könnten, die nicht in GitHub übertragen werden sollten. Daher mussten Sie die Datei erstellen, als Sie Ihr Repository aus der Vorlage erstellt haben.

Ausführen der API

Schauen Sie sich nun an, wie Ihre Web-App und Ihr Azure Functions-Projekt zusammenarbeiten. Führen Sie zuerst das Azure Functions-Projekt lokal aus, indem Sie die folgenden Schritte ausführen:

Hinweis

Denken Sie daran, die Azure Functions Core Tools zu installieren, damit Sie Azure Functions lokal ausführen können.

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Terminal: Neues Terminal erstellen (im aktiven Arbeitsbereich) ein, und wählen Sie diese Option aus.

  3. Wechseln Sie zum Ordner api:

    cd api
    
  4. Führen Sie die Azure Functions-App lokal aus:

    func start
    

Ausführen der Web-App

Ihre API wird ausgeführt. Nun müssen Sie Ihre Front-End-App so konfigurieren, dass die HTTP-Anforderung an die API gesendet wird. Die Front-End-App wird auf einem Port ausgeführt, die API auf einem anderen (Port 7071). Jedes Front-End-Framework kann so konfiguriert werden, dass HTTP-Anforderungen sicher über einen Proxy an einen Port gesendet werden.

Konfigurieren des Proxyports

Führen Sie die folgenden Schritte aus, um den Proxy für Ihre Front-End-App zu konfigurieren:

  1. Öffnen Sie die Datei angular-app/proxy.conf.json.

  2. Suchen Sie die Einstellung target: 'http://localhost:7071'.

  3. Wie Sie sehen, verweist der Zielport auf 7071.

  1. Öffnen Sie die Datei react-app/package.json.

  2. Suchen Sie die Einstellung "proxy": "http://localhost:7071/",.

  3. Wie Sie sehen, verweist der Proxyport auf 7071.

  1. Öffnen Sie die Datei svelte-app/rollup.config.js.

  2. Suchen Sie die Codezeile const api = 'http://localhost:7071/api';.

  3. Wie Sie sehen, verweist der Port der API auf 7071.

  1. Öffnen Sie die Datei vue-app/vue.config.js.

  2. Suchen Sie die Einstellung target: 'http://localhost:7071',.

  3. Wie Sie sehen, verweist der Zielport auf 7071.

Ausführen der Front-End-Web-App

Ihre API wird bereits an Port 7071 ausgeführt. Wenn Sie nun Ihre Web-App ausführen, werden deren HTTP-Anforderungen an Ihre API gesendet. Führen Sie die folgenden Schritte aus, um die Web-App auszuführen:

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Terminal: Neues Terminal erstellen (im aktiven Arbeitsbereich) ein, und wählen Sie diese Option aus.

  3. Navigieren Sie anschließend wie unten dargestellt zum Ordner Ihres bevorzugten Front-End-Frameworks:

    cd angular-app
    
    cd react-app
    
    cd svelte-app
    
    cd vue-app
    
  4. Führen Sie die Front-End-Clientanwendung aus:

    npm start
    
    npm start
    
    npm run dev
    
    npm run serve
    

Navigieren zu Ihrer App

Verfolgen Sie nun das lokale Ausführen der Anwendung mit der Azure Functions-API.

  1. Navigieren Sie zu http://localhost:4200.
  1. Navigieren Sie zu http://localhost:3000.
  1. Navigieren Sie zu http://localhost:5000.
  1. Navigieren Sie zu http://localhost:8080.

Sie haben Ihre Anwendung erstellt. Diese wird nun lokal ausgeführt und sendet HTTP GET-Anforderungen an Ihre API.

  1. Beenden Sie nun Ihre ausgeführte App und API, indem Sie in den Terminals STRG-C drücken.

Nächste Schritte

Ihre App funktioniert lokal. Im nächsten Schritt veröffentlichen Sie die App zusammen mit der API.