Share via

JavaScript 자습서: Azure Functions 및 Blob Storage를 사용하여 파일 업로드 및 분석

  • 아티클

이 자습서에서는 Azure Functions, Computer Vision 및 Cosmos DB를 사용하여 Azure Blob Storage에 이미지를 업로드하고 처리하는 방법을 알아봅니다. 이 프로세스의 일부로 Azure Function 트리거 및 바인딩을 구현하는 방법도 알아봅니다. 이러한 서비스는 텍스트가 들어 있는 업로드된 이미지를 분석하고 텍스트를 추출한 다음, 나중에 분석하거나 기타 목적으로 사용할 수 있도록 데이터베이스 행에 텍스트를 저장합니다.

Azure Blob Storage는 클라우드를 위한 Microsoft의 대규모로 확장 가능한 개체 스토리지 솔루션입니다. Blob Storage는 이미지 및 문서 저장, 미디어 파일 스트리밍, 백업 및 보관 데이터 관리 등을 위해 설계되었습니다. 개요 페이지에서 Blob Storage에 대해 자세히 알아볼 수 있습니다.

Warning

이 자습서에서는 프로세스를 간소화하기 위해 공개적으로 액세스할 수 있는 스토리지를 사용하여 이 자습서를 완료합니다. 익명 퍼블릭 액세스는 보안 위험을 초래합니다. 이러한 위험을 해결하는 방법에 대해 알아봅니다.

Azure Cosmos DB는 최신 앱 개발을 위한 완전 관리형 NoSQL 및 관계형 데이터베이스입니다.

Azure Functions는 확장성이 뛰어난 서버리스 이벤트 기반 함수로 소규모 코드 블록을 작성하고 실행할 수 있는 서버리스 컴퓨터 솔루션입니다. 개요 페이지에서 Azure Functions에 대해 자세히 알아볼 수 있습니다.

이 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

  • Blob Storage에 이미지 및 파일 업로드
  • Azure Function 이벤트 트리거를 사용하여 Blob Storage에 업로드된 데이터 처리
  • Azure AI 서비스를 사용하여 이미지 분석
  • Azure Function 출력 바인딩을 사용하여 Cosmos DB에 데이터 쓰기

Architectural diagram showing an image blob is added to Blob Storage, then analyzed by an Azure Function, with the analysis inserted into a Cosmos DB.

필수 조건

스토리지 계정 및 컨테이너 만들기

첫 번째 단계는 업로드된 Blob 데이터를 보관할 스토리지 계정을 만드는 것인데, 이 시나리오에서는 텍스트를 포함하는 이미지가 될 것입니다. 스토리지 계정은 여러 가지 서비스를 제공하지만, 이 자습서에서는 Blob Storage만 사용합니다.

  1. Visual Studio Code에서 + + 를 선택하여 명령 팔레트를 엽니다.

  2. Azure Storage: Storage 계정 만들기(고급)를 검색합니다.

  3. 다음 표를 사용하여 Storage 리소스를 만듭니다.

    설정 값
    이름 msdocsstoragefunction 또는 이와 비슷한 이름을 입력합니다.
    리소스 그룹 이전에 만든 msdocs-storage-function 리소스 그룹을 만듭니다.
    정적 웹 호스팅 아니요.

  4. Visual Studio Code에서 Shift + Alt + A를 선택하여 Azure 탐색기를 엽니다.

  5. Storage 섹션, 구독 노드를 차례로 펼친 다음, 리소스가 만들어질 때까지 기다립니다.

Visual Studio Code에서 컨테이너 만들기

  1. 여전히 새 Storage 리소스가 있는 Azure 탐색기에서 리소스를 펼쳐 노드를 확인합니다.
  2. 마우스 오른쪽 단추로 Blob 컨테이너를 클릭하고, Blob 컨테이너 만들기를 선택합니다.
  3. images이라는 이름을 입력합니다. 이렇게 하면 프라이빗 컨테이너가 만들어집니다.

Azure Portal에서 프라이빗 컨테이너에서 퍼블릭 컨테이너로 변경

