Gyakorlat – Azure Functions-projekt létrehozása

  • 6 perc

A bevásárlólista-webalkalmazáshoz szükség van egy API-ra. Ebben a gyakorlatban egy Azure Functions-projekt használatával hozhatja létre és futtathatja az API-t. Innen egy új függvénnyel bővítheti az API-t a Visual Studio Azure Functions-bővítményével.

Ebben a gyakorlatban a következő lépéseket kell elvégeznie:

  1. Hozzon létre egy ágat a webalkalmazás módosításának előkészítésekor.
  2. Ismerkedjen meg az Azure Functions-projektel.
  3. Hozza létre a HTTP GET függvényt.
  4. A termékek lekéréséhez cserélje le a függvényindító kódot a logikára.
  5. Konfigurálja a webalkalmazást ÚGY, hogy HTTP-kéréseket proxyzjon az API-nak.
  6. Futtassa az API-t és a webalkalmazást.

Megjegyzés:

Győződjön meg arról, hogy konfigurálta a Visual Studio for Azure-fejlesztést a .NET-tel.

A függvényalkalmazás lekérése

Most hozzáadhat egy API-t, és csatlakoztathatja azt az előtérbeli alkalmazáshoz. Az Api-projekt tartalmaz egy hiányos Azure Functions-projektet, ezért most fejezzük be.

API-ág létrehozása

Mielőtt módosítanál egy alkalmazást, érdemes új ágat létrehozni a módosításokhoz. Az alkalmazás API-jának befejezésére készül, ehhez hozzon létre egy api nevű Git-ágat.

Az Azure Functions API befejezése

Az Api projekt tartalmazza az Azure Functions-projektet, valamint három függvényt.

Osztály Method Útvonal
ProductsPost POST products
ProductsPut PUT products/:id
ProductsDelete Törlés... products/:id

Az API tartalmaz útvonalakat a termékek a bevásárlólistához való kezeléséhez, de nem tartalmaz a termékek beolvasásához szükséges útvonalat. Vegyük fel a következőt.

A GET HTTP-függvény létrehozása

  1. A Visual Studióban kattintson a jobb gombbal az Api-projektre, majd válassza az Új elem hozzáadása lehetőséget>.

    A screenshot showing how to create the Azure function item.

  2. Az Új elem hozzáadása párbeszédpanelen válassza az Azure-függvényt.

    A screenshot showing the Azure function item selected.

  3. Adja meg a ProductsGet.cs nevet a függvényfájl neveként.

  4. Válassza a Http-eseményindítót függvénytípusként.

  5. Válassza a Névtelen lehetőséget az Engedélyezési szint mező legördülő listájából.

    A screenshot showing the HTTP trigger selected.

  6. Select Add.

Most bővítette ki az Azure Functions-alkalmazást egy funkcióval a termékek beszerzéséhez!

A HTTP-metódus és az útvonalvégpont konfigurálása

Figyelje meg, hogy az Run újonnan létrehozott C# osztály metódusa rendelkezik egy HttpTrigger attribútummal az első argumentumon, a HttpRequest. Ez az attribútum határozza meg a függvény hozzáférési szintjét, a figyelendő HTTP-metódusokat és az útvonalvégpontot.

Az útvonalvégpont null alapértelmezés szerint azt jelenti, hogy a végpont az FunctionName attribútum értékét használja, vagyis a ProductsGet. A tulajdonság beállítása az Route"products" alapértelmezett viselkedés felülbírálására.

A függvény jelenleg a termékekre irányuló HTTP-kéréssel GET aktiválódik. A Run metódus a következő kódhoz hasonlóan néz ki:

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

Az útvonallogika frissítése

A metódus törzse Run a függvény végrehajtásakor lesz végrehajtva.

A termékek beszerzéséhez frissítenie kell a Run metódus logikáját. A fájlban ProductData.cs az adatelérési logika egy úgynevezett ProductDataosztály, amely a Függőséginjektáláson keresztül érhető el interfészként IProductData . Az interfészen van egy metódus, GetProductsamely Task<IEnumerable<Product> egy aszinkron módon visszaad egy terméklistát.

