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

Artikel
07/27/2024

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 i Azure Functions.

Viktigt!

Innehållet i den här artikeln ändras baserat på ditt val av Node.js programmeringsmodell i väljaren överst på sidan. V4-modellen är allmänt tillgänglig och är utformad för att ha en mer flexibel och intuitiv upplevelse för JavaScript- och TypeScript-utvecklare. Läs mer om skillnaderna mellan v3 och v4 i migreringsguiden.

Slutförandet av den här snabbstarten medför en liten kostnad på några USD cent eller mindre i ditt Azure-konto.

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

Konfigurera din miljö

Innan du börjar ska följande förutsättningar finnas till hands:

Ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
Node.js 14.x eller senare. node --version Använd kommandot för att kontrollera din version.
Visual Studio Code på någon av plattformarna som stöds.
Azure Functions-tillägget för Visual Studio Code. Det här tillägget installerar Azure Functions Core Tools för första gången du kör dina funktioner lokalt.

Ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
Node.js 18.x eller senare. node --version Använd kommandot för att kontrollera din version.
Visual Studio Code på någon av plattformarna som stöds.
Azure Functions-tillägget v1.10.4 eller senare för Visual Studio Code. Det här tillägget installerar Azure Functions Core Tools för första gången du kör dina funktioner lokalt. Node.js v4 kräver version 4.0.5382 eller en senare version av Core Tools.

Installera eller uppdatera Core Tools

Azure Functions-tillägget för Visual Studio Code integreras med Azure Functions Core Tools så att du kan köra och felsöka dina funktioner lokalt i Visual Studio Code med hjälp av Azure Functions-körningen. Innan du kommer igång är det en bra idé att installera Core Tools lokalt eller uppdatera en befintlig installation för att använda den senaste versionen.

I Visual Studio Code väljer du F1 för att öppna kommandopaletten och söker sedan efter och kör kommandot Azure Functions: Install eller Update Core Tools.

Det här kommandot försöker antingen starta en paketbaserad installation av den senaste versionen av Core Tools eller uppdatera en befintlig paketbaserad installation. Om du inte har npm eller Homebrew installerat på den lokala datorn måste du i stället installera eller uppdatera Core Tools manuellt.

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 publicerar du funktionskoden till Azure.

I Visual Studio Code trycker du på F1 för att öppna kommandopaletten och söka efter och köra kommandot Azure Functions: Create New Project....
Välj katalogplatsen för projektarbetsytan och välj Välj. Du bör antingen skapa en ny mapp eller välja en tom mapp för projektarbetsytan. Välj inte en projektmapp som redan är en del av en arbetsyta.

Ange följande information i meddelanderutorna:

Prompt	Urval
Välj ett språk för funktionsprojektet	Välj `JavaScript`.
Välj en JavaScript-programmeringsmodell	Välj `Model V3`
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 finns i auktoriseringsnivå.
Välj hur du vill öppna projektet	Välj `Open in current window`.

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

Ange följande information i meddelanderutorna:

Prompt	Urval
Välj ett språk för funktionsprojektet	Välj `JavaScript`.
Välj en JavaScript-programmeringsmodell	Välj `Model V4`
Välj en mall för projektets första funktion	Välj `HTTP trigger`.
Ange ett funktionsnamn	Skriv `HttpExample`.
Välj hur du vill öppna projektet	Välj `Open in current window`

Kör funktionen lokalt

Visual Studio Code 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.

Starta funktionen lokalt genom att trycka på F5 eller ikonen Kör och felsöka i aktivitetsfältet till vänster. Panelen Terminal visar utdata från Core Tools. Appen startar i terminalpanelen . Du kan se URL-slutpunkten för din HTTP-utlösta funktion som körs lokalt.

Om du har problem med att köra windows kontrollerar du att standardterminalen för Visual Studio Code inte är inställd på WSL Bash.
När Core Tools fortfarande körs i Terminal väljer du Azure-ikonen i aktivitetsfältet. I området Arbetsyta expanderar du Lokala projektfunktioner>. Högerklicka (Windows) eller Ctrl – klicka (macOS) på den nya funktionen och välj Kör funktion nu....
I Ange begärandetext visas brödtextvärdet för begärandemeddelandet på { "name": "Azure" }. Tryck på Retur för att skicka det här begärandemeddelandet till din funktion.
När funktionen körs lokalt och returnerar ett svar genereras ett meddelande i Visual Studio Code. Information om funktionskörningen visas på terminalpanelen .
Med terminalpanelen fokuserad trycker du 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.

Innan du kan skapa Azure-resurser eller publicera din app måste du logga in på Azure.

Om du inte redan är inloggad går du till aktivitetsfältet och väljer Azure-ikonen. Under Resurser väljer du Logga in på Azure.

Om du redan är inloggad och kan se dina befintliga prenumerationer går du till nästa avsnitt. Om du ännu inte har ett Azure-konto väljer du Skapa ett Azure-konto. Eleverna kan välja Skapa ett Azure for Students-konto.
När du uppmanas att göra det i webbläsaren väljer du ditt Azure-konto och loggar in med dina autentiseringsuppgifter för Azure-kontot. Om du skapar ett nytt konto kan du logga in när ditt konto har skapats.
När du har loggat in kan du stänga det nya webbläsarfönstret. Prenumerationerna som tillhör ditt Azure-konto visas i sidofältet.

Skapa funktionsappen i Azure

I det här avsnittet skapar du en funktionsapp och relaterade resurser i din Azure-prenumeration. Många av besluten om att skapa resurser fattas för dig baserat på standardbeteenden. Om du vill ha mer kontroll över de skapade resurserna måste du i stället skapa funktionsappen med avancerade alternativ.

