Szybki start: tworzenie funkcji na platformie Azure przy użyciu języka TypeScript przy użyciu programu Visual Studio Code

W tym artykule użyjesz programu Visual Studio Code do utworzenia funkcji TypeScript, która odpowiada na żądania HTTP. Po przetestowaniu kodu lokalnie należy wdrożyć go w środowisku bezserwerowym usługi Azure Functions.

Ważne

Zawartość tego artykułu zmienia się w zależności od wybranego modelu programowania Node.js w selektorze w górnej części strony. Model w wersji 4 jest ogólnie dostępny i ma bardziej elastyczne i intuicyjne środowisko dla deweloperów języka JavaScript i Języka TypeScript. Dowiedz się więcej o różnicach między wersjami 3 i v4 w przewodniku migracji.

Ukończenie tego przewodnika Szybki start wiąże się z niewielkim kosztem kilku centów w USD lub mniej na koncie platformy Azure.

W tym artykule znajduje się również wersja interfejsu wiersza polecenia.

Konfigurowanie środowiska

Przed rozpoczęciem upewnij się, że zostały spełnione następujące wymagania:

  • Node.js 18.x lub nowszy. Użyj polecenia , node --version aby sprawdzić wersję.

  • TypeScript 4.x. Użyj polecenia , tsc -v aby sprawdzić wersję.

Tworzenie projektu lokalnego

W tej sekcji użyjesz programu Visual Studio Code do utworzenia lokalnego projektu usługi Azure Functions w języku TypeScript. W dalszej części tego artykułu opublikujesz kod funkcji na platformie Azure.

  1. Wybierz ikonę platformy Azure na pasku działania. Następnie w obszarze Roboczy (lokalny) wybierz + przycisk, wybierz pozycję Utwórz funkcję na liście rozwijanej. Po wyświetleniu monitu wybierz pozycję Utwórz nowy projekt.

    Screenshot of create a new project window.

  2. Wybierz lokalizację katalogu dla obszaru roboczego projektu i wybierz pozycję Wybierz. Należy utworzyć nowy folder lub wybrać pusty folder dla obszaru roboczego projektu. Nie wybieraj folderu projektu, który jest już częścią obszaru roboczego.

  1. Podaj następujące informacje po wyświetleniu monitów:

    Monit Wybór
    Wybieranie języka projektu funkcji Wybierz plik TypeScript.
    Wybieranie modelu programowania TypeScript Wybierz plik Model V3.
    Wybieranie szablonu dla pierwszej funkcji projektu Wybierz plik HTTP trigger.
    Podaj nazwę funkcji Wpisz HttpExample.
    Poziom autoryzacji Wybierz Anonymouspozycję , która umożliwia każdemu wywoływanie punktu końcowego funkcji. Aby dowiedzieć się więcej na temat poziomu autoryzacji, zobacz Klucze autoryzacji.
    Wybierz sposób otwierania projektu Wybierz plik Open in current window.

    Korzystając z tych informacji, program Visual Studio Code generuje projekt usługi Azure Functions z wyzwalaczem HTTP. Pliki lokalnego projektu można wyświetlić w Eksploratorze. Aby dowiedzieć się więcej o tworzonych plikach, zobacz Wygenerowane pliki projektu.

  1. Podaj następujące informacje po wyświetleniu monitów:

    Monit Wybór
    Wybieranie języka projektu funkcji Wybierz plik TypeScript.
    Wybieranie modelu programowania TypeScript Wybierz plik Model V4.
    Wybieranie szablonu dla pierwszej funkcji projektu Wybierz plik HTTP trigger.
    Podaj nazwę funkcji Wpisz HttpExample.
    Wybierz sposób otwierania projektu Wybierz plik Open in current window.

    Korzystając z tych informacji, program Visual Studio Code generuje projekt usługi Azure Functions z wyzwalaczem HTTP. Pliki lokalnego projektu można wyświetlić w Eksploratorze. Aby dowiedzieć się więcej o tworzonych plikach, zobacz Przewodnik dla deweloperów języka TypeScript usługi Azure Functions.

Lokalne uruchamianie funkcji

