Azure에 Node.js에서 이미지를 저장하거나 DL

무언가와 이미지를 저장하고 싶다고 장면은 나오지요.

Azure에 Node.js에서 이미지 저장 준비 편 계속이지만 Azure Blob Storage에 이미지를 업로드하고 반대로 다운로드하여 로컬로 저장을 시도합니다.

우선, Blob Storage 내에서의 개념으로서, コンテナ=フォルダ的な概念 , blob=ファイル的な概念でコンテナ内に作成される 라고 현재 생각하고 있습니다.

이미지 준비 등

우선은 이용하는 화상을 준비해 보았습니다. n0bisuke.jpg


이전에 시도한 코드로 hello 라는 문자열을 보내고 있었으므로, 그 코드를 그대로 사용하여 base64 변환하여 보냅니다.

이미지 업로드

uploadimage.js

'use strict';

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

//ファイルを利用
const fs = require(`fs`);
const FILE_PATH = `n0bisuke.jpg`;

//画像ファイルをbase64文字列へ
const image_data = fs.readFileSync(FILE_PATH);
const base64_data = "data:image/jpeg;base64," + image_data.toString('base64');

async function main() {
  // Enter your storage account name and shared key
  const account = process.env.ACCOUNT_NAME || "ストレージアカウント名";
  const accountKey = process.env.ACCOUNT_KEY || "キー";

  const sharedKeyCredential = new StorageSharedKeyCredential(account, accountKey);
  const blobServiceClient = new BlobServiceClient(
    `https://${account}.blob.core.windows.net`,
    sharedKeyCredential
  );

  //コンテナを作成した名前に指定
  const containerName = `n0bisuke-container1630888214169`;
  const containerClient = blobServiceClient.getContainerClient(containerName);

  // Create a blob
  const content = base64_data; //変換したbase64文字列を使う
  const blobName = "newblob" + new Date().getTime();
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);
  const uploadBlobResponse = await blockBlobClient.upload(content, Buffer.byteLength(content));
  console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);
}

main().catch((err) => console.error("Error running sample:", err.message));

$ node uploadimage.js 
Upload block blob newblob1630891763317 successfully 37db3c29-201e-004e-52c6-a28313000000

newblob1630894950109라는 blob 이름으로 업로드되었습니다.

포털에서도 확인할 수 있었습니다. 6.93KiB라는 것으로 제대로 보존되어 그렇습니다.

이미지 다운로드 및 저장

앞으로는 반대로 DL을 시도해 보겠습니다. 텍스트만으로는 어쩔 수 없기 때문에 화상 파일로서 보존하는 처리까지 써 갑니다.

참고 : Node.js로 이미지 다운로드 및 저장 (axios 사용)
참고 : [Node.js] Base64로 인코딩된 파일 데이터를 디코딩하여 S3로 putObject

이 근처가 참고가 되었습니다.

방금 업로드한 newblob1630891763317 의 blob 이름을 직접 지정합니다.

공식 샘플에 있는 streamToBuffer()을 사용하여 문자열로 인코딩하고 base64 문자열에서 데이터 내용을 검색하고 writeFileSync()로 파일을 저장합니다.

dl.js

'use strict';

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

const fs = require(`fs`);
const FILE_PATH = `n0bisuke.jpg`;

async function main() {
  // Enter your storage account name and shared key
  const account = process.env.ACCOUNT_NAME || "ストレージアカウント名";
  const accountKey = process.env.ACCOUNT_KEY || "キー";

  const sharedKeyCredential = new StorageSharedKeyCredential(account, accountKey);
  const blobServiceClient = new BlobServiceClient(
    `https://${account}.blob.core.windows.net`,
    sharedKeyCredential
  );

  //コンテナを作成した名前に指定
  const containerName = `n0bisuke-container1630888214169`;
  const containerClient = blobServiceClient.getContainerClient(containerName);

  //blobにアクセス
  const targetBlobName = `newblob1630891763317`;
  const blockBlobClient = containerClient.getBlockBlobClient(targetBlobName);

  //blobからデータをダウンロード
  const downloadBlockBlobResponse = await blockBlobClient.download(0);

  //データを文字列に
  const encodedData = (await streamToBuffer(downloadBlockBlobResponse.readableStreamBody)).toString();

  //今回は元が画像ファイルだったのでbase64形式のテキストがDLされるので中身を抽出
  const fileData = encodedData.replace(/^data:\w+\/\w+;base64,/, '');

  //ローカルファイルに書き込み
  fs.writeFileSync(`./dl/${FILE_PATH}`, fileData, 'base64');
}

// A helper method used to read a Node.js readable stream into a Buffer
async function streamToBuffer(readableStream) {
    return new Promise((resolve, reject) => {
      const chunks = [];
      readableStream.on("data", (data) => {
        chunks.push(data instanceof Buffer ? data : Buffer.from(data));
      });
      readableStream.on("end", () => {
        resolve(Buffer.concat(chunks));
      });
      readableStream.on("error", reject);
    });
}

main().catch((err) => console.error("Error running sample:", err.message));

실행하면 ...
안전하게 저장되었습니다!


encodedData.replace(/^data:\w+\/\w+;base64,/, ''); 의 처리를 잊으면, 잘 파일을 표시 할 수 없게 되어 버리므로 주의해 느낌이었습니다.

요약

"이미지를 Azure Blob Storage에 업로드 및 다운로드"를 Node.js에서 시도했습니다.

끝나 보니 시원했지만, 처음 가 발광할 것 같았습니다. 웃음