1. AWS S3 bucket 생성
- AWS S3 console 접속
- 버킷 만들기
- 버킷 고유 이름 지정
AWS리전 서울로 지정 - 이 버킷의 퍼블릭 액세스 차단 설정 해제
- 버킷 만들기
- 버킷 - 권한 - CORS 편집
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag"
]
}
]
2. 자격 증명 풀 생성하기
- AWS congnito console 접속
- 자격 증명 풀 관리 접속
- 자격 증명 풀 고유 이름 지정
- 인증되지 않은 자격 증명에 대한 액세스 활성화
- 풀 생성 - 허용
3. IAM 역할 지정
- IAM console 접속
- 역할 탭 접속
- 생성한 Congito 중 Unath 클릭
- 정책 연결 - 정책 생성 - JSON 변경(밑의 코드에서 Bucket_name을 자신의 버킷 이름으로 변경)
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:*"
],
"Resource": [
"arn:aws:s3:::Bucket_name/*"
]
}
]
}4. Javascript Code
- 본인의 것을 작성하는 부분
- bucketName : 자신의 S3 bucket 이름을 입력
- bucketRegion : 앞서 Cognito콘솔에서 생성했던 자격증멸 풀 - 샘플 코드 - 플랫폼을 Javascript로 변경 후 region과 identityPoolid를 입력
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Bucket Configurations
var bucketName = '본인 작성';
var bucketRegion = '본인 작성';
var IdentityPoolId = '본인 작성';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: bucketName}
});
</script>
<script type="text/javascript">
function s3upload() {
var files = document.getElementById('cameraFileInput').files;
if (files) {
var file = files[0];
var fileName = file.name;
var filePath = 'my-first-bucket-path/' + fileName;
var fileUrl = 'https://' + bucketRegion + '.amazonaws.com/my-first-bucket/' + filePath;
s3.upload({
Key: filePath,
Body: file,
ACL: 'public-read'
}, function (err, data) {
if (err) {
reject('error');
}
alert('Successfully Uploaded!');
}).on('httpUploadProgress', function (progress) {
var uploaded = parseInt((progress.loaded * 100) / progress.total);
$("progress").attr('value', uploaded);
});
}
};
</script>
</head><body>
<div class="btn_div">
<span class="btn_camera">인물</span>
</div>
<input type="file" id="cameraFileInput" accept="image/" capture="environment">
<!-- 업로드 버튼 -->
<div>
<button onclick="s3upload()">Submit</button>
</div>
</body>참고 :
1. https://medium.com/@shresthshruti09/uploading-files-in-aws-s3-bucket-through-javascript-sdk-with-progress-bar-d2a4b3ee77b5
2. https://medium.com/@hozacho/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-aws-s3%EC%97%90-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-637dde104bcc
3. https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
개발 시작