Övning – Skapa ett Azure Functions-projekt

6 minuter

Din inköpslisteapp behöver ett API. I den här övningen skapar och kör du ditt API med hjälp av ett Azure Functions-projekt. Därifrån utökar du API:et med en ny funktion med hjälp av Azure Functions-tillägget för Visual Studio Code.

I den här övningen slutför du följande steg:

Skapa en gren när du förbereder dig för att göra ändringar i webbappen.
Utforska Azure Function-projektet.
Skapa funktionen HTTP GET.
Ersätt funktionens startkod med logik för att hämta produkter.
Konfigurera webbappen för att proxy-HTTP-begäranden till API:et.
Kör API:et och webbappen.

Hämta funktionsappen

Lägg nu till ett API och anslut det till klientdelsappen. Mappen api-starter innehåller ett ofullständigt Azure Functions-projekt. Så låt oss slutföra det nu.

Skapa en API-gren

Innan du börjar göra ändringar i en app är det alltid bra att skapa en ny gren för ändringarna. Nu ska du skapa en ny gren eftersom du ska färdigställa API:et för appen.

Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.
Ange och välj Git: Checkout to....
Välj Skapa ny gren.
Ange API för det nya grennamnet och tryck på Retur.

Nu har du skapat Git-grenen api.

Slutföra Azure Functions-API:et

Slutför API:et genom att börja med att flytta koden för start-API:et till en mapp med namnet API. Du angav det här mappnamnet för api_location när du skapade Static Web Apps-instansen.

Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.
Ange och välj Terminal: Skapa ny terminal (i aktiv arbetsyta).
Kontrollera att du är i rotmappen för projektet.
Kör följande git-kommando för att byta namn på mappen api-starter till api.
```
git mv api-starter api
```
Öppna kommandopaletten genom att trycka på F1.
Ange och välj Git: Checka in alla.
Ange api:et för incheckningsmeddelande och tryck på Retur.

Nu visas en API-mapp i Visual Studio Code-utforskaren. Mappen api innehåller ditt Azure Functions-projekt och tre funktioner.

Mapp och fil	Metod	Flöde
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

Skapa en HTTP GET-funktion

Ditt API har vägar för att manipulera produkterna i inköpslistan, men saknar en väg för att hämta produkterna. Nu ska vi lägga till det.

Installera Azure Functions-tillägget för Visual Studio Code

Du kan skapa och hantera Azure Functions-program med hjälp av Azure Functions-tillägget för Visual Studio Code.

Gå till Visual Studio Marketplace och installera Azure Functions-tillägget för Visual Studio Code.
När tilläggsfliken läses in i Visual Studio Code väljer du Installera.
När installationen är klar väljer du Ladda om.

Kommentar

Se till att installera Azure Functions Core Tools, som gör att du kan köra Azure Functions lokalt.

Skapa funktionen

Nu utökar du azure-funktionsappen med en funktion för att hämta dina produkter.

Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.
Ange och välj Azure Functions: Skapa funktion.
När du uppmanas att skapa en funktion väljer du HTTP-utlösare.
Ange products-get som namnet på funktionen.
Välj Anonym som autentiseringsnivå.

Kommentar

Functions-appen finns i mappen api, som avgränsar den från de olika webbapprojekten. Alla webbappar som använder klientramverken gör anrop till samma API. Du kan välja hur du vill strukturera din app, men i det här exemplet blir det enklare att ha dem separerade.

Konfigurera HTTP-metoden och vägslutpunkten

Observera att mappen api/products-get innehåller filen function.json. Den här filen innehåller konfigurationen för din funktion.

Vägslutpunkten har som standard samma namn som mappen som innehåller funktionen. Eftersom funktionen skapas i mappen products-get genereras routningsslutpunkten som products-get som standard. Men du vill att slutpunkten ska vara products.

Konfigurera funktionen:

Öppna filen api/products-get/function.json.
Observera att metoderna tillåter både GET och POST.
Ändra metodmatrisen så att endast begäranden tillåts GET .
Lägg till en "route": "products" post efter metodmatrisen.

Nu utlöses din funktion när en HTTP GET-begäran skickas till products. Filen function.json bör nu se ut så här:

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

Uppdatera funktionslogiken

Filen index.js i mappen api/products-get innehåller logik som körs när du gör en HTTP-begäran till vägen.

