Ćwiczenie — tworzenie projektu usługi Azure Functions

6 min

Aplikacja internetowa listy 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 przekierowywania żądań HTTP do interfejsu API.
Uruchom interfejs API i aplikację internetową.

Pobierz aplikację Function

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

Tworzenie gałęzi interfejsu API

Przed wprowadzeniem zmian w aplikacji warto utworzyć nową gałąź dla zmian. Zaraz ukończysz interfejs API dla swojej aplikacji, więc teraz jest odpowiedni moment na utworzenie gałęzi.

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

Właśnie utworzyłeś gałąź git api.

Ukończ API 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 F1.
Wprowadź i wybierz 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
```
Otwórz paletę poleceń, naciskając F1.
Wybierz Git: Zatwierdź wszystkie.
Wprowadź wiadomość zatwierdzenia interfejsu API i naciśnij Enter.

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

Folder i plik	Metoda	Trasa
api/products-post	POST	`products`
api/products-put	POŁÓŻ	`products/:id`
api/products-delete	USUNĄĆ	`products/:id`

Tworzenie funkcji HTTP GET

Interfejs API ma trasy do manipulowania produktami na liście zakupów, ale nie ma trasy 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 Marketplacei zainstaluj rozszerzenie 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.

Notatka

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

Tworzenie funkcji

Teraz rozszerzysz swoją aplikację Azure Function o funkcję do pobierania produktów.

W programie Visual Studio Code otwórz paletę poleceń, naciskając F1.
Wprowadź i wybierz Azure Functions: Utwórz funkcję.
Po wyświetleniu polecenia utworzenia funkcji wybierz opcję wyzwalacz HTTP.
Wprowadź products-get jako nazwę funkcji.
Wybierz pozycję Anonimowe jako poziom uwierzytelniania.

Notatka

Aplikacja Functions znajduje się w folderze interfejsu API, który oddziela ją od poszczególnych projektów aplikacji internetowych. Wszystkie aplikacje internetowe korzystające z frameworków front-endowych wykonują wywołania do tego samego API. Możesz zdecydować, jak utworzyć strukturę aplikacji, ale w tym przykładzie ułatwia to ich oddzielenie.

Konfigurowanie metody HTTP i punktu końcowego trasy

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

Punkt końcowy trasy ma taką samą nazwę jak folder zawierający funkcję zgodnie z konwencją. Ponieważ funkcja jest tworzona w folderze products-get, punkt końcowy trasy jest generowany jako products-getdomyślnie. Chcesz jednak, aby punkt końcowy był produktami.

Skonfiguruj funkcję:

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

Teraz funkcja jest wyzwalana na żądanie GET HTTP dla produktów . Twój function.json powinien wyglądać podobnie do następującego kodu:

{
  "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 uruchamia się, gdy złożysz żądanie HTTP do trasy.

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

Teraz zmień punkt końcowy funkcji, aby zwrócić produkty:

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

Zastąp jego zawartość następującym 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 Twoją aplikację, aby mogła komunikować się z interfejsem API w Azure przy użyciu odwrotnego 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 Twoja aplikacja internetowa mogła wykonywać żądania 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"
  }
}

Notatka

Plik local.settings.json jest wymieniony w pliku .gitignore, co uniemożliwia przesłanie 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 trzeba było utworzyć plik podczas tworzenia repozytorium na podstawie szablonu.

Uruchamianie interfejsu API

Teraz nadszedł czas, aby obserwować, jak twoja aplikacja internetowa i projekt Azure Functions współpracują. Rozpocznij od uruchomienia projektu usługi Azure Functions lokalnie, wykonując następujące kroki:

Notatka

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

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

Uruchamianie aplikacji internetowej

Twój interfejs API jest uruchomiony. Teraz musisz skonfigurować aplikację front-endową, aby wysyłać żądania HTTP do interfejsu API. Aplikacja front-end działa na jednym porcie, a API działa na innym porcie (7071). Każdy framework front-end można skonfigurować do bezpiecznego proxy żądań HTTP do portu.

Konfigurowanie portu serwera proxy

Skonfiguruj serwer proxy dla swojej aplikacji frontendowej, wykonując następujące czynności:

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

Otwórz plik react-app/package.json.
Znajdź ustawienie "proxy": "http://localhost:7071/",.
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.
Znajdź ustawienie target: 'http://localhost:7071',.
Zwróć uwagę, że port docelowy wskazuje wartość 7071.

Uruchom swoją aplikację front-endową webową

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

Otwórz drugą instancję terminalu 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ę kliencką interfejsu użytkownika:
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```

Przejdź do swojej aplikacji

Nadszedł czas, aby zobaczyć aplikację działającą lokalnie z interfejsem API 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 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

Pobierz aplikację Function

Tworzenie gałęzi interfejsu API

Ukończ API 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

Uruchamianie aplikacji internetowej

Konfigurowanie portu serwera proxy

Uruchom swoją aplikację front-endową webową

Przejdź do swojej aplikacji

Następne kroki

Opinia