[AWS] S3에서 파일을 다운로드할 수 있게 헤더 설정하는 법

바쁜 사람들을 위해 코드 먼저:

See the Pen Untitled by BellRiver (@orugpbqu-the-solid) on CodePen.

const accessKey = "";
const secretKey = "";
const region = "";
const bucketName = "";

위 코드에서 4개 항목만 채워주시면 됩니다.

---

위 코드와 함께 AWS에서 진행해야 하는 설정들이 있습니다.

IAM 설정:

1. AWS 사이트에서 IAM을 검색합니다.
2. 좌측 메뉴의 "사용자"를 클릭합니다.
3. "사용자 생성"을 클릭하여 사용자를 생성해 줍니다.
4. 사용자를 생성하면 "accessKey"와 "secretKey"를 얻을 수 있습니다.
   (key류는 생성 시 한 번만 확인할 수 있으므로 안전한 곳에 복사하여 저장합니다.)
5. 권한 > 권한 추가를 클릭합니다.
6. "AmazonS3FullAccess" 권한을 추가해 줍니다.

 

S3 설정: 

1. S3에서 버킷을 생성해 줍니다.
2. 모든 사람이 접근할 수 있도록 아래 설정을 줍니다.
   버킷 이름 설정: 원하는 이름으로
   ACL 비활성화됨(권장) 선택
   이 버킷의 퍼블릭 액세스 차단 설정: 체크 해제
   버킷 버전 관리: 비활성화 체크
   기본 암호화: Amazon S3 관리형 키(SSE-S3)를 사용한 서버 측 암호화
   버킷 키: 활성화
3. 버킷 만들기 클릭.
4. 생성한 버킷 클릭.
5. 권한 클릭.
6. 버킷 정책 편집 클릭.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::bellriver-test/*"
		}
	]
}

7. CORS(Cross-origin 리소스 공유)

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

---

위 내용이 거의 전부이기에 문제가 생길 것 같지는 않으나,
에러가 나오면 해당 에러를 검색하거나, AI를 통해 간단히 해결할 수 있을 것입니다.

코드에서 파일 다운로드를 위한 가장 중요한 부분은 아래와 같습니다.

const params = {
    Bucket: bucketName,
    Key: fileName,
    Body: file,
    ContentType: file.type || 'application/octet-stream',
    ContentDisposition: 'attachment; filename="' + fileName + '"'
};

여기서 꼭 ContentDisposition을 설정해 주어야 합니다.
그렇지 않으면 이미지 파일 같은 경우 웹에서 열리기만 하고 다운로드가 되지 않습니다.

제가 잘못 적은 부분이나, 보완 사항이 있다면 댓글 부탁드립니다.
확인 후 빠르게 수정하겠습니다.

그럼 오늘도 즐거운 하루 보내세요!