react | MinIO 연동 테스트

이미지를 minio 오브젝트 스토리지를 통해 호출 및 관리 하려고 함.
Django 백엔드와 NFS Storage Class를 이용할까 했는데..이보다 MinIO로 해보면 어떨까해서 시작함.

Django DRF

Create App

python.exe .\manage.py startapp minioapp
# minio로 하면 이름 충돌남.

settings.py 파일에서 minioapp을 INSTALLED_APPS에 추가합니다.

# settings.py

INSTALLED_APPS = [
    # ... 다른 앱들 ...
    'minioapp',
]

# MinIO 설정
MINIO_ENDPOINT = 'localhost:9000'
MINIO_ACCESS_KEY = os.environ.get('MINIO_ACCESS_KEY', 'OpatCjG...')
MINIO_SECRET_KEY = os.environ.get('MINIO_ACCESS_KEY', '88VX9d...')

프로젝트 urls.py에 경로를 추가

urlpatterns = [
    ......
    path('minio/', include('minioapp.urls')),
]

App urls.py에 경로 추가

from django.urls import path
from .views import get_presigned_url

urlpatterns = [
    path('get-presigned-url/<str:bucket_name>/<str:object_name>/', get_presigned_url, name='get_presigned_url'),
]

App views.py에 내용 추가

from django.conf import settings
from django.http import JsonResponse
from minio import Minio, S3Error
import logging

import urllib3
urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)

logger = logging.getLogger(__name__)

def get_presigned_url(request, bucket_name, object_name):
    client = Minio(
        settings.MINIO_ENDPOINT,
        access_key=settings.MINIO_ACCESS_KEY,
        secret_key=settings.MINIO_SECRET_KEY,
        secure=True,  # HTTPS 서버를 사용
        http_client=urllib3.PoolManager(cert_reqs='CERT_NONE')  # SSL 인증서 검증 비활성화
    )
    
    try:
        presigned_url = client.presigned_get_object(bucket_name, object_name)
        logger.debug(f"Presigned URL: {presigned_url}")
        return JsonResponse({'url': presigned_url})
    except S3Error as e:
        logger.error(f"Error generating presigned URL: {e}")
        return JsonResponse({'error': str(e)}, status=500)

REACT

import React, { Component } from 'react';
import axios from 'axios';

class ImageComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imageUrl: '',
            errorMessage: ''
        };
    }

    componentDidMount() {
        const bucketName = 'itstant-items-img';
        const objectName = 'rtx3060.jpg';

        axios.get(`${process.env.REACT_APP_API_URL}/minio/get-presigned-url/${bucketName}/${objectName}/`)
            .then(response => {
                this.setState({ imageUrl: response.data.url });
            })
            .catch(error => {
                console.log(error);
                this.setState({ errorMessage: '이미지를 불러오는 중 오류가 발생했습니다.' });
            });

    }

    render() {
        const { imageUrl, errorMessage } = this.state;

        return (
            <div>
                {imageUrl ? (
                    <img src={imageUrl} alt="MinIO Image" style={{ width: '300px', height: 'auto' }} />
                ) : (
                    <p>{errorMessage || '이미지를 로드하는 중입니다...'}</p>
                )}
            </div>
        );
    }
}

export default ImageComponent;