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

Gebruik Visual Studio Code om een JavaScript-functie te maken die reageert op HTTP-aanvragen. Test de code lokaal en implementeer deze vervolgens 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 te maken in JavaScript. 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:

   Prompt	Selectie
   Een taal voor uw functieproject selecteren	Kies JavaScript.
   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. 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 implementeren in Azure

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:

   Prompt	Selectie
   Functie-app selecteren in Azure	Kies + Create new Function App. (Kies niet de optie Advanced die niet in dit artikel wordt behandeld.)
   Voer een wereldwijd 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 runtime selecteren	Kies de versie van Node.js u lokaal hebt uitgevoerd. U kunt de opdracht node --version gebruiken om uw versie te controleren.
   Een locatie voor nieuwe resources selecteren	Voor betere prestaties kiest u een regio bij u in de buurt.

   De extensie toont de status van afzonderlijke resources terwijl deze worden gemaakt in Azure in het systeemmeldingsgebied.

   

   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.

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

De code wijzigen en opnieuw implementeren in Azure

1. Selecteer het bestand in de weergave VSCode ./HttpExample/index.js Explorer.

2. Vervang het bestand door de volgende code om een JSON-object te maken en dit te retourneren.

   module.exports = async function (context, req) {
   
       try {
           context.log('JavaScript HTTP trigger function processed a request.');
   
           // Read incoming data
           const name = (req.query.name || (req.body && req.body.name));
           const sport = (req.query.sport || (req.body && req.body.sport));
   
           // fail if incoming data is required
           if (!name || !sport) {
   
               context.res = {
                   status: 400
               };
               return;
           }
   
           // Add or change code here
           const message = `${name} likes ${sport}`;
   
           // Construct response
           const responseJSON = {
               "name": name,
               "sport": sport,
               "message": message,
               "success": true
           }
   
           context.res = {
               // status: 200, /* Defaults to 200 */
               body: responseJSON,
               contentType: 'application/json'
           };
       } catch(err) {
           context.res = {
               status: 500
           };
       }
   }
   

3. De functie-app lokaal opnieuw gebruiken.

4. Wijzig in de prompt Enter request body de aanvraagbericht body in { "name": "Tom","sport":"nba" }. Druk op Enter om dit aanvraagbericht naar uw functie te verzenden.

5. Bekijk het antwoord in de melding:

   {
     "name": "Tom",
     "sport": "basketball",
     "message": "Tom likes basketball",
     "success": true
   }
   

6. De functie opnieuw implementeren in Azure.

Problemen oplossen

Gebruik de onderstaande tabel om de meest voorkomende problemen op te lossen die zijn aangetroffen bij het gebruik van deze quickstart.

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. Selecteer Visual Studio Code het pictogram Azure om De Azure-verkenner te openen.
2. Zoek uw resourcegroep in de sectie Resourcegroepen.
3. Klik met de rechtermuisknop op de resourcegroep en selecteer Verwijderen.

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 Cosmos DB of Azure Storage. Zie Bindingen toevoegen aan een bestaande functie in Azure Functions voor meer informatie over het maken van verbinding met andere Azure-services. Zie Beveiliging voor meer informatie over beveiliging Azure Functions.