개인(팀) 프로젝트/유실유기동물 웹사이트 개발 프로젝트

django Server에 image 업로드하는 기능 구현 + 이미지 스토리지를 AWS S3로 변경하려는 이유

한소희DE 2021. 7. 31. 15:42

 

현재 사진을 업로드하는 기능이 필요해 서버 내 media 폴더를 만들어, 업로드한 이미지가 media에 들어갈 수 있도록 설계했다. 

사실 방법 자체는 어렵지 않다. 왜냐하면 django에는 이미 관련 라이브러리 (static 등)가 잘 되어있기 때문이다.

여기서, 필요하면 pillow 등을 추가 설치하면 되므로 프로세스 자체는 복잡하지 않다.

 

하지만 나는 구글링을 하면서, 중간중간 이해가 되지 않는 부분이 있었기 때문에 (어디로 어떻게 저장되는지 혼란스러웠음) 버벅거렸던 것은 사실이다 ㅜㅜ

그래도 문제를 해결했으니 다행이라고 생각한다! 이제는 유연하게 기능을 구현할 수 있을 것 같다 ㅎㅎ  

 

 

1. 메인의 settings.py 설정하기

import os
# 사진 저장 공간 설정

# media로 접근하면 media 파일에서 꺼내서 넘겨준다는 의미
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

 

 

2. 메인의 urls.py 설정하기

from django.conf import settings
from django.conf.urls.static import static


# urlpatterns의 마지막 대괄호] 뒤에 아래 코드 입력
 
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

3. 원하는 model에 아래 스키마 설정하기

image = models.ImageField(upload_to="%Y-%m-%d")

 

 

4. 업로드할 기능 구현하는 방법

 

4-1. 이미지 업로드

# view 파일

model.image = request.POST.get('my-image', '')
<!-- html -->
<div style="float:right; margin-right:10px; padding: 0px 0px 15px 0px;" class="form-group mb-2">
	<input type="file" name='my-image' id="my-image"></input>
</div>

 

 

이렇게 수행해주면, 서버 내에는 media라는 폴더가 자동생성되며, 일자 별로 업로드한 이미지가 저장된다.

db의 image에는 image의 이름이 담겨 있다.

 

이 image에 image.url 명령을 해주면, 서버 내 해당 image의 위치를 알 수 있다.

그러면 이를 아래와 같은 방법을 이용해 html에서 보일 수 있다.

 

 

4-2. 저장된 이미지 보여주기

<!-- 서버에 저장된 이미지 보여주기 -->
<div>
	<img src="{{ tw.image.url }}" alt="found photo">
</div>

 

 

 

 

 

5. AWS S3에 이미지를 저장하려는 이유

근데, 이 방법은 성능이 늦어지기도 했고, 이미지가 용량 등을 많이 차지하는데 서버 부하를 고려하면 올바른 방법인 것 같지는 않았다. (많은 사람들이 사진을 업로드할 수도 있으니 말이다.)

따라서, 이 부분을 이미지 등의 데이터 저장소로 적합한 AWS S3를 이용해 이미지를 저장해 볼 생각이다.