이 절차에는 퍼블릭 컨테이너가 필요합니다. 해당 구성을 변경하려면 Azure Portal에서 변경합니다.

  1. Azure 탐색기에서 마우스 오른쪽 단추로 [Storage 리소스]를 클릭하고. 포털에서 열기를 선택합니다.
  2. 데이터 스토리지 섹션에서 컨테이너를 선택합니다.
  3. 컨테이너(images)를 찾고, 줄 끝에 있는 ...(줄임표)를 선택합니다.
  4. 액세스 수준 변경을 선택합니다.
  5. Blob(Blob에 대한 익명 읽기 권한만 해당)을 선택한 다음, 확인을 선택합니다.
  6. Visual Studio Code로 돌아갑니다.

Visual Studio Code에서 연결 문자열 검색

  1. Visual Studio Code에서 Shift + Alt + A를 선택하여 Azure 탐색기를 엽니다.
  2. 마우스 오른쪽 단추로 스토리지 리소스를 클릭하고, 연결 문자열 복사를 선택합니다.
  3. 나중에 사용할 수 있도록 다른 위치에 붙여넣습니다.
  4. 나중에 사용할 수 있도록 스토리지 계정 이름 msdocsstoragefunction을 적어 둡니다.

Azure AI Vision 서비스 만들기

다음으로, 업로드된 파일을 처리할 Azure AI Vision 서비스 계정을 만듭니다. Vision은 Azure AI 서비스의 일부이며, 이미지에서 데이터를 추출하는 다양한 기능을 제공합니다. 개요 페이지에서 Azure AI Vision에 대해 자세히 알아볼 수 있습니다.

  1. 포털 위쪽의 검색 창에서 Computer를 검색하고, Computer Vision이라는 레이블이 달린 결과를 선택합니다.

  2. Computer Vision 페이지에서 + 만들기를 선택합니다.

  3. Computer Vision 만들기 페이지에서 다음 값을 입력합니다.

    • 구독: 원하는 구독을 선택합니다.
    • 리소스 그룹: 앞에서 만든 msdocs-storage-function 리소스 그룹을 사용합니다.
    • 지역: 가장 가까운 지역을 선택합니다.
    • 이름: 이름으로 msdocscomputervision을 입력합니다.
    • 가격 책정 계층: 사용 가능하면 무료를 선택하고, 그렇지 않으면 표준 S1을 선택합니다.
    • 약관에 동의하는 경우 책임 있는 AI 알림 확인란을 선택합니다.

    A screenshot showing how to create a new Computer Vision service.

  4. 맨 아래에서 검토 + 만들기를 선택합니다. Azure가 입력된 정보의 유효성을 잠시 검사합니다. 설정의 유효성 검사가 완료되면 만들기를 선택합니다. 그러면 Azure가 Computer Vision 서비스 프로비저닝을 시작합니다. 완료될 때까지 다소 시간이 걸릴 수 있습니다.

  5. 작업이 완료되면 리소스 그룹으로 이동을 선택합니다.

Computer Vision 키 검색

다음으로, Azure Function 앱에서 사용할 Computer Vision 서비스에 대한 비밀 키 및 엔드포인트 URL을 찾아야 합니다.

  1. Computer Vision 개요 페이지에서 키 및 엔드포인트를 선택합니다.

  2. 나중에 사용할 수 있도록 키 및 엔드포인트 페이지에서 키 1 값과 엔드포인트 값을 복사하여 다른 곳에 붙여넣습니다. 엔드포인트는 https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/ 형식이어야 합니다.

A screenshot showing how to retrieve the Keys and URL Endpoint for a Computer Vision service.

Cosmos DB 서비스 계정 만들기

파일 분석을 저장할 Cosmos DB 서비스 계정을 만듭니다. Azure Cosmos DB는 최신 앱 개발을 위한 완전 관리형 NoSQL 및 관계형 데이터베이스입니다. 여러 업계 데이터베이스에 대한 Cosmos DB 및 지원 API에 대해 자세히 알아볼 수 있습니다.

