Ćwiczenie — Tworzenie projektu usługi Azure Functions

6 min

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

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

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

Pobieranie aplikacji Function

Teraz dodaj interfejs API i połącz go z aplikacją frontonu. Folder api-starter zawiera niekompletny projekt usługi Azure Functions. Ukończmy to teraz.

Tworzenie gałęzi interfejsu API

Przed wprowadzeniem zmian w aplikacji dobrą praktyką jest utworzenie nowej gałęzi dla zmian. Zamierzasz ukończyć interfejs API dla aplikacji, więc teraz jest odpowiedni moment na utworzenie gałęzi.

W programie Visual Studio Code otwórz paletę poleceń, naciskając klawisz F1.
Wprowadź i wybierz pozycję Git: Wyewidencjonuj do....
Wybierz pozycję Utwórz nową gałąź.
Wprowadź interfejs API dla nowej nazwy gałęzi, a następnie naciśnij klawisz Enter.

Właśnie została utworzona gałąź api usługi git.

Uzupełnianie interfejsu API usługi Azure Functions

Aby ukończyć interfejs API, zacznij od przeniesienia początkowego kodu interfejsu API do folderu o nazwie api. Ta nazwa folderu została wprowadzona dla api_location podczas tworzenia wystąpienia usługi Static Web Apps.

W programie Visual Studio Code otwórz paletę poleceń, naciskając klawisz F1.
Wprowadź i wybierz pozycję Terminal: Utwórz nowy terminal (w aktywnym obszarze roboczym).
Upewnij się, że jesteś w folderze głównym projektu.
Uruchom następujące polecenie git, aby zmienić nazwę folderu api-starter na api.
```
git mv api-starter api
```
Naciśnij klawisz F1, aby otworzyć paletę poleceń.
Wprowadź i wybierz pozycję Git: Zatwierdź wszystko.
Wprowadź interfejs API komunikatu zatwierdzenia i naciśnij klawisz Enter.

Teraz w Eksploratorze programu Visual Studio Code zostanie wyświetlony folder interfejsu API . Folder api zawiera projekt Azure Functions oraz trzy funkcje.

Folder i plik	Metoda	Marszruta
api/products-post	POST	`products`
api/products-put	ODŁÓŻ	`products/:id`
api/products-delete	DELETE	`products/:id`

Tworzenie funkcji HTTP GET

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

Instalowanie rozszerzenia usługi Azure Functions dla programu Visual Studio Code

Aplikacje usługi Azure Functions można tworzyć i zarządzać nimi przy użyciu rozszerzenia usługi Azure Functions dla programu Visual Studio Code.

Przejdź do witryny Visual Studio Marketplace i zainstaluj rozszerzenie usługi Azure Functions dla programu Visual Studio Code.
Po załadowaniu karty rozszerzenia w programie Visual Studio Code wybierz pozycję Zainstaluj.
Po zakończeniu instalacji wybierz pozycję Załaduj ponownie.

Uwaga

Pamiętaj, aby zainstalować narzędzia Azure Functions Core Tools, które umożliwiają uruchamianie usługi Azure Functions lokalnie.

Tworzenie funkcji

Teraz rozszerzysz aplikację funkcji platformy Azure za pomocą funkcji, aby uzyskać produkty.

W programie Visual Studio Code otwórz paletę poleceń, naciskając klawisz F1.
Wprowadź i wybierz pozycję Azure Functions: Create Function (Azure Functions: Utwórz funkcję).
Po wyświetleniu monitu o utworzenie funkcji wybierz pozycję Wyzwalacz HTTP.
Wprowadź ciąg products-get jako nazwę funkcji.
Wybierz pozycję Anonimowe jako poziom uwierzytelniania.

Uwaga

Aplikacja funkcji znajduje się w folderze api, który oddziela ją od poszczególnych projektów aplikacji internetowej. Wszystkie aplikacje internetowe używające struktur frontonu wywołują ten sam interfejs API. Możesz określić strukturę aplikacji, ale na potrzeby tego przykładu pomocne będzie zobaczenie ich oddzielnie.

Konfigurowanie metody HTTP i punktu końcowego trasy

Zwróć uwagę na to, że folder api/products-get zawiera plik function.json. Ten plik zawiera konfigurację funkcji.

Zgodnie z konwencją punkt końcowy trasy ma tę samą nazwę, co folder, który zawiera funkcję. Ponieważ funkcja jest tworzona w folderze products-get , punkt końcowy trasy jest domyślnie generowany jako products-get. Jednak chcesz, aby punkt końcowy miał nazwę products.

Skonfiguruj funkcję:

Otwórz plik api/products-get/function.json.
Zwróć uwagę, że metody zezwalają zarówno na metody , jak GET i POST.
Zmień tablicę metod tak, aby zezwalała tylko na GET żądania.
"route": "products" Dodaj wpis po tablicy metod.

Teraz funkcja jest wyzwalana przez żądanie HTTP GET do products. Plik function.json powinien wyglądać jak poniższy kod:

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

