Cvičení – vytvoření projektu Azure Functions

Dokončeno

Vaše webová aplikace pro nákupní seznam potřebuje rozhraní API. V tomto cvičení sestavíte a spustíte rozhraní API pomocí projektu Azure Functions. Odtud rozšíříte rozhraní API o novou funkci pomocí rozšíření Azure Functions pro Visual Studio.

V tomto cvičení provedete následující kroky:

  1. Při přípravě na provedení změn webové aplikace vytvořte větev.
  2. Prozkoumejte projekt Azure Functions.
  3. Vytvořte funkci HTTP GET.
  4. Nahraďte počáteční kód funkce logikou pro získání produktů.
  5. Nakonfigurujte webovou aplikaci tak, aby proxy požadavky HTTP na rozhraní API.
  6. Spusťte rozhraní API a webovou aplikaci.

Poznámka:

Ujistěte se, že jste nakonfigurovali Visual Studio pro vývoj pro Azure pomocí .NET.

Získání aplikace funkcí

Teď přidáte rozhraní API a připojíte ho k front-endové aplikaci. Projekt rozhraní API obsahuje neúplný projekt Azure Functions, takže to teď dokončíme.

Vytvoření větve rozhraní API

Před provedením změn v aplikaci je vhodné pro změny vytvořit novou větev. Za chvíli dokončíte rozhraní API aplikace, a proto v Gitu vytvořte novou větev a pojmenujte ji api.

Dokončete rozhraní API pro Azure Functions

Projekt Api obsahuje projekt Azure Functions, včetně tří funkcí.

Třída metoda Postup
ProductsPost POST products
ProductsPut PUT products/:id
ProductsDelete DELETE products/:id

Vaše rozhraní API zahrnuje trasy pro manipulaci s produkty v nákupním seznamu, ale chybí v něm trasa pro jejich načtení. Pojďme to přidat dál.

Vytvořte funkci HTTP GET

  1. V sadě Visual Studio klikněte pravým tlačítkem myši na projekt rozhraní API a pak vyberte Přidat>novou položku.

    Snímek obrazovky znázorňující, jak vytvořit položku funkce Azure

  2. V dialogovém okně Přidat novou položku vyberte funkci Azure Functions.

    Snímek obrazovky znázorňující vybranou položku funkce Azure

  3. Jako název souboru funkce zadejte ProductsGet.cs .

  4. Jako typ funkce vyberte trigger HTTP.

  5. V rozevíracím seznamu v poli Úroveň autorizace vyberte Anonymní.

    Snímek obrazovky znázorňující vybranou aktivační událost HTTP

  6. Vyberte Přidat.

Aplikaci Azure Functions jste právě rozšířili o funkci, abyste získali své produkty!

Nakonfigurujte metodu HTTP a koncový bod trasy

Všimněte si, že Run metoda nově vytvořené třídy jazyka C# má HttpTrigger atribut prvního argumentu, tj HttpRequest. Tento atribut definuje úroveň přístupu funkce, metody HTTP pro naslouchání a koncový bod trasy.

Koncový bod trasy je null ve výchozím nastavení, což znamená, že koncový bod používá hodnotu atributu FunctionName , což je ProductsGet. Route Nastavením vlastnosti přepíšete "products" výchozí chování.

V současné době se vaše funkce aktivuje v požadavku HTTP GET na produkty. Vaše Run metoda vypadá jako následující kód:

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

Aktualizujte logiku směrování

Tělo Run metody se spustí při spuštění funkce.

Pokud chcete získat produkty, musíte v metodě aktualizovat logiku Run . V souboru je logika přístupu k datům ProductData.cs jako třída s názvem ProductData, která je k dispozici prostřednictvím injektáže závislostí jako IProductData rozhraní. Rozhraní má metodu, která se nazývá GetProducts, která vrací Task<IEnumerable<Product> asynchronně vrací seznam produktů.

Teď změňte koncový bod funkce tak, aby vracel produkty:

  1. Otevřete ProductsGet.cs.

  2. Jeho obsah nahraďte následujícím kódem.

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

V předchozíchzměnách Do konstruktoru jste přidali rozhraní, aby architektura injektáže závislostí mohl vložit ProductData třídu. Nakonec jste nakonfigurovali Run funkci tak, aby při zavolání vrátila seznam produktů.

Místní konfigurace sdílení prostředků mezi zdroji (CORS)

Při publikování do Azure Static Web Apps si nemusíte dělat starosti se sdílením prostředků mezi zdroji (CORS). Služba Azure Static Web Apps automaticky nakonfiguruje vaši aplikaci tak, aby dokázala komunikovat s vaším rozhraním API v Azure pomocí reverzního proxy. Při místním spuštění ale musíte CORS nakonfigurovat, abyste umožnili komunikaci webové aplikace a rozhraní API.

Teď vyžádejte azure Functions, aby vaší webové aplikaci umožňovala provádět požadavky HTTP na rozhraní API ve vašem počítači.

  1. Otevřete soubor s názvem launchSettings.json ve složce Vlastnosti projektu rozhraní API.

    • Pokud soubor neexistuje, vytvořte ho.
  2. Aktualizujte obsah souboru:

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

Poznámka:

Tímto souborem ovládáte, jak Visual Studio spustí nástroje Azure Functions. Pokud chcete použít nástroj příkazového řádku Azure Functions, budete také potřebovat soubor local.settings.json popsaný v dokumentaci k nástrojům Azure Functions Core Tools. Soubor local.settings.json je uvedený v souboru .gitignore , který brání vložení tohoto souboru do GitHubu. Důvodem je to, že byste v tomto souboru mohli ukládat tajné kódy, které nechcete mít na GitHubu. Proto jste museli vytvořit soubor při vytváření úložiště ze šablony.

Spuštění rozhraní API a webové aplikace

Teď je čas sledovat spolupráci webové aplikace a projektu Azure Functions.

  1. V sadě Visual Studio klikněte pravým tlačítkem na řešení Nákupní seznam .

  2. Vyberte Nastavit spouštěné projekty.

  3. Vyberte možnost Více projektů po spuštění.

  4. Nastavte rozhraní API a klienta tak, aby se jako jejich akce spustily, a pak vyberte OK.

  5. Spusťte ladicí program.

Přejděte do aplikace

Je čas podívat se, jak vaše aplikace běží místně s rozhraním API Azure Functions.

Přejděte na webovou aplikaci (například https://localhost:44348/).

Vytvořili jste aplikaci a teď je spuštěná místně a požadavky HTTP GET na vaše rozhraní API.

Teď zastavte spuštěnou aplikaci a rozhraní API odpojením ladicího programu v sadě Visual Studio.

Další kroky

Vaše aplikace funguje místně a vaším dalším krokem je publikovat aplikaci společně s rozhraním API.