Kurz JavaScriptu: Nahrání a analýza souboru pomocí Azure Functions a blob Storage

V tomto kurzu se dozvíte, jak nahrát obrázek do azure Blob Storage a zpracovat ho pomocí Azure Functions, Počítačové zpracování obrazu a Cosmos DB. Dozvíte se také, jak v rámci tohoto procesu implementovat triggery a vazby funkce Azure Functions. Tyto služby společně analyzují nahraný obrázek, který obsahuje text, extrahuje z něj text a pak text uloží do řádku databáze pro pozdější analýzu nebo jiné účely.

Azure Blob Storage je masivně škálovatelné řešení úložiště objektů Od Microsoftu pro cloud. Blob Storage je určená k ukládání obrázků a dokumentů, streamovaných mediálních souborů, správě zálohovacích a archivovaných dat a mnoho dalšího. Další informace o službě Blob Storage najdete na stránce s přehledem.

Azure Cosmos DB je plně spravovaná noSQL a relační databáze pro moderní vývoj aplikací.

Azure Functions je bezserverové počítačové řešení, které umožňuje psát a spouštět malé bloky kódu jako vysoce škálovatelné bezserverové funkce řízené událostmi. Další informace o službě Azure Functions najdete na stránce přehledu.

V tomto kurzu se naučíte:

Požadavky

• Účet Azure s aktivním předplatným. Vytvoření účtu zdarma
• Nainstalovaný Editor Visual Studio Code
  • Rozšíření Azure Functions pro nasazení a konfiguraci aplikace funkcí
  • Rozšíření Azure Storage
  • Rozšíření Azure Databases
  • Rozšíření Azure Resources

Vytvoření účtu úložiště a kontejneru

Prvním krokem je vytvoření účtu úložiště, který bude obsahovat nahraná data objektů blob, což v tomto scénáři budou obrázky obsahující text. Účet úložiště nabízí několik různých služeb, ale tento kurz využívá pouze službu Blob Storage.

Vytvoření služby Azure AI Vision

Dále vytvořte účet služby Azure AI Vision, který zpracuje nahrané soubory. Zpracování obrazu je součástí služeb Azure AI a nabízí různé funkce pro extrakci dat z obrázků. Další informace o službě Azure AI Vision najdete na stránce s přehledem.

Vytvoření účtu služby Cosmos DB

Vytvořte účet služby Cosmos DB pro ukládání analýzy souborů. Azure Cosmos DB je plně spravovaná noSQL a relační databáze pro moderní vývoj aplikací. Další informace o službě Cosmos DB a jejích rozhraních API podpory pro několik různých oborových databází.

I když tento kurz určuje rozhraní API při vytváření prostředku, vazby funkcí Azure pro Cosmos DB se konfigurují stejným způsobem pro všechna rozhraní API služby Cosmos DB.

Stažení a konfigurace ukázkového projektu

Kód pro funkci Azure, která se používá v tomto kurzu, najdete v tomto úložišti GitHubu JavaScript-v4 v podadresáři. Projekt můžete naklonovat také pomocí následujícího příkazu.

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

Ukázkový projekt provádí následující úlohy:

• Načte proměnné prostředí pro připojení k účtu úložiště, Počítačové zpracování obrazu a službě Cosmos DB.
• Přijme nahraný soubor jako parametr objektu blob.
• Analyzuje objekt blob pomocí služby Počítačové zpracování obrazu
• Vloží analyzovaný text obrázku jako objekt JSON do Cosmos DB pomocí výstupních vazeb.

Po stažení a otevření projektu je potřeba pochopit několik základních konceptů:

Triggery a vazby používané v tomto kurzu k urychlení procesu vývoje odebráním nutnosti psát kód pro připojení ke službám.

Trigger vstupního objektu blob úložiště

Kód, který určuje, že se funkce aktivuje při nahrání objektu blob do kontejneru obrázků . Funkce se aktivuje u libovolného názvu objektu blob včetně hierarchických složek.

