Ü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 Ordner 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 Git: Checkout to... (Git: auschecken in...) ein, und wählen Sie die option aus.
Klicken Sie auf Create new branch (Neuen Branch erstellen).
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. Sie haben diesen Ordnernamen beim Erstellen der Static Web Apps-Instanz für api_location (API-Speicherort) angegeben.

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.
Geben Sie Terminal: Neues Terminal erstellen (im aktiven Arbeitsbereich) ein, und wählen Sie diese Option aus.
Vergewissern Sie sich, dass Sie sich im Stammordner des Projekts befinden.
Führen Sie die folgenden Git-Befehle aus, um den Ordner api-starter in api umzubenennen.
```
git mv api-starter api
```
Öffnen Sie die Befehlspalette, indem Sie F1 drücken.
Geben Sie Git: Commit für alle ausführen ein, und wählen Sie den angezeigten Eintrag aus.
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. 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 Erweiterung Azure Functions für Visual Studio Code.
Wenn die Registerkarte der Erweiterung in Visual Studio Code geladen wird, wählen Sie Installieren aus.
Wählen Sie nach der Installation Erneut laden aus.

Hinweis

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

Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.
Geben Sie Azure Functions: Create Function (Azure Functions: Funktion erstellen) ein und wählen Sie die Option aus.
Wenn Sie aufgefordert werden, eine Funktion zu erstellen, wählen Sie HTTP-Trigger aus.
Geben Sie der Funktion den Namen products-get.
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:

Ö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. 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:

Ö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 Datei local.settings.json ist in der Datei .gitignore aufgelistet. Daher kann sie nicht per Push an GitHub übertragen werden. Der Grund dafür ist, dass Sie Geheimnisse in dieser Datei speichern könnten, die nicht an 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

Installieren Sie Azure Functions Core Tools, damit 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
```

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:

Ö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.

Navigieren Sie zu http://localhost:4200.

Navigieren Sie zu http://localhost:3000.

Navigieren Sie zu http://localhost:5000.

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. 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 mit der API.

Ü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

Ausführen der Web-App

Konfigurieren des Proxyports

Ausführen der Front-End-Web-App

Navigieren zu Ihrer App

Nächste Schritte

Feedback