Share via

JavaScript-zelfstudie: Een bestand uploaden en analyseren met Azure Functions en Blob Storage

  • Artikel

In deze zelfstudie leert u hoe u een afbeelding uploadt naar Azure Blob Storage en deze verwerkt met behulp van Azure Functions, Computer Vision en Cosmos DB. U leert ook hoe u Azure Function-triggers en -bindingen implementeert als onderdeel van dit proces. Deze services analyseren samen een geüploade afbeelding die tekst bevat, extraheren de tekst eruit en slaan de tekst vervolgens op in een databaserij voor latere analyse of andere doeleinden.

Azure Blob Storage is de uiterst schaalbare objectopslagoplossing van Microsoft voor de cloud. Blob Storage is ontworpen voor het opslaan van afbeeldingen en documenten, het streamen van mediabestanden, het beheren van back-up- en archiefgegevens en nog veel meer. Meer informatie over Blob Storage vindt u op de overzichtspagina.

Waarschuwing

In deze zelfstudie wordt gebruikgemaakt van openbaar toegankelijke opslag om het proces voor het voltooien van deze zelfstudie te vereenvoudigen. Anonieme openbare toegang vormt een beveiligingsrisico. Meer informatie over het oplossen van dit risico.

Azure Cosmos DB is een volledig beheerde NoSQL- en relationele database voor het ontwikkelen van moderne apps.

Azure Functions is een serverloze computeroplossing waarmee u kleine codeblokken kunt schrijven en uitvoeren als zeer schaalbare, serverloze, gebeurtenisgestuurde functies. Meer informatie over Azure Functions vindt u op de overzichtspagina.

In deze zelfstudie leert u het volgende:

  • Afbeeldingen en bestanden uploaden naar Blob Storage
  • Een Azure Function-gebeurtenistrigger gebruiken om gegevens te verwerken die zijn geüpload naar Blob Storage
  • Azure AI-services gebruiken om een afbeelding te analyseren
  • Gegevens schrijven naar Cosmos DB met behulp van Azure Function-uitvoerbindingen

Architectuurdiagram waarin een afbeeldings-blob wordt toegevoegd aan Blob Storage en vervolgens wordt geanalyseerd door een Azure-functie, waarbij de analyse wordt ingevoegd in een Cosmos DB.

Vereisten

Het opslagaccount en de container maken

De eerste stap is het maken van het opslagaccount waarin de geüploade blobgegevens worden opgeslagen. Dit zijn in dit scenario afbeeldingen die tekst bevatten. Een opslagaccount biedt verschillende services, maar in deze zelfstudie wordt alleen gebruikgemaakt van Blob Storage.

  1. Selecteer in Visual Studio Code Ctrl + Shift + P om het opdrachtenpalet te openen.

  2. Zoek naar Azure Storage: Opslagaccount maken (geavanceerd).

  3. Gebruik de volgende tabel om de Opslagresource te maken.

    Instelling Waarde
    Naam Voer msdocsstoragefunction of iets dergelijks in.
    Resourcegroep Maak de msdocs-storage-function resourcegroep die u eerder hebt gemaakt.
    Statische webhosting Nee.

  4. Selecteer in Visual Studio Code Shift + Alt + A om Azure Explorer te openen.

  5. Vouw de sectie Opslag uit, vouw uw abonnementsknooppunt uit en wacht tot de resource is gemaakt.

De container maken in Visual Studio Code

  1. Vouw de resource uit om de knooppunten weer te geven terwijl u de nieuwe Opslagresource hebt gevonden.
  2. Klik met de rechtermuisknop op Blobcontainers en selecteer Blobcontainer maken.
  3. Voer de naam images in. Hiermee maakt u een privécontainer.

Wijzigen van persoonlijke naar openbare container in Azure Portal

Bij deze procedure wordt een openbare container verwacht. Als u deze configuratie wilt wijzigen, moet u de wijziging aanbrengen in de Azure Portal.

  1. Klik met de rechtermuisknop op de opslagresource in Azure Explorer en selecteer Openen in portal.
  2. Selecteer containers in de sectie Gegevensopslag.
  3. Zoek uw container, imagesen selecteer het ... beletselteken aan het einde van de regel.
  4. Selecteer Toegangsniveau wijzigen.
  5. Selecteer Blob (alleen anonieme leestoegang voor blobs ) en selecteer vervolgens OK.
  6. Ga terug naar Visual Studio Code.