// ...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 – Aktivační událost vstupu objektu blob úložiště se používá k vytvoření vazby funkce na událost nahrání ve službě Blob Storage. Trigger má dva požadované parametry:
  • path: Cesta, kterou trigger sleduje pro události. Cesta obsahuje názevimages kontejneru a nahrazení proměnné pro název objektu blob. Tento název objektu name blob se načte z vlastnosti.
  • {name}: Název nahraného objektu blob. Použití blob je název parametru objektu blob přicházejícího do funkce. Neměňte hodnotu blob.
  • connection: Připojovací řetězec účtu úložiště. Hodnota StorageConnection odpovídá názvu souboru local.settings.json při místním vývoji.

Aktivační událost služby Cosmos DB výstupu

Po dokončení funkce použije vrácený objekt jako data k vložení do 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'
    })
});

Pro kontejner v tomto článku jsou následující požadované vlastnosti:

• id: ID vyžadované pro vytvoření nového řádku službou Cosmos DB.

• /type: Klíč oddílu zadaný s kontejnerem byl vytvořen.

• output.cosmosDB – Aktivační událost výstupu cosmos DB slouží k vložení výsledku funkce do Cosmos DB.

  • connection: Připojovací řetězec účtu úložiště. Hodnota StorageConnection odpovídá názvu v local.settings.json souboru.
  • databaseName: Databáze Cosmos DB, ke které se chcete připojit.
  • containerName: Název tabulky, která zapíše analyzovanou textovou hodnotu obrázku vrácenou funkcí. Tabulka už musí existovat.

Kód funkce Azure

Následuje celý kód funkce.

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

Tento kód také načte základní konfigurační hodnoty z proměnných prostředí, jako je připojovací řetězec Blob Storage a klíč Počítačové zpracování obrazu. Tyto proměnné prostředí se po nasazení přidají do prostředí funkce Azure Functions.

Výchozí funkce také používá druhou metodu s názvem AnalyzeImage. Tento kód používá koncový bod adresy URL a klíč účtu Počítačové zpracování obrazu k vytvoření požadavku na Počítačové zpracování obrazu zpracování obrázku. Požadavek vrátí veškerý text zjištěný na obrázku. Tento text se zapíše do služby Cosmos DB pomocí odchozí vazby.

Konfigurace místního nastavení

Pokud chcete projekt spustit místně, zadejte do ./local.settings.json souboru proměnné prostředí. Vyplňte zástupné hodnoty hodnotami, které jste si uložili dříve při vytváření prostředků Azure.

I když se kód funkce Azure Functions spouští místně, připojuje se ke cloudovým službám pro Službu Storage, a ne k používání místních emulátorů.

{
  "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"
  }
}

Vytvoření aplikace Azure Functions

Teď jste připraveni nasadit aplikaci do Azure pomocí rozšíření Visual Studio Code.

1. V editoru Visual Studio Code výběrem klávesy Shift + Alt + A otevřete Průzkumníka Azure.

2. V části Functions vyhledejte předplatné a klikněte na ho pravým tlačítkem a vyberte Vytvořit aplikaci funkcí v Azure (Upřesnit).

3. K vytvoření prostředku funkce použijte následující tabulku.

   Nastavení	Hodnota
   Název	Zadejte msdocsprocessimage nebo něco podobného.
   Zásobník modulu runtime	Vyberte verzi Node.js LTS.
   Programovací model	Vyberte v4.
   Operační systém	Vyberte Linux.
   Skupina prostředků	msdocs-storage-function Zvolte skupinu prostředků, kterou jste vytvořili dříve.
   Místo	Vyberte stejnou oblast jako vaše skupina prostředků.
   Typ plánu	Vyberte Spotřeba.
   Azure Storage	Vyberte účet úložiště, který jste vytvořili dříve.
   Application Insights	Prozatím přeskočte.

4. Azure zřídí požadované prostředky, což bude chvíli trvat.

Nasazení aplikace Azure Functions

1. Po dokončení předchozího procesu vytváření prostředků klikněte pravým tlačítkem myši na nový prostředek v části Funkce v Průzkumníku Azure a vyberte Nasadit do aplikace funkcí.
2. Pokud se zobrazí dotaz , opravdu chcete nasadit... vyberte Nasadit.
3. Po dokončení procesu se zobrazí oznámení, které zvolí nastavení nahrávání. Tuto možnost vyberte. Tím se zkopírují hodnoty z vašeho souboru local.settings.json do aplikace Funkcí Azure. Pokud oznámení zmizelo dřív, než ho vyberete, pokračujte k další části.