Aktualizowanie logiki funkcji

Plik index.js w folderze api/products-get zawiera logikę, która jest uruchamiana podczas realizacji żądania HTTP dla trasy.

Aby uzyskać produkty, należy zaktualizować logikę. W module JavaScript /shared/product-data.js istnieje logika dostępu do danych. Moduł product-data uwidacznia funkcję getProducts w celu pobrania produktów do listy zakupów.

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

Otwórz plik api/products-get/index.js.

Zastąp zawartość poniższym kodem:

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

Funkcja pobiera produkty i zwraca je z kodem stanu 200 po pomyślnym zakończeniu.

Nie musisz martwić się o mechanizm 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 skonfiguruj usługę Azure Functions, aby umożliwić aplikacji internetowej wykonywanie żądań HTTP do interfejsu API na Twoim komputerze.

Utwórz plik o nazwie api/local.settings.json.

Dodaj następującą zawartość do pliku:

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

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

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

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

Uwaga

Plik local.settings.json jest zapisany w pliku .gitignore, który uniemożliwia wypychanie 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. To dlatego należało utworzyć ten plik podczas tworzenia repozytorium z szablonu.

Uruchamianie interfejsu API

Teraz nadszedł czas na sprawdzenie, jak współdziałają aplikacja internetowa i projekt Azure Functions. Najpierw, aby uruchomić projekt Azure Functions lokalnie, wykonaj następujące kroki:

Uwaga

Pamiętaj, aby zainstalować narzędzia Azure Functions Core Tools, które umożliwiają uruchamianie usługi Azure Functions lokalnie.

Otwórz terminal usługi Git i przejdź do folderu api :
```
cd api
```
Uruchom aplikację usługi Azure Functions lokalnie:
```
npm install
```
```
npm start
```

Uruchom aplikację internetową

Interfejs API działa. Teraz trzeba skonfigurować aplikację frontonu, aby wysłać żądanie HTTP do interfejsu API. Aplikacja frontonu działa na jednym porcie, a interfejs API działa na innym porcie (7071). Każdą strukturę frontonu można skonfigurować do bezpiecznego przekazywania przez proxy żądań HTTP do portu.

Konfigurowanie portu serwera proxy

Aby skonfiguruj serwer proxy dla aplikacji frontonu, wykonaj następujące kroki:

Otwórz plik angular-app/proxy.conf.json.
target: 'http://localhost:7071' Znajdź ustawienie.
Zwróć uwagę, że port docelowy wskazuje wartość 7071.

Otwórz plik react-app/package.json.
"proxy": "http://localhost:7071/", Znajdź ustawienie.
Zwróć uwagę, że port serwera proxy wskazuje wartość 7071.

Otwórz plik svelte-app/rollup.config.js.
Znajdź wiersz kodu const api = 'http://localhost:7071/api';.
Zwróć uwagę, że port interfejsu API wskazuje wartość 7071.

Otwórz plik vue-app/vue.config.js.
target: 'http://localhost:7071', Znajdź ustawienie.
Zwróć uwagę, że port docelowy wskazuje wartość 7071.

Uruchamianie aplikacji internetowej frontonu

Interfejs API jest już uruchomiony na porcie 7071. Teraz po uruchomieniu aplikacji internetowej wysyła ona żądania HTTP do interfejsu API. Aby uruchomić aplikację internetową, wykonaj następujące kroki:

Otwórz drugie wystąpienie terminalu usługi Git.
Następnie wprowadź to polecenie, aby przejść do folderu preferowanej struktury frontonu:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Uruchom aplikację kliencka frontonu:

npm start

npm start

npm run dev

npm run serve

Przeglądanie aplikacji

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

Przejdź do http://localhost:4200.

Przejdź do http://localhost:3000.

Przejdź do http://localhost:5000.

Przejdź do http://localhost:8080.

Utworzono aplikację, a teraz działa ona lokalnie, wysyłając żądania HTTP GET do interfejsu API. Teraz zatrzymaj uruchomioną aplikację i interfejs API, naciskając klawisze Ctrl-C w terminalach.

Następne kroki

Aplikacja działa lokalnie, a następnym krokiem jest opublikowanie aplikacji za pomocą interfejsu API.

Ćwiczenie — Tworzenie projektu usługi Azure Functions

Pobieranie aplikacji Function

Tworzenie gałęzi interfejsu API

Uzupełnianie interfejsu API usługi Azure Functions

Tworzenie funkcji HTTP GET

Instalowanie rozszerzenia usługi Azure Functions dla programu Visual Studio Code

Tworzenie funkcji

Konfigurowanie metody HTTP i punktu końcowego trasy

Aktualizowanie logiki funkcji

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

Uruchamianie interfejsu API

Uruchom aplikację internetową

Konfigurowanie portu serwera proxy

Uruchamianie aplikacji internetowej frontonu

Przeglądanie aplikacji

Następne kroki

Opinia