Bagikan melalui

Tutorial JavaScript: Mengunggah dan menganalisis file dengan Azure Functions dan Blob Storage

  • Artikel

Dalam tutorial ini, Anda akan mempelajari cara mengunggah gambar untuk Azure Blob Storage dan memprosesnya menggunakan Azure Functions, Computer Vision, dan Cosmos DB. Anda juga akan mempelajari cara menerapkan pemicu dan pengikatan Azure Function sebagai bagian dari proses ini. Bersama-sama, layanan ini menganalisis gambar yang diunggah yang berisi teks, mengekstrak teks darinya, lalu menyimpan teks dalam baris database untuk analisis nanti atau tujuan lainnya.

Azure Blob Storage adalah solusi penyimpanan objek berskala besar Microsoft untuk cloud. Blob Storage dirancang untuk menyimpan gambar dan dokumen, streaming file media, mengelola data cadangan dan arsip, dan banyak lagi. Anda dapat membaca selengkapnya tentang Blob Storage di halaman gambaran umum.

Peringatan

Tutorial ini menggunakan penyimpanan yang dapat diakses publik untuk menyederhanakan proses untuk menyelesaikan tutorial ini. Akses publik anonim menghadirkan risiko keamanan. Pelajari cara memulihkan risiko ini.

Azure Cosmos DB adalah NoSQL yang dikelola sepenuhnya dan database relasional untuk pengembangan aplikasi modern.

Azure Functions adalah solusi komputer tanpa server yang memungkinkan Anda menulis dan menjalankan blok kecil kode sebagai fungsi berbasis peristiwa yang sangat scalable, tanpa server. Anda dapat membaca selengkapnya tentang Azure Functions di halaman gambaran umum.

Dalam tutorial ini, Anda akan belajar cara:

  • Mengunggah gambar dan file ke Blob Storage
  • Menggunakan pemicu Azure Function untuk memproses data yang diunggah ke Blob Storage
  • Menggunakan layanan Azure AI untuk menganalisis gambar
  • Menulis data ke Cosmos DB menggunakan pengikatan output Azure Function

Diagram arsitektur yang menunjukkan blob gambar ditambahkan ke Blob Storage, lalu dianalisis oleh Azure Function, dengan analisis dimasukkan ke dalam Cosmos DB.

Prasyarat

Membuat akun penyimpanan dan kontainer

Langkah pertama adalah membuat akun penyimpanan yang akan menyimpan data blob yang diunggah, yang akan menjadi gambar berisi teks dalam skenario ini. Akun penyimpanan menawarkan beberapa layanan yang berbeda, tetapi tutorial ini hanya menggunakan Blob Storage.

  1. Di Visual Studio Code, pilih Ctrl + Shift + P untuk membuka palet perintah.

  2. Cari Azure Storage: Buat Akun Penyimpanan (Tingkat Lanjut).

  3. Gunakan tabel berikut untuk membuat sumber daya penyimpanan.

    Pengaturan Nilai
    Nama Masukkan msdocsstoragefunction atau sesuatu yang mirip.
    Grup Sumber Daya Buat msdocs-storage-functiongrup sumber daya yang Anda buat sebelumnya.
    Hosting web statis Nomor.

  4. Di Visual Studio Code, pilih Shift + Alt + A untuk membuka panel Penjelajah Azure.

  5. Perluas bagian Penyimpanan, perluas simpul langganan Anda dan tunggu hingga sumber daya dibuat.

Buat kontainer di Kode Studio Visual

  1. Masih di Azure Explorer dengan sumber daya Penyimpanan baru Anda yang ditemukan, perluas sumber daya untuk melihat simpul.
  2. Klik kanan Kontainer Blob dan pilih Buat Kontainer Blob.
  3. Masukkan nama images. Ini membuat kontainer privat.

Ubah dari kontainer privat ke publik di portal Azure

