2024. 1. 10. 01:13ㆍpython
Flask를 사용하여 AWS S3에서 이미지를 읽어와 웹페이지에서 띄우는 방법은 간단합니다. Flask에서는 send_file 함수를 사용하여 이미지를 웹페이지로 보낼 수 있습니다. 아래는 예제 코드입니다.
먼저, 필요한 라이브러리를 설치합니다.
pip install Flask boto3그런 다음, 다음과 같이 Flask 애플리케이션을 작성합니다.
from flask import Flask, render_template, send_file
import boto3
app = Flask(__name__)
@app.route('/')
def display_image():
# AWS S3 설정
bucket_name = 'your-bucket-name'
object_key = 'your-image-key.jpg' # 이미지 파일명 및 경로
region_name = 'your-region' # AWS S3 bucket이 위치한 리전
# 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()
# 이미지를 웹페이지로 보내기
return send_file(
response['Body'],
mimetype='image/jpeg', # 이미지의 MIME 타입
as_attachment=True,
download_name='image.jpg' # 다운로드될 때의 파일명
)
except Exception as e:
return str(e)
if __name__ == '__main__':
app.run(debug=True)이 코드에서는 Flask 애플리케이션의 루트 경로로 접속하면 S3에서 읽어온 이미지를 웹페이지에 표시합니다. 이미지는 send_file 함수를 사용하여 전송되며, MIME 타입 및 다운로드 파일명은 적절하게 설정할 수 있습니다.
위 코드에서 as_attachment=True로 설정했기 때문에 브라우저에서 이미지가 직접 열리지 않고 다운로드되게 됩니다. 웹페이지에서 이미지를 직접 표시하려면 더 복잡한 HTML 템플릿과 함께 render_template 함수를 사용하여 HTML을 렌더링해야 할 것입니다. 이는 이미지를 HTML 페이지에 포함하거나, JavaScript를 사용하여 이미지를 동적으로 로드하는 방식 중 하나입니다.
좀 더 예쁘고 세련된 웹페이지를 만들려면 HTML과 CSS를 사용하여 디자인을 꾸미는 것이 중요합니다. Flask에서는 템플릿 엔진을 사용하여 HTML 템플릿을 렌더링하고, CSS를 사용하여 스타일을 추가할 수 있습니다.
아래는 Flask 애플리케이션에서 간단한 예쁜 웹페이지를 만들기 위한 예제 코드입니다. 이 예제에서는 Bootstrap을 사용하여 간단한 스타일링을 추가하였습니다.
먼저, templates 폴더를 생성하고 그 안에 index.html 파일을 만듭니다.
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask S3 Image Viewer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<img src="{{ image_url }}" class="card-img-top" alt="S3 Image">
<div class="card-body text-center">
<h5 class="card-title">S3 Image Viewer</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>그런 다음, Flask 애플리케이션을 다음과 같이 수정합니다.
from flask import Flask, render_template, send_file
import boto3
app = Flask(__name__)
@app.route('/')
def display_image():
# AWS S3 설정
bucket_name = 'your-bucket-name'
object_key = 'your-image-key.jpg' # 이미지 파일명 및 경로
region_name = 'your-region' # AWS S3 bucket이 위치한 리전
# 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()
# 이미지를 웹페이지로 보내기
image_url = f"data:image/jpeg;base64,{image_data}"
# HTML 템플릿 렌더링
return render_template('index.html', image_url=image_url)
except Exception as e:
return str(e)
if __name__ == '__main__':
app.run(debug=True)이 코드에서는 Bootstrap을 이용하여 간단한 카드 스타일을 사용하였습니다. 이미지는 Base64로 인코딩되어 직접 데이터 URL로 전송되며, render_template 함수를 사용하여 HTML 템플릿을 렌더링합니다.
마지막으로, Flask 애플리케이션을 실행하고 브라우저에서 http://127.0.0.1:5000/에 접속하면 예쁘게 디자인된 웹페이지에서 S3 이미지를 볼 수 있습니다. 이 예제는 단순한 디자인으로 시작할 수 있으며, 필요에 따라 레이아웃 및 스타일을 수정하여 더 나은 사용자 경험을 제공할 수 있습니다.
'python' 카테고리의 다른 글
| SQLite - Python으로 DB 구축 (0) | 2024.01.17 |
|---|---|
| Flask & React 연결 (1) | 2024.01.10 |
| 다각형 겹친 부분의 넓이 구하기 (Python w/ shapely) (0) | 2024.01.08 |
| 헝가리안 알고리즘 (0) | 2023.11.17 |
| cv2 bbox 그리기 (0) | 2023.11.16 |