De connection string ophalen in Visual Studio Code

  1. Selecteer in Visual Studio Code Shift + Alt + A om Azure Explorer te openen.
  2. Klik met de rechtermuisknop op uw opslagresource en selecteer Verbindingsreeks kopiëren.
  3. plak dit ergens om later te gebruiken.
  4. Noteer ook de naam msdocsstoragefunction van het opslagaccount voor later gebruik.

De Azure AI Vision-service maken

Maak vervolgens het Azure AI Vision-serviceaccount waarmee de geüploade bestanden worden verwerkt. Vision maakt deel uit van Azure AI-services en biedt verschillende functies voor het extraheren van gegevens uit afbeeldingen. Meer informatie over Azure AI Vision vindt u op de overzichtspagina.

  1. Zoek in de zoekbalk boven aan de portal naar Computer en selecteer het resultaat met het label Computer vision.

  2. Selecteer + Maken op de pagina Computer vision.

  3. Voer op de pagina Computer Vision maken de volgende waarden in:

    • Abonnement: kies het gewenste abonnement.
    • Resourcegroep: gebruik de msdocs-storage-function resourcegroep die u eerder hebt gemaakt.
    • Regio: selecteer de regio die zich het dichtst bij u in de buurt bevindt.
    • Naam: voer de naam in van msdocscomputervision.
    • Prijscategorie: kies Gratis als deze beschikbaar is, kies anders Standard S1.
    • Schakel het selectievakje Kennisgeving voor verantwoordelijke AI in als u akkoord gaat met de voorwaarden

    Een schermopname die laat zien hoe u een nieuwe Computer Vision-service maakt.

  4. Selecteer Beoordelen en maken onderaan. Het duurt even voordat azure de ingevoerde gegevens valideert. Zodra de instellingen zijn gevalideerd, kiest u Maken. Azure begint met het inrichten van de Computer Vision-service. Dit kan even duren.

  5. Wanneer de bewerking is voltooid, selecteert u Ga naar resource.

De Computer Vision sleutels ophalen

Vervolgens moeten we de geheime sleutel en eindpunt-URL vinden voor de Computer Vision-service die moeten worden gebruikt in onze Azure Function-app.

  1. Selecteer sleutels en eindpuntop de overzichtspagina van Computer Vision.

  2. Kopieer op de pagina Sleutels en eindpunt de waarde voor Sleutel 1 en de Waarden voor Eindpunt en plak deze ergens om later te gebruiken. Het eindpunt moet de indeling hebben van https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/

Een schermopname van het ophalen van de sleutels en het URL-eindpunt voor een Computer Vision-service.

Een Cosmos DB-serviceaccount maken

Maak het Cosmos DB-serviceaccount om de analyse van bestanden op te slaan. Azure Cosmos DB is een volledig beheerde NoSQL en relationele database voor het ontwikkelen van moderne apps. U vindt meer informatie over Cosmos DB en de bijbehorende ondersteunings-API's voor verschillende branchedatabases.

Hoewel in deze zelfstudie een API wordt opgegeven wanneer u uw resource maakt, worden de Azure Function-bindingen voor Cosmos DB op dezelfde manier geconfigureerd voor alle Cosmos DB-API's.

  1. Zoek in de zoekbalk boven aan de portal naar Azure Cosmos DB en selecteer het resultaat.

  2. Selecteer + Maken op de pagina Azure Cosmos DB. Selecteer Azure Cosmos DB for NoSQL in de lijst met API-opties.

  3. Voer op de pagina Cosmos DB maken de volgende waarden in:

    • Abonnement: kies het gewenste abonnement.
    • Resourcegroep: gebruik de msdocs-storage-function resourcegroep die u eerder hebt gemaakt.
    • Regio: Selecteer dezelfde regio als uw resourcegroep.
    • Naam: voer de naam in van msdocscosmosdb.
    • Prijscategorie: kies Gratis als deze beschikbaar is, kies anders Standard S1.

  4. Selecteer Beoordelen en maken onderaan. Het duurt even voordat Azure de ingevoerde gegevens valideert. Zodra de instellingen zijn gevalideerd, kiest u Maken. Azure begint met het inrichten van de Computer Vision-service. Dit kan even duren.

  5. Wanneer de bewerking is voltooid, selecteert u Ga naar resource.

  6. Selecteer Data Explorer selecteer vervolgens Nieuwe container.

  7. Maak een nieuwe database en container met de volgende instellingen:

    • Nieuwe database-id maken: StorageTutorial.
    • Voer de nieuwe container-id in: analysis.
    • Voer de partitiesleutel in: /type.

  8. Laat de rest van de standaardinstellingen staan en selecteer OK.

