Snabbstart: Skapa en JavaScript-funktion i Azure med Visual Studio Code

Använd Visual Studio Code för att skapa en JavaScript-funktion som svarar på HTTP-begäranden. Testa koden lokalt och distribuera den sedan till den serverlösa miljön Azure Functions.

Den här snabbstarten medför en liten kostnad på några cent eller mindre för ditt Azure-konto.

Det finns också en CLI-baserad version av den här artikeln.

Konfigurera din miljö

Innan du börjar kontrollerar du att du har följande krav:

Skapa ditt lokala projekt

I det här avsnittet använder du Visual Studio Code för att skapa ett lokalt Azure Functions-projekt i JavaScript. Senare i den här artikeln ska du publicera funktionskoden till Azure.

  1. Välj Azure-ikonen i Aktivitetsfältet och gör sedan följande i Azure: I området för funktioner väljer du ikonen Skapa nytt projekt....

    Välj Skapa ett nytt projekt

  2. Välj en katalogplats för projektarbetsytan och välj Välj.

    Anteckning

    De här stegen har utformats för att slutföras utanför en arbetsyta. Välj i det här fallet inte en projektmapp som ingår i en arbetsyta.

  3. Ange följande information i meddelanderutorna:

    Prompt Urval
    Välj ett språk för funktionsprojektet Välj JavaScript.
    Välj en mall för projektets första funktion Välj HTTP trigger.
    Ange ett funktionsnamn Skriv HttpExample.
    Auktoriseringsnivå Välj Anonymous , vilket gör att vem som helst kan anropa funktionsslutpunkten. Mer information om auktoriseringsnivå finns i Auktoriseringsnycklar.
    Välj hur du vill öppna projektet Välj Add to workspace.

    Med den här informationen Visual Studio Code ett Azure Functions med en HTTP-utlösare. Du kan visa de lokala projektfilerna i Utforskaren. Mer information om filer som skapas finns i Genererade projektfiler.

Köra funktionen lokalt

Visual Studio Koden integreras med Azure Functions Core-verktyg så att du kan köra det här projektet på din lokala utvecklingsdator innan du publicerar till Azure.

  1. Du anropar funktionen genom att trycka på F5 för att starta funktionsappsprojektet. Utdata från Core Tools visas på panelen Terminal. Din app startar i terminalpanelen. Du kan se URL-slutpunkten för den HTTP-utlösta funktionen som körs lokalt.

    Vs Code-utdata för lokal funktion

    Om du har problem med att Windows på en dator kontrollerar du att standardterminalen för Visual Studio Code inte är inställd på WSL Bash.

  2. När Core Tools är igång går du till området Azure: Funktioner. Under Funktioner expanderar du Lokal Project > Functions. Högerklicka (välj Windows) eller Ctrl - klicka (macOS) på HttpExample funktionen och välj Kör funktion nu....

    Execute-funktionen nu från Visual Studio Code

  3. I Ange begärandetext visas brödtextvärdet för begärandemeddelandet. { "name": "Azure" } Tryck på Retur för att skicka det här begärandemeddelandet till din funktion.

  4. När funktionen körs lokalt och returnerar ett svar utlöses ett meddelande i Visual Studio Code. Information om funktionskörningen visas i terminalpanelen.

  5. Tryck på Ctrl + C för att stoppa Core Tools och koppla från felsökningsprogrammet.

När du har kontrollerat att funktionen körs korrekt på den lokala datorn är det dags att använda Visual Studio Code för att publicera projektet direkt till Azure.

Logga in på Azure

Innan du kan publicera appen måste du logga in på Azure.

  1. Om du inte redan är inloggad väljer du Azure-ikonen i aktivitets fältet och väljer sedan Logga in på Azure i avsnittet Azure: Functions . Om du inte redan har en, kan du skapa ett kostnads fritt Azure-konto. Studenter kan skapa ett kostnads fritt Azure-konto för studenter.

    Logga in på Azure i VS Code

    Om du redan är inloggad går du till nästa avsnitt.

  2. När du uppmanas till webbläsaren väljer du ditt Azure-konto och loggar in med dina autentiseringsuppgifter för Azure-kontot.

  3. När du har loggat in kan du stänga det nya webbläsarfönstret. De prenumerationer som tillhör ditt Azure-konto visas i sido fältet.

Distribuera projektet till Azure

I det här avsnittet skapar du en funktionsapp och relaterade resurser i din Azure-prenumeration och distribuerar sedan koden.

Viktigt

