연습 - Azure Storage 계정에 이미지 업로드 - Training

5분

Azure Storage 계정에 이미지를 업로드하는 코드를 추가해 보겠습니다. 이 예제에서는 다음 이미지를 Azure Storage 컨테이너에 업로드합니다.

An image of the Docs mascot and the Azure mascot taking a selfie.

로컬 머신에서 작업하는 경우 이 이미지에서 마우스 오른쪽 단추를 클릭하고 애플리케이션이 있는 동일한 폴더에 저장합니다.

Microsoft Learn 샌드박스 환경에서 작업하는 경우 애플리케이션 폴더에서 다음 명령을 실행하여 이미지를 샌드박스에 다운로드합니다.
```
wget https://github.com/MicrosoftDocs/mslearn-connect-app-to-azure-storage/blob/main/images/docs-and-friends-selfie-stick.png?raw=true -O docs-and-friends-selfie-stick.png
```
두 경우 모두 이미지 이름이 docs-and-friends-selfie-stick.png여야 합니다.

Blob 스토리지에 이미지 업로드

Azure Storage 계정에서 개별 Blob 개체로 작업하려면 BlobClient 개체를 사용합니다. BlobClient 개체를 가져오려면 Blob이 저장될 컨테이너의 BlobContainerClient 개체에서 GetBlobClient 메서드를 호출합니다. GetBlobClient 메서드를 호출할 때 컨테이너에서 Blob 이름도 제공합니다. 이 예에서는 Blob 이름이 파일의 이름과 동일합니다.

BlobClient 개체가 있으면 Upload 메서드를 호출하여 Azure Blob Storage에 파일을 업로드할 수 있습니다. 다음 코드를 Program.cs 파일에 추가합니다.
```
string blobName = "docs-and-friends-selfie-stick";
string fileName = "docs-and-friends-selfie-stick.png";
BlobClient blobClient = container.GetBlobClient(blobName);
blobClient.Upload(fileName, true);
```
Upload 메서드의 두 번째 인수는 같은 이름의 기존 Blob 개체를 덮어쓸 수 있는지 여부를 지정합니다. 이 값은 기본적으로 false입니다. 이 예에서는 true를 지정하여 프로그램을 여러 번 실행할 수 있도록 합니다.

Azure Blob Storage 컨테이너의 개체 나열

프로그램이 작동했는지 확인하려면 Azure Storage Blob SDK의 다른 기능을 연습하여 Blob 스토리지의 컨테이너에 저장된 개체를 나열합니다. BlobContainerClient 개체에서 GetBlobs 메서드를 호출하여 수행할 수 있습니다. GetBlobs 메서드는 컨테이너의 각 Blob에 대한 데이터를 포함하는 BlobItem 개체의 페이징 가능한 목록을 반환합니다.

프로그램에서 이전에 추가한 코드 뒤에 다음 코드를 추가한 다음, 파일을 저장합니다.
```
var blobs = container.GetBlobs();
foreach (var blob in blobs)
{
    Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
}
```
이 코드는 photos 컨테이너에 대한 BlobContainerClient 개체의 GetBlobs를 호출합니다. 그런 다음 각 Blob을 반복하여 Blob의 이름, Blob이 생성된 날짜와 시간, Blob 크기를 출력합니다. 프로그램을 실행하면 이 코드는 업로드된 이미지 하나에 대해 한 줄로 나타납니다.

작업을 확인하려는 경우 최종 Program.cs 파일은 다음과 같이 표시됩니다.

using System;
using Microsoft.Extensions.Configuration;
using System.IO;
using Azure.Storage.Blobs;

namespace PhotoSharingApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(Directory.GetCurrentDirectory())
                .AddJsonFile("appsettings.json");

            var configuration = builder.Build();

            // Get a connection string to our Azure Storage account.
            var connectionString = configuration.GetConnectionString("StorageAccount");

            // Get a reference to the container client object so you can create the "photos" container
            string containerName = "photos";
            BlobContainerClient container = new BlobContainerClient(connectionString, containerName);
            container.CreateIfNotExists();

            // Uploads the image to Blob storage.  If a blb already exists with this name it will be overwritten
            string blobName = "docs-and-friends-selfie-stick";
            string fileName = "docs-and-friends-selfie-stick.png";
            BlobClient blobClient = container.GetBlobClient(blobName);
            blobClient.Upload(fileName, true);

            // List out all the blobs in the container
            var blobs = container.GetBlobs();
            foreach (var blob in blobs)
            {
                Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
            }
        }
    }
}

앱 실행

애플리케이션을 빌드하고 실행하여 모든 것이 작동하는지 확인하고 Azure Blob Storage에 이미지를 업로드합니다.