De Cosmos DB-connection string downloaden

Haal de connection string op voor het Cosmos DB-serviceaccount dat moet worden gebruikt in onze Azure Function-app.

  1. Selecteer sleutels op de overzichtspagina van Cosmos DB.

  2. Kopieer op de pagina Sleutels de primaire verbindingsreeks voor later gebruik.

Het voorbeeldproject downloaden en configureren

De code voor de Azure-functie die in deze zelfstudie wordt gebruikt, vindt u in deze GitHub-opslagplaats in de JavaScript-v4 submap. U kunt het project ook klonen met behulp van de onderstaande opdracht.

git clone https://github.com/Azure-Samples/msdocs-storage-bind-function-service.git \
cd msdocs-storage-bind-function-service/javascript-v4 \
code .

Met het voorbeeldproject worden de volgende taken uitgevoerd:

  • Haalt omgevingsvariabelen op om verbinding te maken met het opslagaccount, de Computer Vision en de Cosmos DB-service
  • Accepteert het geüploade bestand als blobparameter
  • Analyseert de blob met behulp van de Computer Vision-service
  • De geanalyseerde afbeeldingstekst als een JSON-object invoegen in Cosmos DB met behulp van uitvoerbindingen

Nadat u het project hebt gedownload en geopend, zijn er enkele essentiële concepten die u moet begrijpen:

Concept Doel
Functie De Azure-functie wordt gedefinieerd door zowel de functiecode als de bindingen. Deze bevinden zich in ./src/functions/process-blobs.js.
Triggers en bindingen De triggers en bindingen geven die gegevens aan, die worden verwacht in of uit de functie en welke service die gegevens gaat verzenden of ontvangen.

Triggers en bindingen die in deze zelfstudie worden gebruikt om het ontwikkelingsproces uit te voeren door de noodzaak om code te schrijven om verbinding te maken met services te verwijderen.

Input Storage Blob-trigger

De code, die aangeeft dat de functie wordt geactiveerd wanneer een blob wordt geüpload naar de container images volgt. De functie wordt geactiveerd voor elke blobnaam, inclusief hiërarchische mappen.


// ...preceding code removed for brevity

