글 이미지를 업로드 할 수 있는 기능을 만들어보자.
- 이미지 업로드를 위한 input태그 필요
- 서버로 이미지 전송하면 그 이미지를 하드에 저장
=>AWS S3에 이미지 저장해두자
✨AWS 사용자생성 / 액세스 키 발급
- 홈페이지에 들어가서 가입 및 카드등록을 해주자.
여차저차 가입은 성공했다.
가입에 시간 제일 많이 씀 ㅎ..
다음으로 넘어가자
-
사용자생성/액세스키 발급하기
상단 nav에 검색하는 부분에다가iam검색해서 엔터
-
이후 대시보드(Dashboard)에서 사용자(Users)클릭
-
이후 사용자생성 클릭
-
이름만 쓰고 다음 클릭
-
다음은 권한 어쩌고 나옴
-
직접 정책 연결 이거 누르면 아래에 권한 정책 체크사항 뜰 텐데
검색창에 s3검색 후AmazonS3FullAccess체크
-
쭉 다음버튼 눌러서 사용자 생성해주면,
-
아래 이미지처럼 확인할 수 있음!
잘 만들어졌으니 이름을 눌러보고.. -
드디어 액세스 키 만들 수 있음!
클릭.
- 로컬코드 체크하고 다음버튼..
-
이후에 설명 태그 설정하라는데 선택사항이라 그냥 바로 생성했다.
-
이제 발급받은 액세스 키와 비밀 액세스 키 잘 보관해두고,
14.이부분... 다 가려뒀지만,..
만든 사용자의 ARN도 잘 복사해서 어디 저장해두기!
✨AWS S3 셋팅
-
스토리지를 빌리기 위해 상단 검색란에 s3 검색
-
버킷 만들기 클릭
-
다른 사람과 동일한 버킷 이름 사용 불가능.
없을 듯한 이름으로 만들고, 객체 소유권은 비활성화 선택
-
아래로 내려가면 "퍼블릭 액세스 차단 설정"이 있는데,
우선은 전부 체크를 해제해두고
추후에 개발을 마치고 테스트를 끝낸 이후에는 아래 이미지에 체크된 두 가지 항목은 체크해두는게 좋음
-
이후 따로 더 건들 것 없어보이니 버킷만들기 클릭해서 잘 만들어진 버킷이 보이면 클릭해준다.
-
이미지 업로드를 해주기 위해 "권한" 클릭
버킷 접근 권한 설정을 할 수 있음. -
권한은 아래에 보면 보이는 "버킷정책" 사용 혹은 "ACL"을 사용하면 되는데,
"버킷정책"으로 권한을 설정해보겠음.
버킷 정책에서 편집 클릭
- 아래에 정책 작성 란에 밑의 코드 적당히 수정해서 넣어줌
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::버킷이름넣기/*"
},
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "사용자ARN"
},
"Action": [
"s3:PutObject",
"s3:DeleteObject"
],
"Resource": "arn:aws:s3:::버킷이름넣기/*"
}
]
} 
이런 식으로..ㅎ
정책1. "누구나 버킷의 데이터를 읽을 수 있음"
Action에 넣은 Get을 Principal에 *로 누구나 읽을 수 있게
정책2. "이미지 추가, 수정, 삭제(PUT, DELETE)는 ARN주소 가진 사람만"
Action에 PUT과 DELETE로 추가, 수정, 삭제 권한을 주는데,
Principal에 내가 넣은 ARN 주소를 갖고있는 사람만 가능하게
참고로 Actions 항목에서
s3:GetObject: 자료 읽기
s3:PutObject: 쓰기
s3:DeleteObject: 삭제
-
이제 저장해놓고, 아래에 'CORS'를 설정해주자
편집을 누르고, -
CORS는 어떤 사이트에서 버킷 안의 파일들을 읽고, 쓰고, 삭제할 수 있는지를 설정하는 부분이다.
아래 코드를 넣어주었다.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag"
]
}
] 
참고로 저기 표시해둔 "AllowedOrigins"는 개발 끝나면 실제 서비스 도메인.com으로 넣어주면 된다.
아니면 다른 사이트에서 자료 쓰기, 삭제 해버리고 만다......