참고

PhotoSharingApp 디렉터리에 있어야 합니다.
```
dotnet run
```

축하합니다.

Azure Storage Blob SDK 패키지 및 Azure Blob Storage를 사용한 작업의 필수 사항을 알아봤습니다. 원하는 경우 다른 컨테이너를 만들어 스토리지 계정에 추가 이미지를 업로드하거나 이미지를 삭제하여 더 자세히 살펴보세요. Azure Storage Blobs client library for .NET GitHub(.NET GitHub용 Azure Storage Blob클라이언트 라이브러리) 페이지에서 자세히 알아볼 수 있습니다.

Blob 스토리지에 이미지 업로드

Azure Storage 컨테이너의 Blob 개체로 작업하려면 BlockBlobClient 개체를 사용합니다. BlockBlobClient 개체는 컨테이너에서 Blob 개체를 업로드하고 다운로드하고 나열하고 삭제하는 메서드를 포함합니다. BlockBlobObject를 가져오기 위해 ContainerClient 개체에서 getBlockBlobClient 메서드를 호출합니다. 그런 다음 uploadFile 메서드를 사용하여 Azure Storage에 이미지를 업로드할 수 있습니다.

이 코드를 index.js 프로그램 파일에서 컨테이너를 만드는 코드 바로 뒤에 추가합니다.

const filename = 'docs-and-friends-selfie-stick.png';
const blockBlobClient = containerClient.getBlockBlobClient(filename);
blockBlobClient.uploadFile(filename);

Azure Blob Storage 컨테이너의 개체 나열

코드가 작동하는지 확인하기 위해 프로그램의 ContainerClient 개체에서 listBlobsFlat 메서드를 호출할 수 있습니다. 이 코드를 index.js 파일에 추가한 다음, 파일을 저장합니다.
```
let blobs = containerClient.listBlobsFlat();
let blob = await blobs.next();
while (!blob.done) {
    console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
    blob = await blobs.next();
}
```
이 코드는 Blob이 생성된 날짜 및 크기와 함께 Azure Blob Storage 컨테이너의 모든 Blob을 출력합니다. 이 프로그램에서 이 코드는 업로드한 단일 이미지를 나타내는 한 행을 출력해야 합니다.

최종 파일은 다음과 같이 표시됩니다.

#!/usr/bin/env node
require('dotenv').config();

const { BlobServiceClient } = require("@azure/storage-blob");

const storageAccountConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
const blobServiceClient = BlobServiceClient.fromConnectionString(storageAccountConnectionString);

async function main() {
// Create a container (folder) if it does not exist
const containerName = 'photos';
const containerClient = blobServiceClient.getContainerClient(containerName);
const containerExists = await containerClient.exists()
if ( !containerExists) {
    const createContainerResponse = await containerClient.createIfNotExists();
    console.log(`Create container ${containerName} successfully`, createContainerResponse.succeeded);
}
else {
    console.log(`Container ${containerName} already exists`);
}

// Upload the file
const filename = 'docs-and-friends-selfie-stick.png';
const blockBlobClient = containerClient.getBlockBlobClient(filename);
blockBlobClient.uploadFile(filename);

// Get a list of all the blobs in the container
let blobs = containerClient.listBlobsFlat();
let blob = await blobs.next();
while (!blob.done) {
    console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
    blob = await blobs.next();
}
}
main();

앱 실행

애플리케이션을 빌드 및 실행합니다.

참고

PhotoSharingApp 디렉터리에 있어야 합니다.
```
node index.js
```
팁

await 키워드 사용에 대한 오류가 발생할 경우에는 위의 지침에서 마지막 단계에 따라 main 함수 정의에 async 키워드를 추가했는지 확인하세요.

축하합니다.

JavaScript용 Azure Storage Blob 클라이언트 라이브러리 및 Azure Blob Storage를 사용한 작업의 필수 사항을 알아봤습니다. 원하는 경우 다른 컨테이너를 만들어 스토리지 계정에 추가 이미지를 업로드하거나 이미지를 삭제하여 더 자세히 살펴보세요. JavaScript용 Azure Storage Blob 클라이언트 라이브러리 npm.js 페이지에는 라이브러리 사용 방법에 대한 여러 가지 예제가 있습니다.

계속

연습 - Azure Storage 계정에 이미지 업로드

Blob 스토리지에 이미지 업로드

Azure Blob Storage 컨테이너의 개체 나열

앱 실행

축하합니다.

Blob 스토리지에 이미지 업로드

Azure Blob Storage 컨테이너의 개체 나열

앱 실행

축하합니다.

피드백