app.storageBlob('process-blob-image', { 
    path: 'images/{name}',                // Storage container name: images, Blob name: {name}
    connection: 'StorageConnection',      // Storage account connection string
    handler: async (blob, context) => {

// ... function code removed for brevity
  • app.storageBlob : de invoertrigger storage-blob wordt gebruikt om de functie te binden aan de uploadgebeurtenis in Blob Storage. De trigger heeft twee vereiste parameters:
    • path: het pad dat door de trigger wordt gecontroleerd op gebeurtenissen. Het pad bevat de containernaamimages en de variabele vervanging voor de blobnaam. Deze blobnaam wordt opgehaald uit de name eigenschap.
    • {name}: De naam van de blob die is geüpload. Het gebruik van de blob is de parameternaam voor de blob die in de functie komt. Wijzig de waarde blobniet.
    • connection: de connection string van het opslagaccount. De waarde StorageConnection komt overeen met de naam in het bestand bij het local.settings.json lokaal ontwikkelen.

Cosmos DB-trigger uitvoeren

Wanneer de functie is voltooid, gebruikt de functie het geretourneerde object als de gegevens die moeten worden ingevoegd in Cosmos DB.


// ... function definition ojbect
app.storageBlob('process-blob-image', { 
    
        // removed for brevity    
        
        // Data to insert into Cosmos DB
        const id = uuidv4().toString();
        const analysis = await analyzeImage(blobUrl);
        
        // `type` is the partition key 
        const dataToInsertToDatabase = {
                id,
                type: 'image',
                blobUrl,
                blobSize: blob.length,
                analysis,
                trigger: context.triggerMetadata
            }

        return dataToInsertToDatabase;
    }),

    // Output binding for Cosmos DB
    return: output.cosmosDB({
        connection: 'CosmosDBConnection',
        databaseName:'StorageTutorial',
        containerName:'analysis'
    })
});

Voor de container in dit artikel zijn de volgende vereiste eigenschappen:

  • id: de id die is vereist voor Cosmos DB om een nieuwe rij te maken.

  • /type: de partitiesleutel die is opgegeven met de container is gemaakt.

  • output.cosmosDB : de Cosmos DB-uitvoertrigger wordt gebruikt om het resultaat van de functie in te voegen in Cosmos DB.

    • connection: de connection string van het opslagaccount. De waarde StorageConnection komt overeen met de naam in het local.settings.json bestand.
    • databaseName: De Cosmos DB-database waarmee u verbinding wilt maken.
    • containerName: De naam van de tabel voor het schrijven van de geparseerde afbeeldingstekstwaarde die door de functie wordt geretourneerd. De tabel moet al bestaan.

Azure-functiecode

Hier volgt de volledige functiecode.

const { app, input, output } = require('@azure/functions');
const { v4: uuidv4 } = require('uuid');
const { ApiKeyCredentials } = require('@azure/ms-rest-js');
const { ComputerVisionClient } = require('@azure/cognitiveservices-computervision');
const sleep = require('util').promisify(setTimeout);

const STATUS_SUCCEEDED = "succeeded";
const STATUS_FAILED = "failed"

const imageExtensions = ["jpg", "jpeg", "png", "bmp", "gif", "tiff"];

async function analyzeImage(url) {

    try {

        const computerVision_ResourceKey = process.env.ComputerVisionKey;
        const computerVision_Endpoint = process.env.ComputerVisionEndPoint;

        const computerVisionClient = new ComputerVisionClient(
            new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': computerVision_ResourceKey } }), computerVision_Endpoint);

        const contents = await computerVisionClient.analyzeImage(url, {
            visualFeatures: ['ImageType', 'Categories', 'Tags', 'Description', 'Objects', 'Adult', 'Faces']
        });

        return contents;

    } catch (err) {
        console.log(err);
    }
}
app.storageBlob('process-blob-image', { 
    path: 'images/{name}',
    connection: 'StorageConnection',
    handler: async (blob, context) => {

        context.log(`Storage blob 'process-blob-image' url:${context.triggerMetadata.uri}, size:${blob.length} bytes`);

        const blobUrl = context.triggerMetadata.uri;
        const extension = blobUrl.split('.').pop();

        if(!blobUrl) {
            // url is empty
            return;
        } else if (!extension || !imageExtensions.includes(extension.toLowerCase())){
            // not processing file because it isn't a valid and accepted image extension
            return;
        } else {
            //url is image
            const id = uuidv4().toString();
            const analysis = await analyzeImage(blobUrl);
            
            // `type` is the partition key 
            const dataToInsertToDatabase = {
                    id,
                    type: 'image',
                    blobUrl,
                    blobSize: blob.length,
                    ...analysis,
                    trigger: context.triggerMetadata
                }

            return dataToInsertToDatabase;
        }

        
    },
    return: output.cosmosDB({
        connection: 'CosmosDBConnection',
        databaseName:'StorageTutorial',
        containerName:'analysis'
    })
});

Met deze code worden ook essentiële configuratiewaarden opgehaald uit omgevingsvariabelen, zoals de Blob Storage-connection string en Computer Vision sleutel. Deze omgevingsvariabelen worden toegevoegd aan de Azure Function-omgeving nadat deze is geïmplementeerd.

De standaardfunctie maakt ook gebruik van een tweede methode met de naam AnalyzeImage. Deze code maakt gebruik van het URL-eindpunt en de sleutel van het Computer Vision-account om een aanvraag in te dienen bij Computer Vision om de afbeelding te verwerken. De aanvraag retourneert alle tekst die in de afbeelding is gedetecteerd. Deze tekst wordt naar Cosmos DB geschreven met behulp van de uitgaande binding.

Lokale instellingen configureren

Als u het project lokaal wilt uitvoeren, voert u de omgevingsvariabelen in het ./local.settings.json bestand in. Vul de waarden van de tijdelijke aanduidingen in die u eerder hebt opgeslagen bij het maken van de Azure-resources.

Hoewel de Azure Function-code lokaal wordt uitgevoerd, maakt deze verbinding met de cloudservices voor Storage in plaats van lokale emulators te gebruiken.

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "",
    "StorageConnection": "STORAGE-CONNECTION-STRING",
    "StorageAccountName": "STORAGE-ACCOUNT-NAME",
    "StorageContainerName": "STORAGE-CONTAINER-NAME",
    "ComputerVisionKey": "COMPUTER-VISION-KEY",
    "ComputerVisionEndPoint":  "COMPUTER-VISION-ENDPOINT",
    "CosmosDBConnection": "COSMOS-DB-CONNECTION-STRING"
  }
}