Prosedur ini mengharapkan kontainer publik. Untuk mengubah konfigurasi tersebut, buat perubahan di portal Azure.

  1. Klik kanan pada sumber daya Storage di Azure Explorer dan pilih Buka di Portal.
  2. Di bagian Penyimpanan data, pilih Kontainer.
  3. Temukan kontainer Anda, images, dan pilih ... (elips) di akhir baris.
  4. Pilih Ubah tingkat akses.
  5. Pilih Blob (akses baca anonim untuk blob saja lalu pilih Ok.
  6. Kembali ke Visual Studio Code.

Mengambil string koneksi dengan Visual Studio Code

  1. Di Visual Studio Code, pilih Shift + Alt + A untuk membuka panel Penjelajah Azure.
  2. Klik kanan pada sumber daya penyimpanan Anda dan pilih Salin String Koneksi.
  3. tempelkan ini di suatu tempat untuk digunakan nanti.
  4. Catat juga nama msdocsstoragefunction akun penyimpanan untuk digunakan nanti.

Membuat layanan Azure AI Vision

Selanjutnya, buat akun layanan Azure AI Vision yang akan memproses file yang kami unggah. Visi adalah bagian dari layanan Azure AI dan menawarkan berbagai fitur untuk mengekstrak data dari gambar. Anda dapat mempelajari selengkapnya tentang Azure AI Vision di halaman gambaran umum.

  1. Di bilah pencarian di bagian atas portal, cari Computer dan pilih hasil berlabel Computer vision.

  2. Pada halaman Computer vision, pilih + Buat.

  3. Pada halaman Buat Computer Vision, masukkan nilai berikut ini:

    • Langganan: Pilih langganan yang Anda inginkan.
    • Grup Sumber Daya: Gunakan grup sumber daya msdocs-storage-function yang Anda buat sebelumnya.
    • Wilayah: Pilih wilayah terdekat.
    • Nama: Masukkan nama msdocscomputervision.
    • Tingkat Harga: Pilih Gratis jika tersedia, jika tidak, pilih Standar S1.
    • Centang kotak Pemberitahuan AI yang Bertanggung Jawab jika Anda menyetujui persyaratan

    Cuplikan layar menunjukkan cara membuat layanan Computer Vision baru.

  4. Pilih Tinjau + Buat di bagian bawah. Azure membutuhkan waktu sejenak untuk memvalidasi informasi yang Anda masukkan. Setelah pengaturan divalidasi, pilih Buat dan Azure akan mulai memprovisikan layanan Computer Vision, mungkin memakan waktu sejenak.

  5. Setelah operasi selesai, pilih Buka Sumber Daya.

Mengambil kunci Computer Vision

Selanjutnya, kita perlu menemukan kunci rahasia dan URL titik akhir untuk digunakan layanan Computer Vision di aplikasi Azure Function.

  1. Pada halaman gambaran umum Computer Vision, pilih Kunci dan Titik Akhir.

  2. Pada halaman Kunci dan Titik Akhir , salin nilai Kunci 1 dan nilai Titik Akhir dan tempelkan di suatu tempat untuk digunakan nanti. Titik akhir tersebut harus menggunakan format https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/

Cuplikan layar yang menunjukkan cara mengambil Kunci dan Titik Akhir URL untuk layanan Computer Vision.

Membuat akun layanan Cosmos DB

Buat akun layanan Cosmos DB untuk menyimpan analisis file. Azure Cosmos DB adalah NoSQL dan database relasional yang dikelola sepenuhnya untuk pengembangan aplikasi modern. Anda dapat mempelajari lebih lanjut tentang Cosmos DB dan API dukungannya untuk beberapa database industri yang berbeda.

Meskipun tutorial ini menentukan API saat Anda membuat sumber daya, pengikatan Azure Function untuk Cosmos DB dikonfigurasi dengan cara yang sama untuk semua API Cosmos DB.

  1. Di bilah pencarian di bagian atas portal, cari Azure Cosmos DB dan pilih hasilnya.

  2. Pada halaman Azure Cosmos DB , pilih + Buat. Pilih Azure Cosmos DB for NoSQL dari daftar pilihan API.

  3. Pada halaman Buat Cosmos DB , masukkan nilai berikut ini:

    • Langganan: Pilih langganan yang Anda inginkan.
    • Grup Sumber Daya: Gunakan grup sumber daya msdocs-storage-function yang Anda buat sebelumnya.
    • Wilayah: Pilih wilayah yang sama dengan grup sumber daya Anda.
    • Nama: Masukkan nama msdocscosmosdb.
    • Tingkat Harga: Pilih Gratis jika tersedia, jika tidak, pilih Standar S1.

  4. Pilih Tinjau + Buat di bagian bawah. Azure akan membutuhkan waktu sejenak untuk memvalidasi informasi yang Anda masukkan. Setelah pengaturan divalidasi, pilih Buat dan Azure akan mulai memprovisikan layanan Computer Vision, mungkin memakan waktu sejenak.

  5. Setelah operasi selesai, pilih Buka Sumber Daya.

  6. Pilih Data Explorer lalu pilih Kontainer Baru.

  7. Buat database dan kontainer baru dengan pengaturan berikut:

    • Buat id database baru: StorageTutorial.
    • Masukkan id kontainer baru: analysis.
    • Masukkan kunci partisi: /type.

  8. Biarkan pengaturan default lainnya dan pilih OK.

Mendapatkan string koneksi Cosmos DB

Dapatkan string koneksi untuk akun layanan Cosmos DB untuk digunakan di aplikasi Azure Function kami.

  1. Pada halaman gambaran umum Cosmos DB , pilih Kunci.

  2. Pada halaman Kunci , salin String Koneksi Utama untuk digunakan nanti.

Mengunduh dan mengonfigurasi proyek sampel

Kode untuk Fungsi Azure yang digunakan dalam tutorial ini dapat ditemukan di repositori GitHub ini, di JavaScript-v4 subdirektori. Anda juga dapat mengkloning proyek menggunakan perintah di bawah ini.

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

Kode proyek sampel tersebut menyelesaikan tugas-tugas berikut:

  • Mengambil variabel lingkungan untuk terhubung ke akun penyimpanan, Computer Vision, dan layanan Cosmos DB
  • Menerima file yang diunggah sebagai parameter blob
  • Menganalisis blob menggunakan layanan Computer Vision
  • Menyisipkan teks gambar yang dianalisis, sebagai objek JSON, ke Cosmos DB menggunakan pengikatan output

Setelah Anda mengunduh dan membuka proyek, ada beberapa konsep penting yang perlu dipahami:

Konsep Tujuan
Fungsi Fungsi Azure didefinisikan oleh kode fungsi dan pengikatan. Ini ada di ./src/functions/process-blobs.js.
Pemicu dan pengikatan Pemicu dan pengikatan menunjukkan bahwa data, yang diharapkan masuk atau keluar dari fungsi dan layanan mana yang akan mengirim atau menerima data tersebut.

Pemicu dan pengikatan yang digunakan dalam tutorial ini untuk mempercepat proses pengembangan dengan menghapus kebutuhan untuk menulis kode untuk terhubung ke layanan.

Pemicu Blob Penyimpanan Input

Kode, yang menentukan bahwa fungsi dipicu ketika blob diunggah ke kontainer gambar mengikuti. Fungsi ini dipicu pada nama blob apa pun termasuk folder hierarkis.


// ...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 - Pemicu input Blob Penyimpanan digunakan untuk mengikat fungsi ke peristiwa unggahan di Blob Storage. Pemicu memiliki dua parameter yang diperlukan:
    • path: Jalur yang diwaspadai pemicu untuk peristiwa. Jalur ini mencakup nama kontainer,images, dan substitusi variabel untuk nama blob. Nama blob ini diambil dari name properti.
    • {name}: Nama blob yang diunggah. Penggunaan blob adalah nama parameter untuk blob yang masuk ke fungsi. Jangan ubah nilai iniblob.
    • connection: String koneksi akun penyimpanan. Nilai StorageConnection cocok dengan nama dalam local.settings.json file saat mengembangkan secara lokal.

Pemicu Output Cosmos DB

Ketika fungsi selesai, fungsi menggunakan objek yang dikembalikan sebagai data untuk dimasukkan ke 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'
    })
});