Přidání nastavení aplikace pro Storage a Počítačové zpracování obrazu

Pokud jste v oznámení vybrali nastavení nahrávání, přeskočte tuto část.

Funkce Azure Functions se úspěšně nasadila, ale zatím se nemůže připojit k našemu účtu úložiště a Počítačové zpracování obrazu službám. Správné klíče a připojovací řetězec musí být nejprve přidány do nastavení konfigurace aplikace Azure Functions.

1. Najděte prostředek v části Functions v Průzkumníku Azure, klikněte pravým tlačítkem na Nastavení aplikace a vyberte Přidat nové nastavení.

2. Zadejte nové nastavení aplikace pro následující tajné kódy. Zkopírujte a vložte tajné hodnoty z místního projektu do local.settings.json souboru.

   Nastavení
   StorageConnection
   název_účtu_úložiště
   StorageContainerName
   ComputerVisionKey
   ComputerVisionEndPoint
   CosmosDBConnection

Všechny požadované proměnné prostředí pro připojení naší funkce Azure k různým službám jsou teď zavedené.

Nahrání obrázku do služby Blob Storage

Teď jste připraveni otestovat naši aplikaci. Do kontejneru můžete nahrát objekt blob a pak ověřit, že se text v obrázku uložil do Služby Cosmos DB.

1. V Průzkumníku Azure v editoru Visual Studio Code vyhledejte a rozbalte prostředek úložiště v části Úložiště .
2. Rozbalte kontejnery objektů blob a klikněte pravým tlačítkem na název kontejneru a imagespak vyberte Nahrát soubory.
3. Několik ukázkových obrázků, které jsou součástí složky obrázků, najdete v kořenovém adresáři ukázkového projektu ke stažení nebo můžete použít vlastní.
4. Pro cílový adresář přijměte výchozí hodnotu /.
5. Počkejte, až se soubory nahrají a zobrazí se v kontejneru.

Zobrazení analýzy textu obrázku

Dále můžete ověřit, že nahrávání aktivovalo funkci Azure Functions a že se text na obrázku analyzoval a uložil do cosmos DB správně.

1. V editoru Visual Studio Code v Průzkumníku Azure v uzlu Azure Cosmos DB vyberte prostředek a rozbalte ho, abyste našli svou databázi StorageTutorial.

2. Rozbalte uzel databáze.

3. Teď by měl být k dispozici kontejner analýzy. Výběrem uzlu Dokumenty kontejneru zobrazíte náhled dat uvnitř. Měla by se zobrazit položka pro zpracovaný text obrázku nahraného souboru.

   {
       "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
   }
   

Gratulujeme! Úspěšně jste zpracovali image, která se nahrála do služby Blob Storage pomocí služby Azure Functions a Počítačové zpracování obrazu.

Řešení problému

Při řešení problémů během tohoto postupu vám pomůže následující tabulka.

Bezpečnostní aspekty

Toto řešení, jako kurz pro začátečníky, neukazuje postupy zabezpečení ve výchozím nastavení. To je záměrné, abyste mohli být úspěšní při nasazování řešení. Dalším krokem po úspěšném nasazení je zabezpečení prostředků. Toto řešení používá tři služby Azure, z nichž každá má vlastní funkce zabezpečení a důležité informace pro konfiguraci zabezpečení ve výchozím nastavení:

• Azure Functions – Zabezpečení azure Functions
• Azure Storage – Doporučení zabezpečení pro úložiště objektů blob
• Azure Cognitive Services – Funkce zabezpečení služeb Azure AI

Ukázkový kód

• Ukázkový kód služby Azure Functions

Vyčištění prostředků

Pokud nebudete tuto aplikaci dál používat, můžete odstranit prostředky, které jste vytvořili odebráním skupiny prostředků.

1. Výběr skupin prostředků z Azure Exploreru
2. Najděte skupinu prostředků ze seznamu a klikněte na msdocs-storage-function ji pravým tlačítkem myši.
3. Vyberte Odstranit. Dokončení procesu odstranění skupiny prostředků může trvat několik minut.

Související obsah

• Vytvoření aplikace funkcí, která se připojuje ke službám Azure pomocí identit místo tajných kódů
• Náprava anonymního veřejného přístupu pro čtení dat objektů blob