Azure Functions-app maken

U bent nu klaar om de toepassing te implementeren in Azure met behulp van een Visual Studio Code-extensie.

  1. Selecteer in Visual Studio Code Shift + Alt + A om de Azure Explorer te openen.

  2. Ga in de sectie Functions naar het abonnement, klik er met de rechtermuisknop op en selecteer Functie-app maken in Azure (geavanceerd).

  3. Gebruik de volgende tabel om de functieresource te maken.

    Instelling Waarde
    Naam Voer msdocsprocessimage of iets dergelijks in.
    Runtimestack Selecteer een Node.js LTS-versie .
    Programmeermodel Selecteer v4.
    Besturingssysteem Selecteer Linux.
    Resourcegroep Kies de msdocs-storage-function resourcegroep die u eerder hebt gemaakt.
    Locatie Selecteer dezelfde regio als uw resourcegroep.
    Plantype Selecteer Verbruik.
    Azure Storage Selecteer het opslagaccount dat u eerder hebt gemaakt.
    Application Insights Sla nu over.

  4. Azure richt de aangevraagde resources in. Dit duurt even voordat deze is voltooid.

Azure Functions-app implementeren

  1. Wanneer het vorige proces voor het maken van de resource is voltooid, klikt u met de rechtermuisknop op de nieuwe resource in de sectie Functions van de Azure-verkenner en selecteert u Implementeren naar functie-app.
  2. Als de vraag Weet u zeker dat u wilt implementeren... wordt gevraagd, selecteert u Implementeren.
  3. Wanneer het proces is voltooid, wordt een melding weergegeven die een keuze maakt, waaronder Uploadinstellingen. Selecteer deze optie. Hiermee kopieert u de waarden uit het bestand local.settings.json naar uw Azure Function-app. Als de melding is verdwenen voordat u deze kon selecteren, gaat u verder met de volgende sectie.

App-instellingen toevoegen voor Opslag en Computer Vision

Als u Instellingen voor uploaden hebt geselecteerd in de melding, slaat u deze sectie over.

De Azure-functie is geïmplementeerd, maar kan nog geen verbinding maken met ons opslagaccount en Computer Vision services. De juiste sleutels en verbindingsreeksen moeten eerst worden toegevoegd aan de configuratie-instellingen van de Azure Functions-app.

  1. Zoek uw resource in de sectie Functies van de Azure Explorer, klik met de rechtermuisknop op Toepassingsinstellingen en selecteer Nieuwe instelling toevoegen.

  2. Voer een nieuwe app-instelling in voor de volgende geheimen. Kopieer en plak de geheime waarden uit uw lokale project in het local.settings.json bestand.

    Instelling
    StorageConnection
    StorageAccountName
    StorageContainerName
    ComputerVisionKey
    ComputerVisionEndPoint
    CosmosDBConnection

Alle vereiste omgevingsvariabelen om onze Azure-functie te verbinden met verschillende services zijn nu aanwezig.