Untuk kontainer dalam artikel ini, properti yang diperlukan berikut ini adalah:

  • id: ID yang diperlukan agar Cosmos DB membuat baris baru.

  • /type: kunci partisi yang ditentukan dengan kontainer dibuat.

  • output.cosmosDB - Pemicu output Cosmos DB digunakan untuk menyisipkan hasil fungsi ke Cosmos DB.

    • connection: String koneksi akun penyimpanan. Nilai StorageConnection cocok dengan nama dalam local.settings.json file.
    • databaseName: Database Cosmos DB yang akan disambungkan.
    • containerName: Nama tabel untuk menulis nilai teks gambar yang diurai, yang dimunculkan oleh fungsi. Tabel harus sudah ada.

Kode Fungsi Azure

Berikut ini adalah kode fungsi lengkap.

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

Kode ini juga mengambil nilai konfigurasi penting dari variabel lingkungan, seperti string koneksi Blob Storage dan kunci Computer Vision. Variabel lingkungan ini ditambahkan ke lingkungan Azure Function setelah disebarkan.

Fungsi default juga menggunakan metode kedua yang disebut AnalyzeImage. Kode ini menggunakan Titik Akhir URL dan Kunci akun Computer Vision untuk membuat permintaan ke Computer Vision agar memproses gambar. Permintaan mengembalikan semua teks yang ditemukan dalam gambar. Teks ini ditulis ke Cosmos DB, menggunakan pengikatan keluar.

