Übung: Erstellen eines Azure Functions-Projekts

6 Minuten

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:

Erstellen eines Branches während des Vorbereitens von Änderungen an Ihrer Web-App
Durchsuchen des Azure Functions-Projekts
Erstellen der HTTP GET-Funktion
Ersetzen des Startcodes für Funktionen durch Logik zum Abrufen von Produkten
Konfigurieren der Web-App für die Proxy-Weiterleitung von HTTP-Anforderungen an die API
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 api-starter Ordner enthält ein unvollständiges Azure Functions-Projekt. Lassen Sie uns das jetzt abschließen.

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.

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.
Geben Sie folgenden Befehl ein, und wählen Sie ihn aus: Git: Auschecken an....
Wählen Sie " Neue Verzweigung erstellen" aus.
Geben Sie api für den neuen Branch-Namen ein, und drücken Sie Enter.

Sie haben gerade den git branch der API erstellt.

Abschließen der Azure Functions-API

Um die API abzuschließen, verschieben Sie zunächst den Start-API-Code in einen Ordner namens api. Sie haben diesen Ordnernamen für die api_location eingegeben, wenn Sie die Static Web Apps-Instanz erstellt haben.

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.
Geben Sie Terminal: Neues Terminal (im aktiven Arbeitsbereich) erstellen ein und wählen Sie es aus.
Vergewissern Sie sich, dass Sie sich im Stammordner des Projekts befinden.
Führen Sie den folgenden Git-Befehl aus, um den Ordner umzubenennen api-starter in api.
```
git mv api-starter api
```
Öffnen Sie die Befehlspalette, indem Sie F1 drücken.
Geben Sie Git: Commit All ein und wählen Sie es aus.
Geben Sie die Commitnachricht api ein, und drücken Sie die EINGABETASTE.

Nun wird im Visual Studio Code-Explorer ein API-Ordner angezeigt. Der API-Ordner enthält Ihr Azure Functions-Projekt zusammen mit drei Funktionen.

Ordner und Datei	Methode	route
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	Löschen	`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. Fügen wir dies nun hinzu.

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

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

Wechseln Sie zum Visual Studio Marketplace, und installieren Sie die Azure Functions-Erweiterung für Visual Studio Code.
Wenn die Registerkarte der Erweiterung in Visual Studio Code geladen wird, wählen Sie Installieren aus.
Nachdem die Installation abgeschlossen ist, wählen Sie "Neu laden" aus.

Hinweis

Installieren Sie unbedingt die Azure Functions Core Tools, mit denen 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.

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.
Geben Sie Azure-Funktionen ein, und wählen Sie sie aus: Funktion erstellen.
Wenn Sie aufgefordert werden, eine Funktion zu erstellen, wählen Sie "HTTP-Trigger" aus.
Geben Sie "products-get " als Namen der Funktion ein.
Wählen Sie "Anonym" als Authentifizierungsstufe aus.

Hinweis

Die Funktionen-App befindet sich im api Ordner, der sie von den einzelnen Web-App-Projekten trennt. 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

Beachten Sie, dass die Ordner-API/products-get die Datei function.jsonenthä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 wird, wird der Routenendpunkt standardmäßig als "products-get" generiert. Sie möchten jedoch, dass der Endpunkt Produkte sein soll.

Konfigurieren Sie die Funktion:

Öffnen Sie die Datei api/products-get/function.json.
Beachten Sie, dass die Methoden sowohl GET als auch POST zulassen.
Ändern Sie das Methodenarray, sodass nur GET-Anforderungen zugelassen werden.
Fügen Sie einen "route": "products"-Eintrags nach dem Methodenarray hinzu.

Nun wird die Funktion bei einer HTTP GET-Anforderung an products ausgelöst. Ihr function.json sollte wie der folgende Code aussehen:

{
  "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 Die HTTP-Anforderung an die Route gesendet wird.

Sie müssen die Logik aktualisieren, um Ihre Produkte abzurufen. Im JavaScript-Modul /shared/product-data.jsgibt es 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:

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

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.

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.

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

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 local.settings.json Datei wird in der GITIGNORE-Datei aufgeführt, wodurch verhindert wird, dass diese Datei an GitHub übertragen wird. Die Datei ist in gitignore aufgeführt, da Sie geheime Schlüssel darin speichern könnten, die Sie nicht in GitHub wünschen. Diese Auflistung ist der Grund, warum Sie die Datei beim Erstellen des Repositorys aus der Vorlage erstellen mussten.

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

Installieren Sie unbedingt die Azure Functions Core Tools, mit denen Sie Azure Functions lokal ausführen können.

Öffnen Sie ein Git-Terminal, und wechseln Sie zum api Ordner:
```
cd api
```
Führen Sie die Azure Functions-App lokal aus:
```
npm install
```
```
npm start
```

Starte die 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:

Öffnen Sie die Datei angular-app/proxy.conf.json.
Suchen Sie die Einstellung target: 'http://localhost:7071'.
Wie Sie sehen, verweist der Zielport auf 7071.

Öffnen Sie die Datei react-app/package.json.
Suchen Sie die Einstellung "proxy": "http://localhost:7071/",.
Wie Sie sehen, verweist der Proxyport auf 7071.

Öffnen Sie die Datei svelte-app/rollup.config.js.
Suchen Sie die Codezeile const api = 'http://localhost:7071/api';.
Wie Sie sehen, zeigt der Port der API auf 7071.

Öffnen Sie die Datei vue-app/vue.config.js.
Suchen Sie die Einstellung target: 'http://localhost:7071',.
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 die API gesendet. Führen Sie die folgenden Schritte aus, um die Web-App auszuführen:

Öffnen Sie eine zweite Git-Terminalinstanz.
Geben Sie als Nächstes diesen Befehl ein, um zum Ordner Ihres bevorzugten Front-End-Frameworks zu wechseln:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

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.

Wechseln Sie zu http://localhost:4200.

Wechseln Sie zu http://localhost:3000.

Wechseln Sie zu http://localhost:5000.

Wechseln Sie zu http://localhost:8080.

Sie haben Ihre Anwendung erstellt. Diese wird nun lokal ausgeführt und sendet HTTP GET-Anforderungen an Ihre API. Beenden Sie nun die ausgeführte App und API, indem Sie STRG-C in den Terminals drücken.

Nächste Schritte

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

Feedback

War diese Seite hilfreich?

Übung: Erstellen eines Azure Functions-Projekts

Abrufen der Funktions-App

Erstellen eines API-Branches

Abschließen der Azure Functions-API

Erstellen der HTTP GET-Funktion

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

Erstellen der Funktion

Konfigurieren der HTTP-Methode und des Routenendpunkts

Aktualisieren der Funktionslogik

Lokales Konfigurieren von CORS

Ausführen der API

Starte die Web-App

Konfigurieren des Proxyports

Ausführen der Front-End-Web-App

Navigieren zu Ihrer App

Nächste Schritte

Feedback