Een afbeelding uploaden naar Blob Storage

U bent nu klaar om onze toepassing te testen. U kunt een blob uploaden naar de container en vervolgens controleren of de tekst in de afbeelding is opgeslagen in Cosmos DB.

  1. Zoek in Azure Explorer in Visual Studio Code uw Opslagresource en vouw deze uit in de sectie Opslag .
  2. Vouw Blobcontainers uit en klik met de rechtermuisknop op de naam van de container en imagesselecteer bestanden uploaden.
  3. U vindt een aantal voorbeeldafbeeldingen in de map afbeeldingen in de hoofdmap van het downloadbare voorbeeldproject, of u kunt een van uw eigen afbeeldingen gebruiken.
  4. Accepteer voor de doelmap de standaardwaarde, /.
  5. Wacht totdat de bestanden zijn geüpload en in de container worden vermeld.

Tekstanalyse van afbeelding weergeven

Vervolgens kunt u controleren of het uploaden de Azure-functie heeft geactiveerd en of de tekst in de afbeelding correct is geanalyseerd en opgeslagen in Cosmos DB.

  1. Selecteer in Visual Studio Code, in Azure Explorer, onder het knooppunt Azure Cosmos DB, uw resource en vouw deze uit om uw database, StorageTutorial, te vinden.

  2. Vouw het databaseknooppunt uit.

  3. Er moet nu een analysecontainer beschikbaar zijn. Selecteer op het knooppunt Documenten van de container om een voorbeeld van de gegevens in de container te bekijken. U ziet een vermelding voor de verwerkte afbeeldingstekst van een geüpload bestand.

    {
    "id": "3cf7d6f0-a362-421e-9482-3020d7d1e689",
    "type": "image",
    "blobUrl": "https://msdocsstoragefunction.blob.core.windows.net/images/presentation.png",
    "blobSize": 1383614,
    "analysis": {  ... details removed for brevity ...
        "categories": [],
        "adult": {},
        "imageType": {},
        "tags": [],
        "description": {},
        "faces": [],
        "objects": [],
        "requestId": "eead3d60-9905-499c-99c5-23d084d9cac2",
        "metadata": {},
        "modelVersion": "2021-05-01"
    },
    "trigger": { 
        "blobTrigger": "images/presentation.png",
        "uri": "https://msdocsstorageaccount.blob.core.windows.net/images/presentation.png",
        "properties": {
            "lastModified": "2023-07-07T15:32:38+00:00",
            "createdOn": "2023-07-07T15:32:38+00:00",
            "metadata": {},
            ... removed for brevity ...
            "contentLength": 1383614,
            "contentType": "image/png",
            "accessTier": "Hot",
            "accessTierInferred": true,
        },
        "metadata": {},
        "name": "presentation.png"
    },
    "_rid": "YN1FAKcZojEFAAAAAAAAAA==",
    "_self": "dbs/YN1FAA==/colls/YN1FAKcZojE=/docs/YN1FAKcZojEFAAAAAAAAAA==/",
    "_etag": "\"7d00f2d3-0000-0700-0000-64a830210000\"",
    "_attachments": "attachments/",
    "_ts": 1688743969
}

Gefeliciteerd U hebt een afbeelding verwerkt die is geüpload naar Blob Storage met behulp van Azure Functions en Computer Vision.

Problemen oplossen

Gebruik de volgende tabel om problemen tijdens deze procedure op te lossen.

Probleem Oplossing
await computerVisionClient.read(url); fouten met Only absolute URLs are supported Zorg ervoor dat uw ComputerVisionEndPoint eindpunt de indeling heeft van https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/.

Resources opschonen

Als u deze toepassing niet meer gaat gebruiken, kunt u de resources verwijderen die u hebt gemaakt door de resourcegroep te verwijderen.

  1. Resourcegroepen selecteren in De Azure-verkenner
  2. Zoek en klik met de rechtermuisknop op de msdocs-storage-function resourcegroep in de lijst.
  3. Selecteer Verwijderen. Het proces voor het verwijderen van de resourcegroep kan enkele minuten duren.

Voorbeeldcode

Volgende stappen