Mengonfigurasi pengaturan lokal

Untuk menjalankan proyek secara lokal, masukkan variabel lingkungan dalam ./local.settings.json file. Isi nilai tempat penampung dengan nilai yang Anda simpan sebelumnya saat membuat sumber daya Azure.

Meskipun kode Azure Function berjalan secara lokal, kode tersebut terhubung ke layanan berbasis cloud untuk Storage, daripada menggunakan emulator lokal apa pun.

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

Buat aplikasi Azure Functions

Anda sekarang siap untuk menyebarkan aplikasi ke Azure menggunakan ekstensi Visual Studio Code.

  1. Di Visual Studio Code, pilih Shift + Alt + A untuk membuka panel Azure explorer.

  2. Di bagian Fungsi , temukan dan klik kanan langganan, dan pilih Buat Aplikasi Fungsi di Azure (Tingkat Lanjut).

  3. Gunakan tabel berikut untuk membuat sumber daya Fungsi.

    Pengaturan Nilai
    Nama Masukkan msdocsprocessimage atau yang serupa.
    Tumpukan runtime Pilih versi Node.js LTS.
    Model pemrograman Pilih v4.
    OS Pilih Linux.
    Grup Sumber Daya Pilih msdocs-storage-function grup sumber daya yang Anda buat sebelumnya.
    Lokasi Pilih wilayah yang sama dengan grup sumber daya Anda.
    Jenis Paket Pilih Konsumsi.
    Azure Storage Pilih akun penyimpanan yang Anda buat sebelumnya.
    Application Insights Lewati untuk sekarang.

  4. Azure menyediakan sumber daya yang diminta, yang akan memakan waktu beberapa saat hingga selesai.

Sebarkan aplikasi Azure Functions

  1. Saat proses pembuatan sumber daya sebelumnya selesai, klik kanan sumber daya baru di bagian Fungsi Azure explorer, dan pilih Sebarkan ke Aplikasi Fungsi.
  2. Jika ditanya apakah Anda yakin ingin menyebarkan..., pilih Sebarkan.
  3. Saat proses selesai, pemberitahuan muncul yang merupakan pilihan, yang mencakup pengaturan Unggah. Pilih opsi tersebut. Ini menyalin nilai dari file local.settings.json ke aplikasi Azure Function Anda. Jika pemberitahuan menghilang sebelum Anda dapat memilihnya, lanjutkan ke bagian berikutnya.