När du distribuerar till en befintlig funktionsapp skriver du över innehållet i appen i Azure.

  1. Välj Azure-ikonen i aktivitetsfältet. I området Azure: Funktioner väljer du sedan knappen Distribuera till funktionsapp....

    Publicera projektet till Azure

  2. Ange följande information i meddelanderutorna:

    Prompt Urval
    Välj Funktionsapp i Azure Välj + Create new Function App. (Välj inte det alternativ Advanced som inte beskrivs i den här artikeln.)
    Ange ett globalt unikt namn för funktionsappen Ange ett namn som är giltigt i en URL-sökväg. Namnet du skriver verifieras för att se till att det är unikt i Azure Functions.
    Välj en körning Välj den version Node.js som du har kört lokalt. Du kan använda kommandot node --version för att kontrollera din version.
    Välj en plats för nya resurser Välj en region nära dig för att få bättre prestanda.

    Tillägget visar status för enskilda resurser när de skapas i Azure i meddelandefältet.

    Meddelande om skapande av Azure-resurser

    När du är klar skapas följande Azure-resurser i din prenumeration med namn som baseras på funktionsappens namn:

    • En resurs grupp, som är en logisk behållare för relaterade resurser.
    • Ett standard Azure Storage-kontosom upprätthåller tillstånd och annan information om dina projekt.
    • En förbruknings plan som definierar den underliggande värden för din server lös Function-app.
    • En Function-app som tillhandahåller miljön för att köra funktions koden. Med en Function-app kan du gruppera funktioner som en logisk enhet för enklare hantering, distribution och delning av resurser inom samma värd plan.
    • En Application Insights instans som är ansluten till Function-appen, som spårar användningen av din server lös funktion.
  3. Ett meddelande visas när funktionsappen har skapats och distributionspaketet har tillämpats.

    Tips

    Som standard skapas de Azure-resurser som krävs av din Function-app baserat på namnet på den Function-app som du anger. Som standard skapas de också i samma nya resurs grupp med Function-appen. Om du antingen vill anpassa namnen på dessa resurser eller återanvända befintliga resurser måste du i stället publicera projektet med avancerade alternativ för att skapa.

  4. Välj Visa utdata i det här meddelandet för att visa skapande- och distributionsresultat, inklusive de Azure-resurser som du skapade. Om du missar meddelandet väljer du klockikonen i det nedre högra hörnet för att se det igen.

    Skapa ett fullständigt meddelande

Kör funktionen i Azure

  1. Gå tillbaka till avsnittet Azure: Functions i sido fältet, expandera din prenumeration, din nya Function-app och functions. Högerklicka (Windows) eller CTRL- klicka (MacOS) på HttpExample funktionen och välj Kör funktion nu....

    Kör funktionen nu i Azure från Visual Studio Code

  2. I Ange brödtext för begäran visas bröd texten för begär ande meddelandet { "name": "Azure" } . Skicka meddelandet till din funktion genom att trycka på RETUR.

  3. När funktionen körs i Azure och returnerar ett svar, aktive ras ett meddelande i Visual Studio Code.

Ändra koden och distribuera om till Azure

  1. Välj filen i VSCode ./HttpExample/index.js Explorer-vyn.

  2. Ersätt filen med följande kod för att skapa ett JSON-objekt och returnera den.

    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. Kör funktionsappen lokalt igen.

  4. I prompten Enter request body (Ange begärandetext) ändrar du begärandemeddelandet till { "name": "Tom","sport":"basket" }. Tryck på Retur för att skicka det här begärandemeddelandet till din funktion.

  5. Visa svaret i meddelandet:

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. Distribuera om funktionen till Azure.

Felsökning

Använd tabellen nedan för att lösa de vanligaste problemen som uppstår när du använder den här snabbstarten.

Problem Lösning
Kan du inte skapa ett lokalt funktionsprojekt? Kontrollera att du har Azure Functions installerat.
Kan du inte köra funktionen lokalt? Kontrollera att du har Azure Functions Core Tools installerat.
När du kör Windows måste du se till att standardterminalgränssnittet för Visual Studio Code inte är inställt på WSL Bash.
Kan du inte distribuera funktionen till Azure? Granska informationen om fel i Utdata. Klockikonen i det nedre högra hörnet är ett annat sätt att visa utdata. Publicerade du till en befintlig funktionsapp? Åtgärden skriver över innehållet i appen i Azure.
Gick det inte att köra den molnbaserade funktionsappen? Kom ihåg att använda frågesträngen för att skicka in parametrar.

Rensa resurser

När du fortsätter till nästa steg och lägger till en Azure Storage-köbindning till funktionen måste du behålla alla dina resurser på plats för att bygga vidare på det du redan har gjort.

Annars kan du använda följande steg för att ta bort funktionsappen och dess relaterade resurser för att undvika ytterligare kostnader.

  1. I Visual Studio Code väljer du Azure-ikonen för att öppna Azure Explorer.
  2. I avsnittet Resursgrupper hittar du din resursgrupp.
  3. Högerklicka på resursgruppen och välj Ta bort.

Mer information om Functions-kostnader finns i Beräkna förbrukningsplankostnader.

Nästa steg

Du har använt Visual Studio Code för att skapa en funktionsapp med en enkel HTTP-utlöst funktion. I nästa artikel expanderar du funktionen genom att ansluta till antingen Azure Cosmos DB eller Azure Storage. Mer information om hur du ansluter till andra Azure-tjänster finns i Lägga till bindningar till en befintlig funktion i Azure Functions. Mer information om säkerhet finns i Skydda Azure Functions.