Quickstart: Een functie maken in Azure met TypeScript met behulp van Visual Studio Code

In dit artikel gebruikt u Visual Studio Code om een TypeScript-functie te maken die reageert op HTTP-aanvragen. Nadat u de code lokaal hebt getest, implementeert u deze in de serverloze omgeving van Azure Functions.

Voor het voltooien van deze quickstart worden kosten van een paar dollarcent of minder in rekening gebracht bij uw Azure-account.

Er is ook een op een CLI gebaseerde versie van dit artikel.

Uw omgeving configureren

Voordat u aan de slag kunt gaan, moet u beschikken over de volgende vereisten:

Uw lokale project maken

In deze sectie gebruikt u Visual Studio Code om een lokaal Azure Functions-project in TypeScript te maken. Verderop in dit artikel publiceert u de functiecode in Azure.

  1. Kies het Azure-pictogram op de activiteitsbalk. Selecteer vervolgens in het gebied Werkruimte (lokaal) de + knop en kies Functie maken in de vervolgkeuzelijst. Wanneer u hierom wordt gevraagd, kiest u Nieuw project maken.

    Schermopname van het venster Een nieuw project maken.

  2. Kies de maplocatie voor uw projectwerkruimte en kies Selecteren. Maak een nieuwe map of kies een lege map voor de projectwerkruimte. Kies geen projectmap die al deel uitmaakt van een werkruimte.

  3. Geef de volgende informatie op bij de prompts:

    Prompt Selectie
    Selecteer een taal voor uw functieproject Kies TypeScript.
    Selecteer een sjabloon voor de eerste functie van uw project Kies HTTP trigger.
    Geef een functienaam op Typ HttpExample.
    Verificatieniveau Kies Anonymous, zodat iedereen uw functie-eindpunt kan aanroepen. Zie Autorisatiesleutels voor meer informatie over autorisatieniveau.
    Selecteer hoe u uw project wilt openen Kies Add to workspace.

    Met behulp van deze informatie wordt met Visual Studio Code een Azure Functions-project gegenereerd met een HTTP-trigger. U kunt de lokale projectbestanden weergeven in de Explorer. Zie Gegenereerde projectbestanden voor meer informatie over bestanden die worden gemaakt.

De functie lokaal uitvoeren

Visual Studio Code integreert met Azure Functions Core Tools om u een project te laten uitvoeren vanaf uw lokale ontwikkelaarscomputer voordat u in Azure publiceert.

  1. Als u de functie lokaal wilt starten, drukt u op F5 of op het pictogram Uitvoeren en fouten opsporen in de activiteitenbalk aan de linkerkant. In het deelvenster Terminal wordt uitvoer van Core Tools weergegeven. Uw app wordt gestart in het deelvenster Terminal . Kopieer het URL-eindpunt van uw functie die lokaal wordt uitgevoerd en door HTTP is geactiveerd.

    Schermopname van de vs code-uitvoer van de lokale functie.

    Als u problemen ondervindt met het uitvoeren op Windows, moet u ervoor zorgen dat de standaardterminal voor Visual Studio Code niet is ingesteld op WSL Bash.

  2. Als Core Tools nog steeds wordt uitgevoerd in Terminal, kiest u het Azure-pictogram in de activiteitenbalk. Vouw in het gebied Werkruimtede optie Lokale projectfuncties>uit. Klik met de rechtermuisknop (Windows) of Ctrl - klik (macOS) op de nieuwe functie en kies Functie nu uitvoeren....

    De functie nu uitvoeren vanuit Visual Studio Code

  3. In Aanvraagtekst invoeren ziet u de hoofdtekstwaarde van het aanvraagbericht van { "name": "Azure" }. Druk op Enter om dit aanvraagbericht naar uw functie te verzenden.

  4. Wanneer de functie lokaal wordt uitgevoerd en een antwoord retourneert, wordt er een melding gegenereerd in Visual Studio Code. Informatie over de uitvoering van de functie wordt weergegeven in het deelvenster Terminal .

  5. Druk in het deelvenster Terminal op Ctrl+ C om Core Tools te stoppen en de verbinding met het foutopsporingsprogramma te verbreken.

Nadat u hebt gecontroleerd of de functie correct wordt uitgevoerd op uw lokale computer, is het tijd om het project te publiceren in Azure met behulp van Visual Studio Code.

Aanmelden bij Azure

Voordat u de app kunt publiceren, moet u zich aanmelden bij Azure.

  1. Als u nog niet bent aangemeld, kiest u het Azure-pictogram op de activiteitsbalk. Kies vervolgens in het gebied Resourcesde optie Aanmelden bij Azure....

    Schermopname van het aanmeldingsvenster bij Azure in VS Code.

    Als u al bent aangemeld en uw bestaande abonnementen kunt zien, gaat u naar de volgende sectie. Als u nog geen Azure-account hebt, kiest u Maken en Azure-account.... Leerlingen/studenten kunnen Maken en Azure for Students-account kiezen....

  2. Wanneer u hierom wordt gevraagd in de browser, kiest u uw Azure-account en meld u zich aan met uw Azure-accountreferenties. Als u een nieuw account maakt, kunt u zich aanmelden nadat uw account is gemaakt.

  3. Nadat u bent aangemeld, kunt u het nieuwe browservenster sluiten. De abonnementen die deel uitmaken van uw Azure-account, worden weergegeven in de zijbalk.

De functie-app maken in Azure

