Azureでストレージを使ってみる　～Blobストレージ～

こんにちは！

Azureを勉強中でして、ストレージについて学んだのでアウトプットしようと記事を書いていきます。

本記事では、AzureのBlobストレージに保存した画像をNext.jsで表示する方法をまとめていきます。

Azureでストレージを作成

まずはAzureでストレージを作成していきます。

ストレージアカウントのサービスを開いて作成ボタンをクリックします。
基本的な情報を入力していき作っていきます！

作成後は、コンテナを作成します。
任意の値を設定し、作成を行いますが、今回はアクセスレベルをプライベート以外に設定しておきます。

その後、画像をUPloadしましょう。
先ほど作成したtestをクリックすると、コンテナ画面に遷移するのでそこから画像をアップロードします。

4枚の画像をUPloadしました。
これで画像ストレージ環境の構築は完了です！

Next.jsで画像を表示

以前、AzureのPostgreSQLを使ってみるという記事で、ブログの情報を渡すRESTをFlaskで作成しました。その情報を表示するコードを作成していきます。
※FlaskのCORSを設定しておきます

まず、前回の情報をそのまま返すコードを！

import { useEffect, useState } from 'react';

const BlogList = () => {

const [blogs, setBlogs] = useState();

useEffect( () => {

async function getBlogs() {

const res = await fetch('http://127.0.0.1:5000/blogs');

const data = await res.json();

setBlogs(data.blogs);

}

getBlogs();

}, );

return (

<div>

<h2>My Blogs</h2>

<div>

{blogs.map( (blog) => (

<div key={blog.id}>

<h2>{blog.name}</h2>

<img src={blog.image_name} alt={blog.name} />

<p>{blog.description}</p>

<a href={blog.url}>Read more</a>

</div>

))}

</div>

</div>

);

};

export default BlogList;

実行すると下記のような画面になります！
やはり画像は表示されませんね。。

これをBlobストレージの画像を反映させます。

import axios from 'axios';

import { useEffect, useState } from 'react';

import Image from 'next/image';

const BlogList = () => {

const [blogs, setBlogs] = useState();

const [base64Images, setBase64Images] = useState({});

const fetchData = async () => {

const result = await axios.get('http://localhost:5000/blogs');

setBlogs(result.data.blogs);

};

const fetchImage = async (imageName) => {

const imageUrl = `YOUR URL/CONTENER NAME/${imageName}`;

axios.get(imageUrl, { responseType: 'arraybuffer' })

.then(response => {

const base64 =

Buffer.from(response.data, 'binary')

.toString('base64');

setBase64Images(prevState =>

({ ...prevState, [imageName]: base64 }));

})

.catch(error => {

console.error('Error fetching image:', error);

});

};

useEffect( () => {

fetchData();

}, );

useEffect( () => {

blogs.forEach(blog => {

if (!base64Images[blog.image_name]) {

fetchImage(blog.image_name);

}

});

}, [blogs]);

return (

<div>

<h2>My Blogs</h2>

<div>

{blogs.map( (blog) => (

<div key={blog.id}>

<h2>{blog.name}</h2>

{base64Images[blog.image_name]

&& <Image src={`data:image/jpeg;base64,

${base64Images[blog.image_name]}`}

alt={blog.name} width={500} height={300} />}

<p>{blog.description}</p>

<a href={blog.url}>Read more</a>

</div>

))}

</div>

</div>

);

};

export default BlogList;