스터디로 스프링을 공부하다가 코딩 인생 최초로 정식 프로젝트를 하게 되었다. 팀원들과 아이디어를 내면서 많은 이야기들을 나누었다. 결론적으로는 사진 업로드가 필요한 주제였고 이미지 업로드는 aws S3를 사용하면 되는 것을 알게 되었다.
스터디는 스프링으로 했지만 빠른 개발을 위해 프로젝트는 django 로 진행 하기로 했기 때문에 django s3 연동에 대해 써보려고 한다.
정식 프로젝트를 돌입하기 이전에 장고도 처음 먼져봐서 장고 공부하는 김에 테스트로 amazon s3도 붙여 보기로 하였다.
많은 글들을 참고하였는데 대부분의 글들이 2 ~ 3년전 글들이 대부분이라 조금 막힌 부분이 있었다. 그래도 대부분 유사해서 문제없이 해결 되었다.
s3 연동을 위해 필요한 과정
s3를 사용하기 위해 필요한 과정들을 나열해보면
- AWS 회원 가입
- s3 버킷 생성
- IAM (Identity and Access Management) 설정하기 [이부분이 문제였음]
- 장고에 연결
이렇게 정리할 수 있겠다.
1. AWS 회원가입 스스로 해결 요망
이건 스스로 해봐용 👁️👁️👍
2. s3 버킷 생성
https://velog.io/@jinseoit/AWS-S3-bucket
위 글을 참조하면 좋다. 테스트하고 문제 해결까지 알려준다.
3. IAM (Identity and Access Management) 설정
https://richone.tistory.com/7
위 글을 참조하였다. 옛날 글이라 많이는 참조 하지말고 글을 읽다보면 IAM 설정이라고 나오는데 이 부분만 보면 좋겠다.
버튼이 조금 달라서 여기서 문제를 만났다.
문제가 되는 부분은 위 두 부분 이었다. 글을 읽으며 따라온 분들은 사용자를 첫 번째 사진 처럼 [프로그래밍 방식 엑세스 버튼]이 없었을 것이고 이후 최종적으로 사용자를 추가하였을 때 [.csv 다운로드]가 뜨지 않았을 것이다. 이는 뒤에 진행할 예정이지만 장고 연결에 필요한 엑세스 키가 없다는 것을 의미한다.
장고에 연결하기 위해서는 유저의 엑세스 키와 비밀키를 알아야 한다.
하지만 저 글을 따라서 오면 유저는 있으나 엑세스 키가 없는 상황이다.
이 과정을 해결하기 위해 글과는 다른 절차를 밟아야했다.
https://docs.aws.amazon.com/ko_kr/powershell/latest/userguide/pstools-appendix-sign-up.html
위 글을 읽으면서 따라가면 해결 할 수 있다.
문제가 되는 글에서 [프로그래밍 방식 엑세스 버튼]을 현재 지원하지 않는 문제가 있는 것 같다. 그래서 문제가 되는 글을 따라 유저만 추가해주고 해당 글에서 나와 바로 위 주소를 따라 진행하면 엑세스 키와 비밀 엑세스 키를 얻을 수 있다.
결론적으로 문제가 되는 글은 유저 생성과 동시에 엑세스 키를 부여받지만
현재는 그 과정을 따로 진행해야 하는 것 같다.
4. Django + S3 연동
위 과정을 모두 진행하였다면 장고에서 코드를 추가하여 연동하기만 하면 된다.
https://gaksu.tistory.com/entry/AWS-S3%EC%99%80-Django%EC%9E%A5%EA%B3%A0-%EC%97%B0%EB%8F%99#Django%EC%97%90%EC%84%9C_%EC%97%85%EB%A1%9C%EB%93%9C%EC%8B%9C_S3%EB%A1%9C_%EC%A0%80%EC%9E%A5%ED%9B%84_%EC%B6%9C%EB%A0%A5
위 글을 따라오면 된다.
수정할 것은
INSTALLED_APPS = [
...
'app01', #자신이 생성한 어플리케이션
'corsheaders',
'storages',
]
이 부분에서 'corsheaders', 지워줘도 된다.templates폴더안 main.html 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if result %}
{% for picture in result %}
<img src="https://gaksu-myawsbucket.s3.ap-northeast-2.amazonaws.com/{{ picture.img }}">
{% endfor %}
{% endif %}
</body>
</html>
이 코드에서
<img src="https://gaksu-myawsbucket.s3.ap-northeast-2.amazonaws.com/{{ picture.img }}">
gaksu-myawsbucket 요거를 자신의 버킷 이름으로 이렇게 하면 문제 없이 연동 완료된다.