In deze sectie maakt u een functie-app en gerelateerde resources in uw Azure-abonnement.

  1. Kies het Azure-pictogram op de activiteitsbalk. Selecteer vervolgens in het gebied Resources het + pictogram en kies de optie Functie-app maken in Azure .

    Een resource maken in uw Azure-abonnement

  2. Geef de volgende informatie op bij de prompts:

    Prompt Selectie
    Abonnement selecteren Kies het abonnement dat u wilt gebruiken. U ziet deze prompt niet wanneer er slechts één abonnement zichtbaar is onder Resources.
    Voer een globaal unieke naam in voor de functie-app Typ een naam die geldig is in een URL-pad. De naam die u typt, wordt gevalideerd om er zeker van te zijn dat deze uniek is in Azure Functions.
    Een runtimestack selecteren Kies de taalversie waarop u lokaal hebt uitgevoerd.
    Selecteer een locatie voor nieuwe resources Kies voor betere prestaties een regio bij u in de buurt.

    De extensie toont de status van afzonderlijke resources terwijl ze in Azure worden gemaakt in het deelvenster Azure: Activiteitenlogboek .

    Logboek van het maken van Azure-resources

  3. Wanneer het maken is voltooid, worden de volgende Azure-resources in uw abonnement gemaakt. De resources worden benoemd op basis van de naam van uw functie-app:

    • Een resourcegroep, een logische container voor gerelateerde resources.
    • Een standaard Azure Storage-account, dat de status en andere informatie over uw projecten bijhoudt.
    • Een functie-app, die de omgeving biedt voor het uitvoeren van uw functiecode. Met een functie-app kunt u functies groeperen in een logische eenheid, zodat u resources eenvoudiger kunt beheren, implementeren en delen binnen hetzelfde hostingabonnement.
    • Een App Service-plan, waarmee de onderliggende host voor uw functie-app wordt gedefinieerd.
    • Een Application Insights-exemplaar dat is verbonden met de functie-app, die het gebruik van uw functies in de app bijhoudt.

    Nadat de functie-app is gemaakt en het implementatiepakket is toegepast, wordt er een melding weergegeven.

    Tip

    Standaard worden de Azure-resources die vereist zijn voor uw functie-app gemaakt op basis van de naam van de functie-app die u opgeeft. Standaard worden ze ook gemaakt in dezelfde nieuwe resourcegroep met de functie-app. Als u de namen van deze resources wilt aanpassen of bestaande resources opnieuw wilt gebruiken, moet u het project publiceren met geavanceerde opties voor maken .

Het project implementeren in Azure

Belangrijk

Implementeren in een bestaande functie-app overschrijft altijd de inhoud van die app in Azure.

  1. Kies het Azure-pictogram op de activiteitsbalk, selecteer vervolgens in het gebied Werkruimte de projectmap en selecteer de knop Implementeren... .

    Project implementeren vanuit de Visual Studio Code-werkruimte

  2. Selecteer Implementeren naar functie-app..., kies de functie-app die u zojuist hebt gemaakt en selecteer Implementeren.

  3. Nadat de implementatie is voltooid, selecteert u Uitvoer weergeven om de resultaten van het maken en implementeren te bekijken, inclusief de Azure-resources die u hebt gemaakt. Als u de melding mist, selecteert u het belpictogram in de rechterbenedenhoek om deze opnieuw weer te geven.

    Schermopname van het venster Uitvoer weergeven.

De functie in Azure uitvoeren

  1. Vouw in het gebied Resources in de zijbalk uw abonnement, uw nieuwe functie-app en Functies uit. Klik met de rechtermuisknop (Windows) of Ctrl - klik (macOS) op de HttpExample functie en kies Functie nu uitvoeren....

    Schermopname van het uitvoeren van een functie in Azure vanuit Visual Studio Code.

  2. In Aanvraagtekst invoeren ziet u de hoofdtekst van het aanvraagbericht van { "name": "Azure" }. Druk op Enter om dit aanvraagbericht naar uw functie te verzenden.

  3. Wanneer de functie wordt uitgevoerd in Azure en een antwoord retourneert, wordt er een melding gegenereerd in Visual Studio Code.

Resources opschonen

Wanneer u verder gaat met de volgende stap en een Azure Storage-wachtrijbinding aan uw functie toevoegt, moet u alle resources op dezelfde plaats laten staan, zodat u hiermee verder kunt gaan met wat u al hebt gedaan.

Als dat niet het geval is, kunt u de volgende stappen gebruiken om de functie-app en de bijbehorende resources te verwijderen om te voorkomen dat er verdere kosten in rekening worden gebracht.

  1. Druk in Visual Studio Code op F1 om het opdrachtenpalet te openen. In het opdrachtenpalet zoekt en selecteert u Azure: Open in portal.

  2. Kies uw functie-app en druk op Enter. De functie-app wordt geopend in de Azure-portal.

  3. Selecteer op het tabblad Overzicht de benoemde koppeling naast Resourcegroep.

    Schermopname van het selecteren van de resourcegroep die u wilt verwijderen op de pagina van de functie-app.

  4. Bekijk op de pagina Resourcegroep de lijst met opgenomen resources en controleer of dit de resources zijn die u wilt verwijderen.

  5. Selecteer Resourcegroep verwijderen en volg de instructies.

    Verwijderen kan enkele minuten duren. Wanneer dit is voltooid, verschijnt een aantal seconden een melding in beeld. U kunt ook het belpictogram boven aan de pagina selecteren om de melding te bekijken.

Zie Kosten van verbruiksabonnementen schatten voor meer informatie over de kosten van Functions.

Volgende stappen

U hebt Visual Studio Code gebruikt om een functie-app te maken met een eenvoudige http-geactiveerde functie. In het volgende artikel vouwt u die functie uit door verbinding te maken met Azure Storage. Zie Bindingen toevoegen aan een bestaande functie in Azure Functions voor meer informatie over het maken van verbinding met andere Azure-services.