Most módosítsa a függvény végpontját úgy, hogy az a termékeket adja vissza:

  1. Nyissa meg a ProductsGet.cs fájlt.

  2. Cserélje le a tartalmát a következő kódra:

    using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace Api;

public class ProductsGet
{
    private readonly IProductData productData;

    public ProductsGet(IProductData productData)
    {
        this.productData = productData;
    }

    [FunctionName("ProductsGet")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
    {
        var products = await productData.GetProducts();
        return new OkObjectResult(products);
    }
}

Az előző módosítások során az osztályt statikusról példányosztályra változtatta. Hozzáadott egy felületet a konstruktorhoz, hogy a Függőséginjektálási keretrendszer injektálhassa az osztályt ProductData . Végül úgy konfigurálta a Run függvényt, hogy híváskor visszaadja a terméklistát.

Forrásközi erőforrásmegosztás (CORS) konfigurálása helyileg

Az Azure Static Web Appsben való közzétételkor nem kell aggódnia a forrásközi erőforrás-megosztás (CORS) miatt. Az Azure Static Web Apps automatikusan konfigurálja az alkalmazást úgy, hogy az egy fordított proxyval tudjon kommunikálni az Azure-beli API-val. Ha azonban helyileg futtatja, konfigurálnia kell a CORS-t ahhoz, hogy lehetővé tegye a webalkalmazás és az API közötti kommunikációt.

Most kérje meg az Azure Functionst, hogy engedélyezze a webalkalmazásnak, hogy HTTP-kéréseket küldjön a számítógépen található API-nak.

  1. Nyissa meg a launch Gépház.json nevű fájlt az Api-projekt Tulajdonságok mappájában.

    • Ha a fájl nem létezik, hozza létre.

  2. Frissítse a fájl tartalmát:

    {
    "profiles": {
        "Api": {
            "commandName": "Project",
            "commandLineArgs": "start --cors *"
        }
    }
}

Megjegyzés:

Ezzel a fájllal szabályozható, hogy a Visual Studio hogyan indítja az Azure Functions-eszközöket. Ha az Azure Functions parancssori eszközét szeretné használni, az Azure Functions Core Tools dokumentációjában ismertetett local.settings.json fájlra is szüksége lesz. A local.settings.json fájl szerepel a .gitignore fájlban, ami megakadályozza, hogy a fájl le legyen küldve a GitHubra. Ennek az az oka, hogy ebben a fájlban olyan titkos kulcsokat tárolhat, amelyeket nem szeretne a GitHubon tárolni. Ezért is kellett létrehoznia a fájlt, amikor létrehozta az adattárat a sablonból.

Az API és a webalkalmazás futtatása

Most ideje megnézni, hogy a webalkalmazás és az Azure Functions-projekt együttműködik-e.

  1. A Visual Studióban kattintson a jobb gombbal a ShoppingList-megoldásra .

  2. Válassza az Indítási projektek beállítása lehetőséget.

  3. Válassza a Több indítási projekt lehetőséget.

  4. Állítsa be az API-t és az ügyfelet úgy, hogy műveletként indítsa el a startot, majd válassza az OK gombot.

  5. Indítsa el a hibakeresőt.

Az alkalmazás megnyitása a böngészőben

Eljött az ideje, hogy megtekintse a helyileg futó alkalmazást a Azure Functions API-val.

Keresse meg a webalkalmazást (például https://localhost:44348/).

Elkészítette az alkalmazást, és most helyileg fut, és HTTP GET-kéréseket küld az API-nak.

Most állítsa le a futó alkalmazást és API-t úgy, hogy leválasztja a hibakeresőt a Visual Studióban.

Következő lépések

Az alkalmazás helyileg működik, a következő lépés pedig az alkalmazás közös közzététele az API-val.