Tambahkan pengaturan aplikasi untuk Storage dan Computer Vision

Jika Anda memilih pengaturan Pengunggahan di pemberitahuan, lewati bagian ini.

Azure Function berhasil disebarkan, tetapi belum dapat terhubung ke akun Penyimpanan dan layanan Computer Vision. Kunci dan string koneksi yang benar harus ditambahkan terlebih dahulu ke pengaturan konfigurasi aplikasi Azure Functions.

  1. Temukan sumber daya Anda di bagian Fungsi penjelajah Azure, klik kanan Pengaturan Aplikasi, dan pilih Tambahkan Pengaturan Baru.

  2. Masukkan pengaturan aplikasi baru untuk rahasia berikut. Salin dan tempel nilai rahasia Anda dari proyek lokal Anda dalam local.settings.json file.

    Pengaturan
    StorageConnection
    StorageAccountName
    StorageContainerName
    ComputerVisionKey
    ComputerVisionEndPoint
    CosmosDBConnection

Semua variabel lingkungan yang diperlukan untuk menghubungkan fungsi Azure ke layanan yang berbeda sekarang telah siap.

Mengunggah gambar ke Blob Storage

Sekarang Anda siap untuk menguji aplikasi! Anda dapat mengunggah blob ke kontainer, lalu memverifikasi bahwa teks dalam gambar disimpan ke Cosmos DB.

  1. Di penjelajah Azure di Visual Studio Code, temukan dan perluas sumber daya Storage Anda di bagian Storage.
  2. Perluas Kontainer Blob dan klik kanan nama kontainer Anda, images, lalu pilih file Upload.
  3. Anda dapat menemukan beberapa gambar sampel yang disertakan dalam folder gambar di akar proyek sampel yang dapat diunduh, atau Anda dapat menggunakan salah satu gambar Anda sendiri.
  4. Untuk direktori Tujuan, terima nilai default, /.
  5. Tunggu hingga file diunggah dan tercantum dalam kontainer.

Lihat analisis teks gambar

Selanjutnya, Anda dapat memverifikasi bahwa unggahan memicu Azure Function, dan bahwa teks dalam gambar dianalisis dan disimpan ke Cosmos DB dengan benar.

  1. Di Visual Studio Code, di Azure Explorer, di bawah simpul Azure Cosmos DB, pilih sumber daya Anda, dan perluas untuk menemukan database Anda, StorageTutorial.

  2. Perluas simpul database.

  3. Kontainer analisis sekarang harus tersedia. Pilih simpul Dokumen kontainer untuk mempratinjau data di dalamnya. Anda akan melihat entri untuk teks gambar yang diproses dari file yang diunggah.

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

Selamat! Anda berhasil memproses gambar yang diunggah ke Blob Storage menggunakan Azure Functions dan Computer Vision.

Pemecahan Masalah

Gunakan tabel berikut untuk membantu memecahkan masalah selama prosedur ini.

Masalah Resolusi
await computerVisionClient.read(url); kesalahan dengan Only absolute URLs are supported Pastikan ComputerVisionEndPoint titik akhir Anda dalam format https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/.

Membersihkan sumber daya

Jika Anda tidak ingin terus menggunakan aplikasi ini, Anda dapat menghapus sumber daya yang Anda buat dengan menghapus grup sumber daya.

  1. Pilih Grup sumber daya dari penjelajah Azure
  2. Temukan dan klik kanan msdocs-storage-function grup sumber daya dari daftar.
  3. Pilih Hapus. Proses untuk menghapus grup sumber daya mungkin memerlukan waktu beberapa menit untuk diselesaikan.

Kode sampel

Langkah berikutnya