Program Visual Studio Code integruje się z narzędziami Azure Functions Core, aby umożliwić uruchamianie tego projektu na lokalnym komputerze deweloperów przed opublikowaniem na platformie Azure.

  1. Aby uruchomić funkcję lokalnie, naciśnij klawisz F5 lub ikonę Uruchom i debuguj na pasku działań po lewej stronie. Na panelu Terminal zostanie wyświetlony ekran Dane wyjściowe z narzędzi Core Tools. Aplikacja zostanie uruchomiona na panelu Terminal . Punkt końcowy adresu URL funkcji wyzwalanej przez protokół HTTP jest widoczny lokalnie.

    Screenshot of the Local function VS Code output.

    Jeśli masz problemy z działaniem w systemie Windows, upewnij się, że domyślny terminal programu Visual Studio Code nie jest ustawiony na powłokę WSL Bash.

  2. Gdy narzędzia Core Tools nadal działają w terminalu, wybierz ikonę platformy Azure na pasku działań. W obszarze Obszar roboczy rozwiń węzeł Funkcje lokalnego projektu>. Kliknij prawym przyciskiem myszy (Windows) lub Ctrl — kliknij nową funkcję (macOS), a następnie wybierz polecenie Wykonaj funkcję teraz....

    Execute function now from Visual Studio Code

  3. W polu Wprowadź treść żądania zostanie wyświetlona wartość treści komunikatu { "name": "Azure" }żądania . Naciśnij klawisz Enter, aby wysłać ten komunikat żądania do funkcji.

  4. Gdy funkcja jest wykonywana lokalnie i zwraca odpowiedź, w programie Visual Studio Code jest zgłaszane powiadomienie. Informacje o wykonywaniu funkcji są wyświetlane na panelu terminalu .

  5. Po fokusie panelu terminalu naciśnij klawisze Ctrl + C, aby zatrzymać narzędzia Core Tools i odłączyć debuger.

Po sprawdzeniu, czy funkcja działa poprawnie na komputerze lokalnym, nadszedł czas, aby opublikować projekt bezpośrednio na platformie Azure przy użyciu programu Visual Studio Code.

Logowanie się do platformy Azure

Zanim będzie można opublikować aplikację, należy zalogować się do platformy Azure.

  1. Jeśli jeszcze nie zalogowałeś się, wybierz ikonę platformy Azure na pasku działania. Następnie w obszarze Zasoby wybierz pozycję Zaloguj się do platformy Azure....

    Screenshot of the sign-in to Azure window within VS Code.

    Jeśli już się zalogowałeś i widzisz istniejące subskrypcje, przejdź do następnej sekcji. Jeśli nie masz jeszcze konta platformy Azure, wybierz pozycję Utwórz konto platformy Azure.... Uczniowie mogą wybrać pozycję Utwórz konto platformy Azure for Students....

  2. Po wyświetleniu monitu w przeglądarce wybierz swoje konto platformy Azure i zaloguj się przy użyciu poświadczeń konta platformy Azure. Jeśli tworzysz nowe konto, możesz zalogować się po utworzeniu konta.

  3. Po pomyślnym zalogowaniu możesz zamknąć nowe okno przeglądarki. Subskrypcje należące do konta platformy Azure są wyświetlane na pasku bocznym.

Tworzenie aplikacji funkcji na platformie Azure

W tej sekcji utworzysz aplikację funkcji i powiązane zasoby w ramach subskrypcji platformy Azure.

  1. Wybierz ikonę platformy Azure na pasku działania. Następnie w obszarze Zasoby wybierz ikonę + i wybierz opcję Utwórz aplikację funkcji na platformie Azure .

    Create a resource in your Azure subscription

  2. Podaj następujące informacje po wyświetleniu monitów:

    Monit Wybór
    Wybierz subskrypcję Wybierz subskrypcję, która ma zostać użyta. Ten monit nie będzie wyświetlany, gdy w obszarze Zasoby jest widoczna tylko jedna subskrypcja.
    Wprowadź globalnie unikatową nazwę aplikacji funkcji Wpisz nazwę prawidłową w ścieżce adresu URL. Typ nazwy jest weryfikowany, aby upewnić się, że jest on unikatowy w usłudze Azure Functions.
    Wybieranie stosu środowiska uruchomieniowego Wybierz wersję języka, dla której uruchomiono lokalnie.
    Wybieranie lokalizacji dla nowych zasobów Aby uzyskać lepszą wydajność, wybierz region blisko Ciebie.

    Rozszerzenie pokazuje stan poszczególnych zasobów podczas ich tworzenia na platformie Azure w panelu Azure: Dziennik aktywności.

    Log of Azure resource creation

  3. Po zakończeniu tworzenia następujące zasoby platformy Azure są tworzone w ramach subskrypcji. Zasoby są nazwane na podstawie nazwy aplikacji funkcji:

    • Grupa zasobów, która jest kontenerem logicznym dla powiązanych zasobów.
    • Standardowe konto usługi Azure Storage, które zachowuje stan i inne informacje o projektach.
    • Aplikacja funkcji, która udostępnia środowisko do wykonywania kodu funkcji. Aplikacja funkcji umożliwia grupowanie funkcji jako jednostki logicznej w celu łatwiejszego zarządzania, wdrażania i udostępniania zasobów w ramach tego samego planu hostingu.
    • Plan usługi App Service, który definiuje podstawowy host aplikacji funkcji.
    • Wystąpienie aplikacji Szczegółowe informacje połączone z aplikacją funkcji, które śledzi użycie funkcji w aplikacji.

    Po utworzeniu aplikacji funkcji i zastosowaniu pakietu wdrożeniowego zostanie wyświetlone powiadomienie.

    Napiwek

    Domyślnie zasoby platformy Azure wymagane przez aplikację funkcji są tworzone na podstawie podanej nazwy aplikacji funkcji. Domyślnie są one również tworzone w tej samej nowej grupie zasobów z aplikacją funkcji. Jeśli chcesz dostosować nazwy tych zasobów lub ponownie użyć istniejących zasobów, musisz opublikować projekt z zaawansowanymi opcjami tworzenia.

