Övning – Skapa ett Azure Functions-projekt

  • 6 minuter

Webbappen för din inköpslista 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:

  1. Skapa en gren när du förbereder dig för att göra ändringar i webbappen.
  2. Utforska Azure Function-projektet.
  3. Skapa funktionen HTTP GET.
  4. Ersätt funktionens startkod med logik för att hämta produkter.
  5. Konfigurera webbappen för att beordra HTTP-begäranden att proxieras till API:et.
  6. 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 gör ändringar i en app är det bra att skapa en ny gren för ändringarna. Du är på väg att slutföra API:et för din app, så nu är det dags att skapa en gren.

  1. Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.

  2. Ange och välj Git: Checkout to....

  3. Välj Skapa ny gren.

  4. Ange api för det nya grennamnet och tryck på Retur.

Du har precis skapat api- git-gren.

Slutför Azure Functions-API:et

För att slutföra API:et börjar du 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.

  1. Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.

  2. Ange och välj Terminal: Skapa ny terminal (i aktiv arbetsyta).

  3. Kontrollera att du är i rotmappen för projektet.

  4. Kör följande git-kommando för att byta namn på mappen api-starter till api.

    git mv api-starter api

  5. Öppna kommandopaletten genom att trycka på F1.

  6. Ange och välj Git: Commit All.

  7. Ange kommentarsmeddelandet api och tryck på Retur.

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

Mapp och fil Metod Väg
api/products-post POST products
api/products-put STÄLLA products/:id
api/products-delete TA BORT products/:id

Skapa funktionen HTTP GET

Ditt API har vägar för att manipulera produkterna för inköpslistan, men det 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.

  1. Gå till Visual Studio Marketplaceoch installera Azure Functions-tillägget för Visual Studio Code.

  2. När tilläggsfliken läses in i Visual Studio Code väljer du Installera.

  3. När installationen är klar väljer du Ladda om.

Not

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.

  1. Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.

  2. Ange och välj Azure Functions: Skapa funktion.

  3. När du uppmanas att skapa en funktion väljer du HTTP-utlösare.

  4. Ange products-get som namnet på funktionen.

  5. Välj Anonym som autentiseringsnivå.

Obs.

Functions-appen finns i mappen api, som separerar den från de enskilda webbappsprojekten. Alla webbappar som använder klientdelsramverken gör anrop till samma API. Du kan bestämma hur du ska strukturera ditt program, men för det här exemplet hjälper det att se dem avgränsade.

Konfigurera HTTP-metoden och routningsslutpunkten

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

Routningsslutpunkten har samma namn som mappen som innehåller funktionen, enligt konvention. Eftersom funktionen skapas i mappen products-get genereras routningsslutpunkten som products-get, som standard. Du vill dock att slutpunkten ska vara produkter.

Konfigurera din funktion:

  1. Öppna filen api/products-get/function.json.

  2. Observera att metoderna tillåter både GET och POST.

  3. Ändra metodmatrisen så att den endast tillåter GET begäranden.

  4. Lägg till en "route": "products" post efter metodmatrisen.

Nu utlöses funktionen på en HTTP-GET begäran om att produkter. Din function.json bör se ut som följande kod:

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

Uppdatera funktionslogik

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 en funktion getProducts för att hämta produkterna för inköpslistan.

Ändra nu funktionsslutpunkten för att returnera produkterna:

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

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

Konfigurera delning av resurser mellan ursprung (CORS) lokalt

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 i Azure med hjälp av en omvänd proxy. Men när du kör lokalt måste du konfigurera CORS så att webbappen och API:et kan kommunicera.

Be Nu Azure Functions att tillåta att din webbapp gör HTTP-begäranden till API:et på datorn.

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

  2. 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"
  }
}

Not

Filen local.settings.json visas i .gitignore--fil, vilket förhindrar att den här filen skickas till GitHub. Det beror på att du kan lagra hemligheter i den här filen som du inte vill ha i GitHub. Det var därför du var tvungen att skapa filen när du skapade lagringsplatsen från mallen.

Kör API:et

Nu är det dags att se webbappen och Azure Functions-projektet fungera tillsammans. Börja med att köra Azure Functions-projektet lokalt genom att följa dessa steg:

Obs

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

  1. Öppna en git-terminal och gå till mappen api:

    cd api

  2. Kör Azure Functions-appen lokalt:

    npm install

    npm start

Kör webbappen

Ditt API körs. Nu måste du konfigurera klientdelsappen så att den skickar sin HTTP-begäran till ditt API. Klientdelsappen körs på en port och API:et körs på en annan port (7071). Varje klientdelsramverk kan konfigureras för proxy-HTTP-begäranden till en port på ett säkert sätt.

Konfigurera proxyporten

Konfigurera proxyn för klientdelsappen med följande steg:

  1. Öppna filen angular-app/proxy.conf.json.

  2. Leta upp inställningen target: 'http://localhost:7071'.

  3. Observera att målets port pekar på 7071.

  1. Öppna filen react-app/package.json.

  2. Leta upp inställningen "proxy": "http://localhost:7071/",.

  3. Observera att proxyporten pekar på 7071.

  1. Öppna filen svelte-app/rollup.config.js.

  2. Leta upp kodraden const api = 'http://localhost:7071/api';.

  3. Observera att API:ets port pekar på 7071.

  1. Öppna filen vue-app/vue.config.js.

  2. Leta upp inställningen target: 'http://localhost:7071',.

  3. Observera att målets port pekar på 7071.

Kör din front-end webbapplikation

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:

  1. Öppna en andra git-terminalinstans.

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

  3. Kör klientprogrammet på klientsidan:

    npm start

    npm start

    npm run dev

    npm run serve

Bläddra till din app

Det är dags att se ditt program köras lokalt mot Azure Functions-API:et.

  1. Bläddra till http://localhost:4200.
  1. Bläddra till http://localhost:3000.
  1. Bläddra till http://localhost:5000.
  1. Bläddra till http://localhost:8080.
  1. 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.