I Visual Studio Code väljer du F1 för att öppna kommandopaletten. I kommandotolken (>) anger du och väljer sedan Azure Functions: Create Function App in Azure (Skapa funktionsapp i Azure).

Ange följande information vid anvisningarna:

Prompt	Åtgärd
Välj prenumeration	Välj den Azure-prenumeration som ska användas. Uppmaningen visas inte när du bara har en prenumeration synlig under Resurser.
Ange ett globalt unikt namn för funktionsappen	Ange ett namn som är giltigt i en URL-sökväg. Namnet du anger verifieras för att se till att det är unikt i Azure Functions.
Välj en körningsstack	Välj den språkversion som du kör lokalt.
Välj en plats för nya resurser	Välj en Azure-region. För bättre prestanda väljer du en region nära dig.

I panelen Azure: Aktivitetslogg visar Azure-tillägget status för enskilda resurser när de skapas i Azure.

Skärmbild som visar loggen för skapande av Azure-resurser.

När funktionsappen skapas skapas följande relaterade resurser i din Azure-prenumeration. Resurserna namnges baserat på det namn som du angav för funktionsappen.
- En resursgrupp, som är en logisk container för relaterade resurser.
- Ett Azure Storage-standardkonto som underhåller tillstånd och annan information om dina projekt.
- En funktionsapp som tillhandahåller miljön för att köra funktionskoden. Med en funktionsapp kan du gruppera funktioner som en logisk enhet för enklare hantering, distribution och delning av resurser inom samma värdplan.
- En Azure App Service-plan som definierar den underliggande värden för din funktionsapp.
- En Application Insights-instans som är ansluten till funktionsappen och som spårar användningen av dina funktioner i appen.
Ett meddelande visas när funktionsappen har skapats och distributionspaketet har tillämpats.

Dricks

Som standard skapas de Azure-resurser som krävs av funktionsappen baserat på det namn du anger för funktionsappen. Som standard skapas resurserna med funktionsappen i samma nya resursgrupp. Om du vill anpassa namnen på de associerade resurserna eller återanvända befintliga resurser publicerar du projektet med avancerade alternativ för att skapa.

Distribuera projektet till Azure

Viktigt!

Distribution till en befintlig funktionsapp skriver alltid över innehållet i appen i Azure.

I kommandopaletten anger du och väljer sedan Azure Functions: Deploy to Function App (Azure Functions: Distribuera till funktionsapp).
Välj den funktionsapp som du nyss skapade. När du uppmanas att skriva över tidigare distributioner väljer du Distribuera för att distribuera funktionskoden till den nya funktionsappresursen.
När distributionen är klar väljer du Visa utdata för att visa resultatet av skapandet och distributionen, 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.

Kör funktionen i Azure

Tryck på F1 för att visa kommandopaletten och sök sedan efter och kör kommandot Azure Functions:Execute Function Now.... Välj din prenumeration om du uppmanas att göra det.
Välj din nya funktionsappresurs och HttpExample som funktion.
I Ange brödtexttyp { "name": "Azure" } för begäran trycker du på Retur för att skicka det här begärandemeddelandet till din funktion.
När funktionen körs i Azure visas svaret i meddelandefältet. Expandera meddelandet för att granska det fullständiga svaret.

Ändra koden och distribuera om till Azure

I Visual Studio Code i utforskarvyn väljer du ./HttpExample/index.js filen.

Ersätt filen med följande kod för att konstruera ett JSON-objekt och returnera det.

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
        };
    }
}

Kör funktionsappen lokalt igen.
I kommandotolken Ange begärandetext ändrar du meddelandetexten för begäran till { "name": "Tom","sport":"basketball" }. Tryck på Retur för att skicka det här begärandemeddelandet till din funktion.

Visa svaret i meddelandet:

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

Distribuera om funktionen till Azure.

Felsökning

Använd följande tabell 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-tillägget installerat.
Kan du inte köra funktionen lokalt?	Kontrollera att den senaste versionen av Azure Functions Core Tools är installerad . När du kör i Windows kontrollerar du att standardterminalgränssnittet för Visual Studio Code inte är inställt på WSL Bash.
Kan du inte distribuera funktionen till Azure?	Granska utdata för felinformation. Klockikonen i det nedre högra hörnet är ett annat sätt att visa utdata. Har du publicerat till en befintlig funktionsapp? Den åtgärden skriver över innehållet i appen i Azure.
Kunde du inte 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 din funktion måste du behålla alla 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.

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

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

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.

Ansluta till Azure Cosmos DB

Ansluta till Azure Queue Storage

Du har använt Visual Studio Code för att skapa en funktionsapp med en enkel HTTP-utlöst funktion.

Läs mer om JavaScript-funktioner

Dela via

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

Konfigurera din miljö

Installera eller uppdatera Core Tools

Skapa ditt lokala projekt

Kör funktionen lokalt

Skapa funktionsappen i Azure

Distribuera projektet till Azure

Kör funktionen i Azure

Ändra koden och distribuera om till Azure

Felsökning

Rensa resurser

Nästa steg

Feedback

Ytterligare resurser

Dela via

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

Konfigurera din miljö

Installera eller uppdatera Core Tools

Skapa ditt lokala projekt

Kör funktionen lokalt

Logga in på Azure

Skapa funktionsappen i Azure

Distribuera projektet till Azure

Kör funktionen i Azure

Ändra koden och distribuera om till Azure

Felsökning

Rensa resurser

Nästa steg

Feedback

Ytterligare resurser