TIL94. Weterest Project:S 3 Bucketを使用したImage Uploader

📌 DjangoのS 3 Bucketを用いたイメージアップグレードの手順をまとめた.

🌈 S 3 Bucketを使用した画像アップロード装置

🔥 AWS IAMユーザー設定

🔥 AWS 3 bucket設定

🔥 boto 3で接続S 3

1.AWS IAMユーザー設定

🤔 IAM設定

✔IAMサービスを検索してユーザーを追加します.
✔ユーザー名を入力した後、アクセスキーの確認–プログラミングアクセス.
АААААААААААААААА\bucketはまだ生成前なので、後でbucketを生成してからポリシーを変更します.

{
    "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:::추후 버켓 생성시 버켓이름 여기 입력/*",
                "arn:aws:s3:::추후 버켓 생성시 버켓이름 여기 입력"
            ]
        }
    ]
}

✔新規ユーザー作成完了後、「Download.csv」ボタンをクリックしてユーザーの「アクセスキーID」と「Secret Access Key」をダウンロードします.

2.AWS 3 bucketの設定

🤔 bucket作成

✔S 3サービスはページに、bucket作成ボタンをクリックします.
勘定科目の勘定科目Bucket名を入力し、AWSバージョンを近くの領域に設定します.
✔このパケットのパブリックアクセス禁止設定のチェックを解除します.次の警告マークで、ご承知のことをご確認ください.
✔¥をクリックしてbucketを生成します.

🤔 bucket設定

生成されたbucketに入ったら、policyボタンを押すと次のbucket policyが表示されます.以下のJSONを入力します.
✔user arn上記で作成したユーザーをクリックすると、要約ページの上部に表示されます.
✔¥bucketの名前を入力します.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1507637373230",
            "Effect": "Allow",
            "Principal": {
                "AWS": "user arn을 입력해주세요"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::버킷 이름을 입력해주세요/*"
        },
        {
            "Sid": "Stmt1507637391106",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷 이름을 입력해주세요/*"
        }
    ]
}

✔次に、CROSS-Originリソース共有に次の内容を入力します.

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

✔¥保存ボタンをクリックすると、S 3での設定が終了します.

3.boto 3で接続S 3

🤔 Django Settings

✔️ settings.py KEY ID、ACCESS KEY、REGION NAMEなどを設定します.
✔KEY ID、ACCESS KEYは隠す必要があるので、単独で保存して、settings.pyのみ経由します.

AWS_ACCESS_KEY_ID       = AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY   = AWS_SECRET_ACCESS_KEY
AWS_S3_REGION_NAME      = 'ap-northeast-2'
AWS_STORAGE_BUCKET_NAME = 'weterest'
AWS_S3_CUSTOM_DOMAIN = f"{AWS_STORAGE_BUCKET_NAME}.s3.{AWS_S3_REGION_NAME}.amazonaws.com"
AWS_S3_OBJECT_PARAMETERS = {'CacheControl':'max-age=86400',}
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

🤔 Boto 3で接続S 3

✔boto 3を取り付けます.
$ pip3 install boto3

    @login_decorator
    def post(self, request):
        try:
            title             = request.POST['title']
            description       = request.POST['description']
            source            = request.POST['source']
            image             = request.FILES['filename']
            colors            = ['#FFF0E5', '#66C4FF', '#C3C5CB', '#AEE938', '#FFFAE5', '#FFF5FF', '#BE1809', '#FF8C00', '#E0E0E0', '#3A10E5']
            image_width       = 252
            image_height      = [252, 200, 500]
            upload_key        = str(uuid4().hex[:10]) + image.name
            s3_client = boto3.client(
               "s3",
                aws_access_key_id     = settings.AWS_ACCESS_KEY_ID,
                aws_secret_access_key = settings.AWS_SECRET_ACCESS_KEY
            )
            s3_client.upload_fileobj(
                image,
                settings.AWS_STORAGE_BUCKET_NAME,
                upload_key,
                ExtraArgs={
                    "ContentType": image.content_type
                }
            )
            board_image_url   = "https://weterest.s3.ap-northeast-2.amazonaws.com/"+upload_key
            image_point_color = random.choice(colors)
            user              = User.objects.get(id=request.user.id)
            tag_id            = random.randint(1,10)
            image_height      = random.choice(image_height)
            board = Board.objects.create(
                title             = title,
                description       = description,
                board_image_url   = board_image_url,
                source            = source,
                image_point_color = image_point_color,
                image_width       = image_width,
                image_height      = image_height,
                user              = user,
            )
            tag = Tag.objects.get(id=tag_id)
            board.tags.add(tag)
            board.save()
            return JsonResponse({'message':'CREATE_SUCCESS'}, status = 201)
        except KeyError:
            return JsonResponse({'message' : 'KEY_ERROR'}, status = 400)