[KLAE] 1230 개발일지

소셜 로그인 관련 포스트 -> 서비스 고도화시

Django-Rest-Framework(DRF)로 소셜 로그인 API 구현해보기(Google, KaKao, Github)

 

---

이미지 처리 관련 포스트

[AWS] S3로 이미지 업로드

ELB + Django Rest Framework + S3 Image upload 하기

• 우리가 넣은 이미지 데이터: 64개 plant의 이미지 파일
• 사용자가 넣을 개발일지 이미지 파일 + 프로필 파일

문제점

• 이미지 파일을 업로드 할 때 크기 조절은 어떻게 할 것인가?
• 올릴 때, 용량 문제는 어떻게 해결할 것인가?

---

개발과정

[Django] AWS S3 Storage Connect(장고 S3 연결 이미지 업로드)

위에서 거의 모든 것을 해결

[AWS] 이미지 저장을 위한 S3 버킷 생성하기

###########################AWS
AWS_ACCESS_KEY_ID = '' # .csv 파일에 있는 내용을 입력 Access key ID
AWS_SECRET_ACCESS_KEY = '' # .csv 파일에 있는 내용을 입력 Secret access key
AWS_REGION = 'ap-northeast-2'

###S3 Storages
AWS_STORAGE_BUCKET_NAME = 'klae-buket' # 설정한 버킷 이름
AWS_S3_CUSTOM_DOMAIN = '%s.s3.%s.amazonaws.com' % (AWS_STORAGE_BUCKET_NAME,AWS_REGION)
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

• 이 양식을 settings.py에 붙여넣기 하고, S3 버킷 생성하고, IAM 사용자설정 하면 된다.

버킷 정책

{
    "Version": "2012-10-17",
    "Id": "Policy1672394107671",
    "Statement": [
        {
            "Sid": "Stmt1672394102167",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::klae-buket/*"
        }
    ]
}

cors 

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

IAM 정책

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::klae-buket/*",
                "arn:aws:s3:::klae-buket"
            ]
        }
    ]
}

결과

잘 올라가 진다.

---

트러블 슈팅

• settings.py에 'storages' 를 추가했음에도 불구하고 모듈을 찾을 수 없다는 오류 발생 -> 이것 저것 해보았지만 그냥 가상환경 없애고 다시 만들고, requirements.txt 에 있는 것을 전부 설치 -> 해결
• post 페이지에서 파일을 올릴 수 있는 칸이 없었음 -> 제너릭뷰를 사용해야 보인다고 해서 admin 페이지를 통해서 업로드. 추후에 프론트 연결 후 업로드가 되는지 확인해보아야함.
• URL을 눌러드 사진이 나오지 않아 정책을 수정함. 버킷 정책에서 자꾸 invalid 어쩌구가 나왔는데 권한 설정을 몇 개 닫힘으로 체크해서 그럼. 다 열고 public으로 설정하니깐 사진이 정상적으로 보임 -> 해결

해야 할 것들

• 식물의 이미지는 static 폴더에 저장하고, 유저의 프로필 사진, 유저가 Post에 올린 사진을 나누어서 저장해야함.

맨땅에 해딩하면서 드디어 s3를 통해서 이미지를 올릴 수 있게 돼었다.