이 자습서에서는 리소스를 만들 때 API를 지정하지만 Cosmos DB에 대한 Azure Function 바인딩은 모든 Cosmos DB API에 대해 동일한 방식으로 구성됩니다.

  1. 포털 위쪽의 검색 창에서 Azure Cosmos DB를 검색하고 결과를 선택합니다.

  2. Azure Cosmos DB 페이지에서 + 만들기를 선택합니다. API 선택 목록에서 용 Azure Cosmos DB를 선택합니다.

  3. 만들기 페이지에서 다음 값을 입력합니다.

    • 구독: 원하는 구독을 선택합니다.
    • 리소스 그룹: 앞에서 만든 msdocs-storage-function 리소스 그룹을 사용합니다.
    • 지역: 리소스 그룹과 동일한 지역을 선택합니다.
    • 이름: 이름으로 msdocscosmosdb을 입력합니다.
    • 가격 책정 계층: 사용 가능하면 무료를 선택하고, 그렇지 않으면 표준 S1을 선택합니다.

  4. 맨 아래에서 검토 + 만들기를 선택합니다. Azure가 입력된 정보의 유효성을 잠시 검사합니다. 설정의 유효성 검사가 완료되면 만들기를 선택합니다. 그러면 Azure가 Computer Vision 서비스 프로비저닝을 시작합니다. 완료될 때까지 다소 시간이 걸릴 수 있습니다.

  5. 작업이 완료되면 리소스 그룹으로 이동을 선택합니다.

  6. 데이터 탐색기, 새 컨테이너를 차례로 선택합니다.

  7. 다음 설정을 사용하여 새 데이터베이스 및 컨테이너를 만듭니다.

    • 새 데이터베이스 ID 만들기: StorageTutorial
    • 새 컨테이너 ID 입력:analysis.
    • 파티션 키 입력: /type.

  8. 나머지는 기본 설정으로 두고 확인을 선택합니다.

Cosmos DB 연결 문자열 가져오기

Azure Function 앱에서 사용할 Cosmos DB 서비스 계정에 대한 연결 문자열을 가져옵니다.

  1. Cosmos DB 개요 페이지에서 키를 선택합니다.

  2. 나중에 사용할 수 있게 키 페이지에서 기본 연결 문자열을 복사합니다.

샘플 프로젝트 다운로드 및 구성

이 자습서에서 사용되는 Azure Function용 코드는 JavaScript-v4 하위 디렉터리의 이 GitHub 리포지토리에서 확인할 수 있습니다. 아래 명령을 사용하여 프로젝트를 복제할 수도 있습니다.

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

샘플 프로젝트에서 수행하는 작업은 다음과 같습니다.

  • 환경 변수를 검색하여 스토리지 계정, Computer Vision 및 Cosmos DB 서비스에 연결
  • 업로드된 파일을 Blob 매개 변수로 수락
  • Computer Vision 서비스를 사용하여 Blob 분석
  • 출력 바인딩을 사용하여 분석된 이미지 텍스트를 JSON 개체로 Cosmos DB에 삽입

프로젝트를 다운로드하여 열면 다음과 같은 이해해야 하는 몇 가지 필수 개념이 있습니다.

개념 목적
함수 Azure Function은 함수 코드와 바인딩 모두에서 정의됩니다. ./src/functions/process-blobs.js에 있습니다.
트리거 및 바인딩 트리거 및 바인딩은 함수 내/외부에 필요한 데이터 및 해당 데이터를 보내거나 받을 서비스를 나타냅니다.

이 자습서에서는 개발 프로세스를 처리하는 데 트리거 및 바인딩을 사용되었으므로 서비스에 연결할 코드를 작성하지 않아도 됩니다.

Storage Blob 입력 트리거

Blob이 이미지 컨테이너에 업로드될 때 함수가 트리거되도록 지정하는 코드는 다음과 같습니다. 함수는 계층 구조 폴더를 포함한 모든 Blob 이름에서 트리거됩니다.


// ...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 - Storage Blob 입력 트리거는 Blob Storage의 업로드 이벤트에 함수를 바인딩하는 데 사용됩니다. 트리거에는 다음과 같은 두 가지 필수 매개 변수가 있습니다.
    • path: 트리거에서 이벤트를 감시하는 경로입니다. 경로에는 컨테이너 이름(images) 및 Blob 이름에 대한 변수 대체가 포함됩니다. 이 Blob 이름은 name 속성에서 검색됩니다.
    • {name}: 업로드된 Blob의 이름입니다. blob이 함수에 들어오는 Blob에 대한 매개 변수 이름으로 사용됩니다. blob 값을 변경하지 마세요.
    • connection: 스토리지 계정의 연결 문자열입니다. 값 StorageConnection은 로컬로 개발할 때 local.settings.json 파일의 이름과 일치합니다.