Wdrażanie projektu na platformie Azure

Ważne

Wdrażanie w istniejącej aplikacji funkcji zawsze zastępuje zawartość tej aplikacji na platformie Azure.

  1. W obszarze Zasoby działania platformy Azure znajdź właśnie utworzony zasób aplikacji funkcji, kliknij prawym przyciskiem myszy zasób i wybierz polecenie Wdróż w aplikacji funkcji....

  2. Po wyświetleniu monitu o zastąpienie poprzednich wdrożeń wybierz pozycję Wdróż , aby wdrożyć kod funkcji w nowym zasobie aplikacji funkcji.

  3. Po zakończeniu wdrażania wybierz pozycję Wyświetl dane wyjściowe , aby wyświetlić wyniki tworzenia i wdrażania, w tym utworzone zasoby platformy Azure. Jeśli przegapisz powiadomienie, wybierz ikonę dzwonka w prawym dolnym rogu, aby zobaczyć je ponownie.

    Screenshot of the View Output window.

Uruchamianie funkcji na platformie Azure

  1. Wróć do obszaru Zasoby na pasku bocznym, rozwiń subskrypcję, nową aplikację funkcji i funkcje. Kliknij prawym przyciskiem myszy (Windows) lub Ctrl — kliknij funkcję (macOS), HttpExample a następnie wybierz polecenie Wykonaj funkcję teraz....

    Screenshot of executing function in Azure from Visual Studio Code.

  2. W polu Wprowadź treść żądania zostanie wyświetlona wartość treści komunikatu { "name": "Azure" }żądania . Naciśnij klawisz Enter, aby wysłać ten komunikat żądania do funkcji.

  3. Gdy funkcja jest wykonywana na platformie Azure i zwraca odpowiedź, w programie Visual Studio Code jest zgłaszane powiadomienie.

Czyszczenie zasobów

Gdy przejdziesz do następnego kroku i dodasz powiązanie kolejki usługi Azure Storage z funkcją, musisz zachować wszystkie zasoby na miejscu, aby opierać się na tym, co zostało już zrobione.

W przeciwnym razie możesz użyć poniższych kroków, aby usunąć aplikację funkcji i powiązane z nią zasoby, aby uniknąć ponoszenia dodatkowych kosztów.

  1. W programie Visual Studio Code naciśnij klawisz F1 , aby otworzyć paletę poleceń. W palecie poleceń wyszukaj i wybierz pozycję Azure: Open in portal.

  2. Wybierz aplikację funkcji i naciśnij klawisz Enter. Strona aplikacji funkcji zostanie otwarta w witrynie Azure Portal.

  3. Na karcie Przegląd wybierz nazwany link obok pozycji Grupa zasobów.

    Screenshot of select the resource group to delete from the function app page.

  4. Na stronie Grupa zasobów przejrzyj listę uwzględnionych zasobów i sprawdź, czy są to te, które chcesz usunąć.

  5. Wybierz pozycję Usuń grupę zasobów, a następnie postępuj zgodnie z instrukcjami.

    Usuwanie może potrwać kilka minut. Po jego zakończeniu przez kilka sekund będzie widoczne powiadomienie. Możesz również wybrać ikonę dzwonka w górnej części strony, aby wyświetlić powiadomienie.

Aby uzyskać więcej informacji na temat kosztów usługi Functions, zobacz Szacowanie kosztów planu zużycia.

Następne kroki

Użyto programu Visual Studio Code do utworzenia aplikacji funkcji z prostą funkcją wyzwalaną przez protokół HTTP. W następnym artykule rozszerzysz tę funkcję, łącząc się z usługą Azure Storage. Aby dowiedzieć się więcej na temat nawiązywania połączenia z innymi usługami platformy Azure, zobacz Dodawanie powiązań do istniejącej funkcji w usłudze Azure Functions.