Flask & React 연결

백엔드에서 flask를 통해서 s3에 있는 이미지 데이터를 읽어서 해당 이미지 데이터를 프론트엔드 react로 보내서 이미지를 보는 방법

1. Flask 백엔드 설정: Flask 애플리케이션을 구성하고 S3에서 이미지를 읽어오는 엔드포인트(API)를 작성합니다. Flask는 boto3 라이브러리를 사용하여 AWS S3에 액세스할 수 있습니다.

    from flask import Flask, jsonify
    import boto3
   
    app = Flask(__name__)
   
    @app.route('/get_image', methods=['GET'])
    def get_image():
        # AWS S3 설정
        bucket_name = 'your-bucket-name'
        object_key = 'your-image-key.jpg'
        region_name = 'your-region'
   
        # Boto3 클라이언트 생성
        s3 = boto3.client('s3', region_name=region_name)
   
        try:
            # S3에서 이미지 읽어오기
            response = s3.get_object(Bucket=bucket_name, Key=object_key)
            image_data = response['Body'].read()
   
            # 이미지 데이터를 JSON 형식으로 반환
            return jsonify({'image_data': image_data.decode('utf-8')})
        except Exception as e:
            return jsonify({'error': str(e)})
   
    if __name__ == '__main__':
        app.run(debug=True)

2. React 프론트엔드 설정: React 애플리케이션을 구성하고, Flask에서 제공하는 API를 호출하여 이미지 데이터를 받아오는 부분을 작성합니다.

    import React, { useState, useEffect } from 'react';
   
    const App = () => {
        const [imageData, setImageData] = useState('');
   
        useEffect(() => {
            // Flask API 엔드포인트 호출
            fetch('http://localhost:5000/get_image')
                .then(response => response.json())
                .then(data => setImageData(data.image_data))
                .catch(error => console.error('Error:', error));
        }, []);
   
        return (
            <div>
                <h1>Image Viewer</h1>
                {imageData && <img src={`data:image/jpeg;base64,${imageData}`} alt="S3 Image" />}
            </div>
        );
    }
   
    export default App;

3. CORS 문제 해결: CORS (Cross-Origin Resource Sharing) 정책으로 인해 백엔드와 프론트엔드 간의 통신이 차단될 수 있습니다. Flask 애플리케이션에 flask-cors 라이브러리를 설치하여 CORS 문제를 해결합니다.

    pip install flask-cors

   그리고 Flask 애플리케이션에 다음과 같이 CORS를 활성화합니다.

    from flask import Flask, jsonify
    from flask_cors import CORS
    import boto3
   
    app = Flask(__name__)
    CORS(app)
   
    # ... (이하 생략)

4. 실행 및 확인: Flask 애플리케이션과 React 애플리케이션을 각각 실행하고, 브라우저에서 React 애플리케이션을 열어 이미지를 확인합니다.

   Flask 애플리케이션:

    python your_flask_app.py

   React 애플리케이션:

    npm start

   브라우저에서 http://localhost:3000에 접속하여 이미지가 제대로 표시되는지 확인하세요.