1. django) 장고를 설치하고, 앱과 템플릿을 생성한다.
추가로 DB(mySQL) 생성 및 연결도 했다.
2. django) 장고의 models.py에 아래의 코드를 작성한다.
db에 image를 저장할 테이블 Picture 클래스 구조를 만든다.
from django.db import models
# Create your models here.
class Picture(models.Model):
img = models.ImageField(upload_to="", blank=True)
~~~그리고 마이그레이션 시키기~~~
확인) mySQL workbench에 들어가서 확인해보니, picture이라는 테이블이 생성된 것을 확인할 수 있었다.
img라는 속성도 잘 만들어져 있음.
3. django) 장고 터미널에서 이미지 업로드 프로그램을 만든다.
pip install boto3 django-storages*오류가 뜨면 pip 업그레이드를 진행한다.
4. django) settings.py에 아래의 코드를 추가한다.
INSTALLED_APPS = [
...
'storages',
]
...
AWS_REGION = '[ap-northeast-2]'
AWS_STORAGE_BUCKET_NAME = '[버킷이름]'
AWS_ACCESS_KEY_ID = '[엑세스 키]'
AWS_SECRET_ACCESS_KEY = '[엑세스 비밀키]'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.%3.amazonaws.com' % (AWS_STORAGE_BUCKET_NAME, AWS_REGION)
STATIC_URL = 'https://%s/static/' % AWS_S3_CUSTOM_DOMAIN
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
MEDIA_URL = 'https://%s/media/' % AWS_S3_CUSTOM_DOMAIN
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
...DEFAULT_AUTO ...
5. django) 장고의 터미널에서 아래의 명령어를 입력한다.
정적파일을 모아서 지정된 경로에 저장하는 듯하다.
python .\manage.py collectstatic
6. AWS S3) S3 버킷에 들어가보면 다음과 같이 admin폴더가 생성된 것을 확인할 수 있다.
여기에 css나 js 등이 저장되어 있다.
이미지 업로드 및 읽기
지금부터는 이미지 파일을 여러 개 업로드하고, 읽어오는 것을 할거다.
물론 업로드 위치는 DB, S3을 이용한다. 읽어오는 것도 마찬가지..
DB에는 업로드 이미지 이름을 저장하고 읽어올 때도 마찬가지로 이름만 참조한다.
실제로 이미지가 저장되는 것은 AWS의 S3이다. (아마도)
7. django) 장고의 views.py에 아래의 코드를 입력한다.
from django.http import HttpResponse
from django.shortcuts import render
from app01.models import Picture
# 이미지 읽기
def read(request):
result = Picture.objects.all()
context = {
"result": result
}
return render(request, 'read.html', context)
# 이미지 업로드
def register(request):
if request.method == "GET":
pic = Picture()
return render(request, 'register.html', {'pic': pic})
elif request.method == "POST":
images = request.FILES.getlist("img")
for image in images:
pic = Picture()
pic.img = image
pic.save()
return HttpResponse("업로드 완료")
8. django) 장고의 urls.py에 urlpatterns에 read(읽기)와 register(업로드) 경로를 추가해준다.
import app01.views
urlpatterns = [
...
path('read/', app01.views.read),
path('register/', app01.views.register),
]
9. django) 장고 templates > register.html을 생성하여, 업로드 페이지를 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post"action="/register/" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="img" multiple>
<button type="submit">업로드</button>
</form>
</body>
</html>
10. django) 장고 templates > read.html을 생성하여, 읽기 페이지를 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if result %}
{% for pics in result %}
<img src="http://[버킷이름].s3.ap-northeast-2.amazonaws.com/{{ pics.img }}">
{% endfor %}
{% endif %}
</body>
</html>
11. 확인) 장고 터미널에서 서버를 실행하는 명령어를 입력한다.
python .\manage.py runserver
12. 페이지 확인) 서버 주소/register/에 접속하면 다음과 같다. 파일 선택 후 업로드 한다.
13. 페이지 확인) 서버 주소/read/에 접속하면 다음과 같다. 업로드 한 이미지를 읽을 수 있다.
14. DB 확인) workbench에서 DB에 저장된 데이터를 확인해본다.
15. AWS S3확인) AWS > 버킷에 들어가보면 아까 장고에서 만든 페이지를 통해 업로드한
사진이 있는 것을 확인할 수 있다.
'클라우드 > AWS' 카테고리의 다른 글
| 비교) EC2 웹 서버 방식 vs S3 웹 서버 방식(서버리스) 어느 것이 더 좋을까? (0) | 2023.03.15 |
|---|---|
| AWS) S3를 통한 react build 배포 (0) | 2023.03.15 |
| AWS) 객체 스토리지 S3 버킷 생성 및 버킷 정책 편집을 통한 파일 권한 설정 (0) | 2023.03.15 |
| 3계층 아키텍처 실습(with. AWS) (0) | 2023.03.14 |
| AWS를 이용한 여러가지 실습 (0) | 2023.03.13 |