Cosmos DB 출력 트리거

함수가 완료되면 해당 함수는 반환된 개체를 데이터로 사용하여 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'
    })
});

이 문서의 컨테이너에는 다음과 같은 필수 속성이 있습니다.

  • id: Cosmos DB가 새 행을 만드는 데 필요한 ID입니다.

  • /type: 컨테이너로 지정된 파티션 키가 만들어졌습니다.

  • output.cosmosDB - Cosmos DB 출력 트리거는 함수의 결과를 Cosmos DB에 삽입하는 데 사용됩니다.

    • connection: 스토리지 계정의 연결 문자열입니다. StorageConnection 값은 local.settings.json 파일의 이름과 일치합니다.
    • databaseName: 연결할 Cosmos DB 데이터베이스입니다.
    • containerName: 함수에서 반환한 구문 분석된 이미지 텍스트 값을 쓸 테이블의 이름입니다. 테이블이 이미 존재해야 합니다.

Azure Function 코드

다음은 전체 함수 코드입니다.

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

또한 이 코드는 환경 변수에서 Blob Storage 연결 문자열 및 Computer Vision 키와 같은 필수 구성 값을 검색합니다. 이러한 환경 변수는 배포된 후 Azure Function 환경에 추가됩니다.

기본 함수는 AnalyzeImage라는 두 번째 메서드도 사용합니다. 이 코드에서는 Computer Vision 계정의 URL 엔드포인트 및 키를 사용하여 이미지를 처리하도록 Computer Vision에 요청합니다. 요청은 이미지에서 검색된 모든 텍스트를 반환합니다. 이 텍스트는 아웃바운드 바인딩을 사용하여 Cosmos DB에 씁니다.

로컬 설정 구성

프로젝트를 로컬로 실행하려면 환경 변수를 ./local.settings.json 파일에 입력합니다. Azure 리소스를 만들 때 자리 표시자 값을 이전에 저장한 값으로 채웁니다.

Azure Function 코드는 로컬로 실행되지만, 로컬 에뮬레이터를 사용하는 대신 Storage에 대한 클라우드 기반 서비스에 연결됩니다.

