[aws]s3 이미지 업로드

PRESIGNED URL 방식.. 권한부터 설정하자

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "1",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::freepeopleimage/*"
		},
		{
			"Sid": "2",
			"Effect": "Allow",
			"Principal": {
				"AWS": "arn:aws:iam::368805166953:root"
			},
			"Action": [
				"s3:PutObject",
				"s3:DeleteObject"
			],
			"Resource": "arn:aws:s3:::freepeopleimage/*"
		}
	]
}

freepeopleimage이라고 써진 부분은 내 버킷 이름으로 바꿔줘야됨

CORS 설정하자

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

IAM으로 이동해서 사용자를 기존 정책으로 만들어주자

액세스 키 발급하자

인풋태그 만들자

                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          let file = e.target.files[0];
                          let filename = encodeURIComponent(file.name);
                          let res = await fetch(
                            "/api/post/image?file=" + filename
                          );
                          res = await res.json();

                          //S3 업로드
                          const formData = new FormData();
                          Object.entries({ ...res.fields, file }).forEach(
                            ([key, value]) => {
                              formData.append(key, value);
                            }
                          );
                          let 업로드결과 = await fetch(res.url, {
                            method: "POST",
                            body: formData,
                          });
                          console.log(업로드결과);

                          if (업로드결과.ok) {
                            setSrc(업로드결과.url + "/" + filename);
                          } else {
                            console.log("실패");
                          }
                        }}
                      />

api 하나 만들어 주자

import aws from 'aws-sdk'
export default async function handler(요청, 응답){
    aws.config.update({
      accessKeyId: process.env.ACCESS_KEY,
      secretAccessKey: process.env.SECRET_KEY,
      region: 'ap-northeast-2',
      signatureVersion: 'v4',
    })

    const s3 = new aws.S3();
    const url = await s3.createPresignedPost({
      Bucket: process.env.BUCKET_NAME,
      Fields: { key : 요청.query.file },
      Expires: 60, // seconds
      Conditions: [
        ['content-length-range', 0, 104857600], //파일용량 1MB 까지 제한
      ],
    })

    응답.status(200).json(url)
}