Ćwiczenie — Tworzenie projektu usługi Azure Functions

Ukończone

Aplikacja internetowa z listą zakupów wymaga interfejsu API. W tym ćwiczeniu utworzysz i uruchomisz interfejs API przy użyciu projektu usługi Azure Functions. Z tego miejsca rozszerzysz interfejs API przy użyciu nowej funkcji przy użyciu rozszerzenia usługi Azure Functions dla programu Visual Studio.

W tym ćwiczeniu wykonasz następujące kroki:

  1. Utwórz gałąź podczas przygotowywania do wprowadzania zmian w aplikacji internetowej.
  2. Zapoznaj się z projektem usługi Azure Functions.
  3. Utwórz funkcję HTTP GET.
  4. Zastąp kod początkowy funkcji logiką, aby pobrać produkty.
  5. Skonfiguruj aplikację internetową do proxy żądań HTTP do interfejsu API.
  6. Uruchom interfejs API i aplikację internetową.

Uwaga

Upewnij się, że skonfigurowano program Visual Studio na potrzeby programowania na platformie Azure przy użyciu platformy .NET.

Pobieranie aplikacji funkcji

Teraz dodasz interfejs API i połączysz go z aplikacją frontonu. Projekt interfejsu API zawiera niekompletny projekt usługi Azure Functions, więc ukończmy to teraz.

Tworzenie gałęzi interfejsu API

Przed wprowadzeniem zmian w aplikacji dobrym rozwiązaniem jest utworzenie nowej gałęzi dla zmian. Zamierzasz ukończyć interfejs API dla aplikacji, więc utwórz nową gałąź w usłudze Git o nazwie api.

Uzupełnianie interfejsu API usługi Azure Functions

Projekt Api zawiera projekt usługi Azure Functions oraz trzy funkcje.

Klasa Method Marszruta
ProductsPost POST products
ProductsPut ODŁÓŻ products/:id
ProductsDelete DELETE products/:id

Interfejs API ma trasy do manipulowania produktami na liście zakupów, ale nie ma trasy do pobierania produktów. Dodajmy to dalej.

Tworzenie funkcji HTTP GET

  1. W programie Visual Studio kliknij prawym przyciskiem myszy projekt Api, a następnie wybierz polecenie Dodaj>nowy element.

    Zrzut ekranu przedstawiający sposób tworzenia elementu funkcji platformy Azure.

  2. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Funkcja platformy Azure.

    Zrzut ekranu przedstawiający wybrany element funkcji platformy Azure.

  3. Wprowadź ProductsGet.cs jako nazwę pliku funkcji.

  4. Wybierz pozycję Wyzwalacz HTTP jako typ funkcji.

  5. Wybierz pozycję Anonimowe z listy rozwijanej w polu Poziom autoryzacji.

    Zrzut ekranu przedstawiający wybrany wyzwalacz HTTP.

  6. Wybierz Dodaj.

Właśnie rozszerzono aplikację usługi Azure Functions za pomocą funkcji , aby uzyskać produkty!

Konfigurowanie metody HTTP i punktu końcowego trasy

Zwróć uwagę, że Run metoda nowo utworzonej klasy języka C# ma HttpTrigger atrybut w pierwszym argumencie HttpRequest. Ten atrybut definiuje poziom dostępu funkcji, metody HTTP do nasłuchiwania i punkt końcowy trasy.

Punkt końcowy trasy jest null domyślnie, co oznacza, że punkt końcowy używa wartości atrybutu FunctionName , czyli ProductsGet. Route Ustawienie właściwości w celu "products" zastąpienia domyślnego zachowania.

Obecnie funkcja jest wyzwalana na żądanie HTTP GET do produktów. Metoda Run wygląda podobnie do następującego kodu:

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

Aktualizowanie logiki trasy

Treść Run metody jest wykonywana po wykonaniu funkcji.

Aby uzyskać produkty, należy zaktualizować logikę w metodzie Run . W pliku znajduje się logika ProductData.cs dostępu do danych o nazwie ProductData, która jest dostępna za pośrednictwem wstrzykiwania zależności jako interfejsu IProductData . Interfejs zawiera metodę o nazwie GetProducts, która zwraca Task<IEnumerable<Product> asynchronicznie zwraca listę produktów.

Teraz zmień punkt końcowy funkcji, aby zwracał produkty:

  1. Otwórz ProductsGet.cs.

  2. Zastąp zawartość poniższym kodem:

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

W poprzednich zmianach klasa zmieniła się ze statycznej na klasę wystąpienia. Dodano interfejs do konstruktora, aby platforma wstrzykiwania zależności mogła wstrzyknąć klasę ProductData . Na koniec skonfigurowano Run funkcję tak, aby zwracała listę produktów po wywołaniu.

Lokalne konfigurowanie współużytkowania zasobów między źródłami (CORS)

Nie musisz martwić się o współużytkowanie zasobów między źródłami (CORS) podczas publikowania w usłudze Azure Static Web Apps. Usługa Azure Static Web Apps automatycznie konfiguruje aplikację, tak aby mogła komunikować się z interfejsem API na platformie Azure przy użyciu zwrotnego serwera proxy. Jednak w przypadku uruchamiania lokalnego należy skonfigurować mechanizm CORS, aby umożliwić komunikację aplikacji internetowej i interfejsu API.

Teraz monituj usługę Azure Functions o zezwolenie aplikacji internetowej na wykonywanie żądań HTTP do interfejsu API na komputerze.

  1. Otwórz plik o nazwie launchSettings.json w folderze Właściwości projektu api.

    • Jeśli plik nie istnieje, utwórz go.
  2. Zaktualizuj zawartość pliku:

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

Uwaga

Ten plik służy do kontrolowania sposobu uruchamiania narzędzi usługi Azure Functions przez program Visual Studio. Jeśli chcesz użyć narzędzia wiersza polecenia usługi Azure Functions, potrzebny będzie również plik local.settings.json opisany w dokumentacji narzędzi Azure Functions Core Tools. Plik local.settings.json znajduje się na liście w pliku gitignore , co uniemożliwia wypchnięcie tego pliku do usługi GitHub. Jest to spowodowane tym, że w tym pliku można przechowywać wpisy tajne, których nie potrzebujesz w usłudze GitHub. Dlatego też trzeba było utworzyć plik podczas tworzenia repozytorium na podstawie szablonu.

Uruchamianie interfejsu API i aplikacji internetowej

Teraz nadszedł czas, aby obejrzeć pracę aplikacji internetowej i projektu usługi Azure Functions.

  1. W programie Visual Studio kliknij prawym przyciskiem myszy rozwiązanie ShoppingList .

  2. Wybierz pozycję Ustaw projekty startowe.

  3. Wybierz opcję Wiele projektów startowych.

  4. Ustaw pozycję Interfejs API i klient , aby ustawić opcję Uruchom jako akcję, a następnie wybierz przycisk OK.

  5. Uruchom debuger.

Przeglądanie aplikacji

Nadszedł czas, aby zobaczyć, że aplikacja działa lokalnie, korzystając z interfejsu API usługi Azure Functions.

Przejdź do aplikacji internetowej (na przykład https://localhost:44348/).

Utworzono aplikację, a teraz działa ona lokalnie, wysyłając żądania HTTP GET do interfejsu API.

Teraz zatrzymaj uruchomioną aplikację i interfejs API, rozłączając debuger w programie Visual Studio.

Następne kroki

Aplikacja działa lokalnie, a następnym krokiem jest opublikowanie aplikacji razem z interfejsem API.