{
  "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 앱 만들기

이제 Visual Studio Code 확장을 사용하여 애플리케이션을 Azure에 배포할 준비가 되었습니다.

  1. Visual Studio Code에서 Shift + Alt + A를 선택하여 Azure 탐색기를 엽니다.

  2. Functions 섹션에서 구독을 찾아 마우스 오른쪽 단추로 클릭하고, Azure에서 함수 앱 만들기(고급)를 선택합니다.

  3. 다음 표를 사용하여 Function 리소스를 만듭니다.

    설정 값
    이름 msdocsprocessimage 또는 이와 비슷한 이름을 입력합니다.
    런타임 스택 Node.js LTS 버전을 선택합니다.
    프로그래밍 모델 v4를 선택합니다.
    OS Linux를 선택합니다.
    리소스 그룹 이전에 만든 msdocs-storage-function 리소스 그룹을 선택합니다.
    위치 리소스 그룹과 동일한 지역을 선택합니다.
    계획 유형 사용량을 선택합니다.
    Azure Storage 이전에 만든 스토리지 계정을 선택합니다.
    Application Insights 지금은 건너뜁니다.

  4. Azure에서 요청된 리소스를 프로비전합니다. 이 경우 완료하는 데 몇 분 정도 걸립니다.

Azure Functions 앱 배포

  1. 이전 리소스 만들기 프로세스가 완료되면 Azure 탐색기의 Functions 섹션에서 마우스 오른쪽 단추로 새 리소스를 클릭하고 함수 앱에 배포를 선택합니다.
  2. ...배포하시겠나요?라는 메시지가 표시되면 배포를 선택합니다.
  3. 프로세스가 완료되면 업로드 설정을 포함한 선택 항목에 대한 알림이 표시됩니다. 해당 옵션을 선택합니다. 그러면 local.settings.json 파일의 값이 Azure Function 앱에 복사됩니다. 알림을 선택하기 전에 알림이 사라진 경우 다음 섹션으로 계속 진행합니다.

Storage 및 Computer Vision에 대한 앱 설정 추가

알림에서 업로드 설정을 선택한 경우 이 섹션을 건너뛰세요.

Azure Function이 성공적으로 배포되었지만 아직 Storage 계정 및 Computer Vision 서비스에 연결할 수 없습니다. 먼저 올바른 키와 연결 문자열을 Azure Functions 앱의 구성 설정에 추가해야 합니다.

  1. Azure 탐색기의 Functions 섹션에서 리소스를 찾고, 마우스 오른쪽 단추로 애플리케이션 설정을 클릭하고, 새 설정 추가를 선택합니다.

  2. 다음 비밀에 대한 새 앱 설정을 입력합니다. 로컬 프로젝트의 비밀 값을 복사하여 local.settings.json 파일에 붙여넣습니다.

    설정
    StorageConnection
    StorageAccountName
    StorageContainerName
    ComputerVisionKey
    ComputerVisionEndPoint
    CosmosDBConnection

Azure 함수를 다른 서비스에 연결하는 데 필요한 모든 환경 변수가 적용되었습니다.

Blob Storage에 이미지 업로드

이제 애플리케이션을 테스트할 준비가 되었습니다! 컨테이너에 Blob을 업로드한 다음, 이미지의 텍스트가 Cosmos DB에 저장되었는지 확인할 수 있습니다.

  1. Visual Studio Code의 Azure 탐색기에 있는 Storage 섹션에서 Storage 리소스를 찾아서 펼칩니다.
  2. Blob 컨테이너를 펼치고, 마우스 오른쪽 단추로 컨테이너 이름(images)을 클릭한 다음, 파일 업로드를 선택합니다.
  3. 다운로드 가능한 샘플 프로젝트의 루트에 있는 images 폴더에 포함된 샘플 이미지를 찾아볼 수도 있고 사용자 고유의 이미지를 사용할 수도 있습니다.
  4. 대상 디렉터리에 대해 기본값(/)을 적용합니다.
  5. 파일이 업로드되고 컨테이너에 나열될 때까지 기다립니다.

이미지의 텍스트 분석 보기

다음으로, 업로드가 Azure Function을 트리거했는지, 이미지의 텍스트가 분석되어 Cosmos DB에 제대로 저장되었는지 확인할 수 있습니다.

  1. Visual Studio Code에서 Azure Explorer의 Azure Cosmos DB 노드 아래에 있는 리소스를 선택하고 확장하여 데이터베이스 StorageTutorial을 찾습니다.

  2. 데이터베이스 노드를 확장합니다.

  3. 이제 분석 컨테이너를 사용할 수 있어야 합니다. 컨테이너의 문서 노드를 선택하여 내부 데이터를 미리 봅니다. 업로드된 파일의 처리된 이미지 텍스트에 대한 항목이 표시됩니다.

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

축하합니다! Azure Functions 및 Computer Vision을 사용하여 Blob Storage에 업로드된 이미지를 처리하는 데 성공했습니다.

문제 해결

이 절차 중에 문제를 해결하려면 다음 표를 사용합니다.

문제 해결 방법
await computerVisionClient.read(url); 오류(Only absolute URLs are supported) ComputerVisionEndPoint 엔드포인트가 https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/ 형식인지 확인합니다.

리소스 정리

이 애플리케이션을 더 이상 사용하지 않으려는 경우 리소스 그룹을 제거하여 앞에서 만든 리소스를 삭제할 수 있습니다.

  1. Azure 탐색기에서 리소스 그룹을 선택합니다.
  2. 목록에서 msdocs-storage-function 리소스 그룹을 찾아 마우스 오른쪽 단추로 클릭합니다.
  3. 삭제를 선택합니다. 리소스 그룹을 삭제하는 프로세스를 완료하는 데 몇 분 정도 걸릴 수 있습니다.

샘플 코드

다음 단계