S3 -> Flask -> React (not using Presigned URL)

이미지가 S3에 있는 경우, Flask에서는 해당 이미지를 S3에서 읽어와 React 앱으로 전송할 수 있습니다. Flask에서는 smart_open 라이브러리를 사용하여 S3에서 데이터를 읽어오고, React에서는 이미지를 표시할 수 있습니다.

여기에 간단한 예제 코드를 제공하겠습니다.

1. Flask 애플리케이션에서 S3에서 이미지를 읽어오는 엔드포인트를 만듭니다.

from flask import Flask, send_file
from smart_open import open

app = Flask(__name__)

s3_bucket_name = 'YOUR_S3_BUCKET_NAME'
s3_key = 'path/to/your/image.jpg'

@app.route('/get_s3_image')
def get_s3_image():
    try:
        # S3 URL 생성
        s3_url = f's3://{s3_bucket_name}/{s3_key}'

        # smart_open을 사용하여 S3에서 이미지 읽기
        with open(s3_url, 'rb') as f:
            image_data = f.read()

        return send_file(
            io.BytesIO(image_data),
            mimetype='image/jpg',
            as_attachment=False,
            download_name='image.jpg'
        )
    except Exception as e:
        return str(e)

if __name__ == '__main__':
    app.run(debug=True)

2. React 앱에서 해당 S3 이미지를 받아와서 화면에 띄우는 예제 코드입니다.

import React, { useState, useEffect } from 'react';

function App() {
  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    // Flask에서 S3 이미지를 가져오는 함수
    const getS3ImageData = async () => {
      try {
        const response = await fetch('http://localhost:5000/get_s3_image');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        setImageData(url);
      } catch (error) {
        console.error('Error getting S3 image data:', error);
      }
    };

    // S3 이미지 데이터 가져오기
    getS3ImageData();
  }, []);

  return (
    <div>
      <h1>S3 Image Display</h1>
      {imageData && <img src={imageData} alt="S3 Image" />}
    </div>
  );
}

export default App;

이 예제에서는 Flask 애플리케이션에서 /get_s3_image 엔드포인트를 생성하고, 해당 엔드포인트를 통해 S3 이미지를 받아오도록 설정했습니다. React 앱에서는 fetch 함수를 사용하여 Flask 애플리케이션의 /get_s3_image 엔드포인트로부터 S3 이미지를 가져오고, 이미지를 표시합니다.

이 코드를 사용하면 Flask에서 S3 이미지를 React 앱으로 전송하고, React 앱에서 해당 이미지를 화면에 표시할 수 있습니다.