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:

• Een Azure-account met een actief abonnement. Gratis een account maken

• Node.js 14.x of Node.js 16.x (preview). Gebruik de opdracht node --version om uw versie te controleren.

• Visual Studio Code op een van de ondersteunde platforms.

• De Azure Functions-extensie voor Visual Studio Code.

• Azure Functions Core Tools 4.x.

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 in de activiteitenbalk en selecteer vervolgens in het gedeelte Azure: Functions het pictogram Nieuw project maken... .

   

2. Kies een maplocatie voor de werkruimte van uw project en kies Selecteren.

   Notitie

   Deze stappen waren bedoeld om buiten een werkruimte te worden voltooid. Selecteer in dit geval geen projectmap die deel uitmaakt van een werkruimte.

3. Geef de volgende informatie op bij de prompts:

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

   • Autorisatieniveau: Kies Anonymous, waarmee iedereen uw functie-eindpunt kan aanroepen. Zie Autorisatiesleutels voor meer informatie over autorisatieniveau.

   • Selecteer hoe u uw project wilt openen: Kies Add to workspace.

4. 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. Druk op F5 om het functie-app-project te starten en uw functie aan te roepen. De uitvoer van Core Tools wordt weergegeven in het deelvenster Terminal. Uw app wordt gestart in het deelvenster Terminal. Kopieer het URL-eindpunt van uw functie die lokaal wordt uitgevoerd en door HTTP is geactiveerd.

   

   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 wordt uitgevoerd, gaat u naar het gebied Azure: Functions. Vouw onder Functies de functie Lokaal Project > functies uit. Klik met de rechtermuisknop (Windows) of Ctrl- klik (macOS) op de functie en HttpExample kies Functie nu uitvoeren....

   

3. In Aanvraag body invoeren ziet u de waarde van de aanvraagbericht-body 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 in Visual Studio code. Informatie over de uitvoering van de functie wordt weergegeven in het deelvenster Terminal.

5. Druk 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 niet al bent aangemeld, kiest u het Azure-pictogram in de activiteitenbalk en selecteert u vervolgens in het gedeelte Azure: Functions Aanmelden bij Azure... . Hier kunt u een gratis Azure-account maken als u dat nog niet hebt. Studenten kunnen een gratis Azure-account voor studenten maken .

   

   Als u al bent aangemeld, gaat u naar het volgende gedeelte.

2. Wanneer u hierom wordt gevraagd in de browser, kiest u uw Azure-account en meld u zich aan met uw Azure-accountreferenties.

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

Het project naar Azure publiceren

In deze sectie maakt u een functie-app en de bijbehorende resources in uw Azure-abonnement en implementeert u vervolgens uw code.

1. Kies het Azure-pictogram in de activiteitenbalk en selecteer vervolgens in het gedeelte Azure: In het gebied Functies kiest u de knop Implementeren in functie-app ... .

   

2. Geef de volgende informatie op bij de prompts:

   • Selecteer map: Kies een map in uw werkruimte of blader naar een map die de functie-app bevat. Dit wordt niet weergegeven als u al een geldige functie-app hebt geopend.

   • Selecteer abonnement: Kies het abonnement dat u wilt gebruiken. Dit ziet u niet als u maar één abonnement hebt.

   • Selecteer functie-app in Azure: Kies + Create new Function App. (Kies niet de optie Advanced die niet in dit artikel wordt behandeld.)

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

   • Selecteer een runtime: Kies de versie van Node.js die u lokaal hebt uitgevoerd. U kunt de opdracht node --version gebruiken om uw versie te controleren.

   • 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 deze in het systeemgebied in Azure worden gemaakt.

   

3. Wanneer dit is voltooid, worden de volgende Azure-resources in uw abonnement gemaakt met behulp van namen op basis van de naam van uw functie-app:

   • Een resource groep, een logische container voor gerelateerde resources.
   • Een standaard Azure Storage account, waarmee de status en andere informatie over uw projecten worden bijgehouden.
   • Een verbruiksplan dat de onderliggende host definieert voor uw serverloze functie-app.
   • 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 Application Insights-exemplaar dat is verbonden met de functie-app, die het gebruik van uw serverloze functie bijhoudt.

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

   Tip

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

4. Selecteer in deze melding de optie 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.

   

De functie in Azure uitvoeren

1. Ga terug naar het gebied Azure: functions in de zijbalk, vouw uw abonnement uit, uw nieuwe functie-app en functions. Klik met de rechter muisknop (Windows) of CTRL (macOS) op de HttpExample functie en kies functie nu uitvoeren....

   

2. In de hoofd tekst van de aanvraag ziet u de waarde van de aanvraag bericht hoofdtekst van { "name": "Azure" } . Druk op ENTER om dit aanvraag bericht 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 Functions: 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.

   

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 voor verbruiksplannen inschatten voor meer informatie over de kosten voor 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.