Du måste uppdatera logiken för att hämta dina produkter. Det finns dataåtkomstlogik i JavaScript-modulen /shared/product-data.js. Modulen product-data exponerar funktionen getProducts för att hämta produkter för inköpslistan.

Nu ändrar du funktionsslutpunkten så att produkterna returneras:

Öppna filen api/products-get/index.js.

Ersätt innehållet med följande kod:

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);
  }
};

Funktionen hämtar produkterna och returnerar dem med statuskoden 200 när den lyckas.

Du behöver inte bekymra dig om CORS när du publicerar till Azure Static Web Apps. Azure Static Web Apps konfigurerar automatiskt din app så att den kan kommunicera med ditt API på Azure med hjälp av en omvänd proxy. Men när den körs lokalt måste du ställa in CORS för att tillåta kommunikation mellan webbappen och API:et.

Nu meddelar du Azure Functions att det ska vara tillåtet för webbappen att göra HTTP-begäranden till API:et på din dator.

Skapa en fil med namnet api/local.settings.json.

Lägg till följande innehåll i filen:

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Kommentar

Filen local.settings.json ingår i listan i filen .gitignore, vilket gör att filen inte kan pushas till GitHub. Det beror på att du kan lagra hemligheter i den här filen som du inte vill ha i GitHub. Därför behövde du skapa filen när du skapade din lagringsplats från mallen.

Köra API:et

Nu är det dags att testa hur webbappen och Azure Functions-projektet fungerar tillsammans. Börja med att köra ditt Azure Functions-projekt lokalt genom att följa dessa steg:

Kommentar

Se till att installera Azure Functions Core Tools, som gör att du kan köra Azure Functions lokalt.

Öppna en git-terminal och gå till api-mappen:
```
cd api
```
Kör Azure Functions-appen lokalt:
```
npm install
```
```
npm start
```

Kör webbappen

Ditt API körs. Nu måste du konfigurera din klientapp för att göra HTTP-begäran till API:et. Klientdelsappen körs på en port och API:et körs på en annan port (7071). Varje klientramverk kan konfigureras för att skicka HTTP-begäranden via proxy till en port på ett säkert sätt.

Konfigurera din proxyport

Konfigurera proxyn för din klientapp på följande sätt:

Öppna filen angular-app/proxy.conf.json.
Leta upp inställningen target: 'http://localhost:7071' .
Observera att målets port pekar på 7071.

Öppna filen react-app/package.json.
Leta upp inställningen "proxy": "http://localhost:7071/", .
Observera att proxyporten pekar på 7071.

Öppna filen svelte-app/rollup.config.js.
Leta upp kodraden const api = 'http://localhost:7071/api';.
Observera att API:ets port pekar på 7071.

Öppna filen vue-app/vue.config.js.
Leta upp inställningen target: 'http://localhost:7071', .
Observera att målets port pekar på 7071.

Kör din klientwebbapp

Ditt API körs redan på port 7071. Nu när du kör webbappen gör den sina HTTP-begäranden till ditt API. Kör webbappen genom att följa dessa steg:

Öppna en andra git-terminalinstans.
Ange sedan det här kommandot för att gå till mappen för ditt önskade klientdelsramverk:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Kör klientprogrammet på klientsidan:

npm start

npm start

npm run dev

npm run serve

Gå till din app

Nu testar vi att köra appen lokalt mot Azure Functions-API:et.

Bläddra till http://localhost:4200.

Bläddra till http://localhost:3000.

Bläddra till http://localhost:5000.

Bläddra till http://localhost:8080.

Du har skapat ditt program och nu körs det lokalt och gör HTTP GET-begäranden till ditt API. Stoppa nu appen och API:et som körs genom att trycka på Ctrl-C i terminalerna.

Nästa steg

Din app fungerar lokalt och nästa steg är att publicera appen med API:et.

Övning – Skapa ett Azure Functions-projekt

Hämta funktionsappen

Skapa en API-gren

Slutföra Azure Functions-API:et

Skapa en HTTP GET-funktion

Installera Azure Functions-tillägget för Visual Studio Code

Skapa funktionen

Konfigurera HTTP-metoden och vägslutpunkten

Uppdatera funktionslogiken

Konfigurera resursdelning för korsande ursprung (CORS) lokalt

Köra API:et

Kör webbappen

Konfigurera din proxyport

Kör din klientwebbapp

Gå till din app

Nästa steg

Feedback