웹 애플리케이션에서 이미지나 파일을 저장하려면 스토리지 서비스가 필요합니다. AWS S3는 가장 널리 사용되는 클라우드 스토리지로, 이번 글에서는 S3 버킷 생성부터 외부 애플리케이션에서 접근할 수 있도록 IAM 권한과 CORS까지 설정하는 전체 과정을 알아보겠습니다.
S3버킷 생성하기
aws콘솔에 접속하여 상단에 S3를 검색 후 클릭합니다.
우측에 버킷 만들기를 클릭합니다.
버킷 이름을 지정해야하는데 버킷 이름은 전 세계적으로 고유해야 하기 때문에 뒤에 숫자를 추가해 주면 좋습니다.
객체 소유권은 ACL 활성화됨으로 체크한후 객체 소유권은 버킷 소유자 선호로 체크합니다.
웹 애플리케이션에서 업로드된 이미지를 누구나 볼 수 있도록 공개 설정하려면 ACL이 필요합니다. ACL이 비활성화되면 객체별 퍼블릭 설정이 불가능합니다.
ACL(Access Control List)이란? 버킷이나 개별 객체(파일)에 대해 "누가 읽기/쓰기 권한을 가질지" 설정하는 접근 제어 목록입니다.
모든 퍼블릭 액세스 차단 체크를 해제한후 "현재 설정으로 인해 이 버킷과 그 안의 객체가 퍼블릭 상태가 될 수 있음을 확인합니다"라는 경고메시지가 뜨면 확인합니다.
나머지 설정은 기본값을 그대로 유지한후 하단에 버킷 만들기를 클릭하여 버킷을 생성합니다.
다음과 같이 버킷이 생성완료된 걸 확인할 수 있습니다.
IAM 사용자 및 액세스 키 생성
지금까지 AWS 콘솔에 로그인해서 S3 버킷을 만들었습니다. 하지만 실제 서비스에서는 우리가 만든 웹 애플리케이션이 자동으로 S3에 파일을 업로드해야 합니다.
이때 애플리케이션이 AWS에 접근하려면 "신분증" 같은 게 필요한데, 그게 바로 액세스 키입니다. 그리고 이 액세스 키를 발급받으려면 IAM 사용자를 먼저 만들어야 합니다.
AWS 콘솔에 IMA를 검색한후 전체 보기를 클릭합니다.
이후에 나오는 IMA를 클릭하여 이동합니다.
좌측 메뉴에 사용자를 클릭한뒤 우측에 사용자 생성 버튼을 클릭합니다.
사용자 이름을 지정후 다음버튼을 클릭합니다.
직접 정책 연결을 선택하고 정책 생성버튼을 클릭합니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:DeleteObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::아까 생성한 버킷이름",
"arn:aws:s3:::아까 생성한 버킷이름/*"
]
}
]
}JSON탭을 선택하고 정책 편집기에 내용을 붙여 넣습니다.
codeharu-images-2025를 실제 생성한 버킷 이름으로 변경하세요.
이후에 하단에 다음 버튼을 클릭합니다.
정책 이름을 입력한 뒤 맨 하단에 정책생성버튼을 클릭합니다.
이제 다시 IMA - 사용자 - 사용자 생성으로 돌아와서 방금 만든 정책을 직접 검색한 뒤 체크하여 다음 버튼을 클릭합니다.
여기서 반드시 검색을 해야 정책이 나옵니다.
사용자 생성 버튼을 클릭합니다.
액세스 키 생성하기
생성된 사용자를 클릭합니다.
보안 자격 증명탭을 클릭한뒤 액세스 키 만들기를 클릭합니다.
AWS 외부에서 실해오디는 애플리케이션에 체크하고 다음을 클릭합니다.
액세스 키 만들기를 클릭합니다.
액세스키는 나중에는 확인할 수 없으니 csv파일로 다운로드하여 보관하거나 직접 복사한 뒤 안전한 곳에 백업합니다.
키를 백업한 뒤에 완료버튼을 클릭합니다.
버킷 정책 및 CORS 설정
버킷과 IAM 설정만으로는 웹에서 S3를 사용할 수 없습니다. 두 가지 추가 설정이 필요합니다.
- 버킷 정책: 업로드된 파일을 외부에서 URL로 접근할 수 있도록 허용
- CORS: 브라우저에서 우리 웹사이트가 S3에 요청을 보낼 수 있도록 허용
이 설정을 하지 않으면 이미지가 안 보이거나 파일 업로드 시 에러가 발생합니다.
AWS콘솔에서 S3를 검색한 후 이동합니다.
아까 생성한 버킷이 나온다면 해당 버킷을 클릭합니다.
권한 탭으로 이동한 뒤 하단에 버킷 정책 편집을 클릭합니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::아까 생성한 버킷이름/*"
}
]
}버킷이름을 아까 생성한 버킷이름에 맞게 수정하여 위 내용을 붙여 넣은 후 변경사항을 저장합니다.
이후에 같은 권한탭에서 아래로 스크롤하여 CORS 섹션을 찾은 후 편집을 클릭합니다.
[{"AllowedHeaders":["*"],"AllowedMethods":["GET","PUT","POST","DELETE"],"AllowedOrigins":["http://localhost:3000"
,"https://codemaru.com"],"ExposeHeaders":["ETag"]}]이 부분엔 localhost 주소와 본인의 서비스 도메인을 적으면 모든 설정이 마무리됩니다.