이 글은 https://www.youtube.com/watch?v=GLM6a6n4U_s
를 참고 하여 쓰고 있습니다. aws 세팅에 바뀐 내용이 있길래 그걸 정리하려고 작성합니다.
1. 먼저 AWS를 세팅한다.
먼저 AWS계정을 생성한다
개인으로 생성해도 모두 사용할 수 있다. 계정 생성 과정은 개인 정보이니 넘어간답
2. 로그인
루트 사용자로 로그인을 한다.
3. AWS Management Console로 들어간다.
https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2#
https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2
ap-northeast-2.console.aws.amazon.com
2. 스토리지에 S3로 들어간다
https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2#
https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2
s3.console.aws.amazon.com
4. + 버킷을 만든다.
버킷의 이름은 아무거나 잘 입력해준다. 나중에 쓰인다
이름과 리전을 " 아시아 태평양(서울)"로 설정하고 다음을 누른다.
1번을 눌러 해제가 가능한 상태로 만들고, 하단 체크 박스 안에 있는 두개는 비활성화 아래 두개는 활성화 한다. 2번을 클릭해야 확인이 되고 다음을 누를 수 있다.
이제 설정을 확인하고 버킷을 만들고 끝낸다.
2. 버킷 설정 변경
만들어진 버킷을 클릭한다
권한을 변경해주어야 접근이 가능한데
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>위의 내용을 복사하여 CORS설정을 해준다
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
Uploading Photos to Amazon S3 from a Browser - AWS SDK for JavaScript
If you enable access for unauthenticated users, you will grant write access to the bucket, and all objects in the bucket, to anyone in the world. This security posture is useful in this example to keep it focused on the primary goals of the example. In man
docs.aws.amazon.com
s3설정이 끝났으므로, 이후 이 페이지를 이용하여 vuejs에 올릴 수 있게 한다.
위 페이지에서 Amazon Cognito Console로 들어간다.
https://ap-northeast-2.console.aws.amazon.com/cognito/home?region=ap-northeast-2#
https://ap-northeast-2.console.aws.amazon.com/cognito/home?region=ap-northeast-2
ap-northeast-2.console.aws.amazon.com
사이트가 나오면 자격증명 풀 관리에 들어간다.
그리고 새 자격 증명 풀 만들기를 선택
지역이 동일해야 접근이 가능하므로 서울 리전을 선택하고
그리고 이름, 인증되지 않은 자격 증명에 대한 엑세스를 활성화하고 풀을 생성한다.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:*"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME/*",
"arn:aws:s3:::BUCKET_NAME"
]
}
]
}
위 의 코드 블럭의 내용을 복사 붙여넣기 한 후, 버킷 네임만 바꾸고 허용을 누른다.
그렇다면 인증 id가 생성된다.
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
Uploading Photos to Amazon S3 from a Browser - AWS SDK for JavaScript
If you enable access for unauthenticated users, you will grant write access to the bucket, and all objects in the bucket, to anyone in the world. This security posture is useful in this example to keep it focused on the primary goals of the example. In man
docs.aws.amazon.com
이제 이 코드의 아래에 있는
<!DOCTYPE html>
<html>
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
<script src="./app.js"></script>
<script>
function getHtml(template) {
return template.join('\n');
}
listAlbums();
</script>
</head>
<body>
<h1>My Photo Albums App</h1>
<div id="app"></div>
</body>
</html>코드를 만드들고
var albumBucketName = 'BUCKET_NAME';
var bucketRegion = 'REGION';
var IdentityPoolId = 'IDENTITY_POOL_ID';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: albumBucketName}
});
function listAlbums() {
s3.listObjects({Delimiter: '/'}, function(err, data) {
if (err) {
return alert('There was an error listing your albums: ' + err.message);
} else {
var albums = data.CommonPrefixes.map(function(commonPrefix) {
var prefix = commonPrefix.Prefix;
var albumName = decodeURIComponent(prefix.replace('/', ''));
return getHtml([
'<li>',
'<span onclick="deleteAlbum(\'' + albumName + '\')">X</span>',
'<span onclick="viewAlbum(\'' + albumName + '\')">',
albumName,
'</span>',
'</li>'
]);
});
var message = albums.length ?
getHtml([
'<p>Click on an album name to view it.</p>',
'<p>Click on the X to delete the album.</p>'
]) :
'<p>You do not have any albums. Please Create album.';
var htmlTemplate = [
'<h2>Albums</h2>',
message,
'<ul>',
getHtml(albums),
'</ul>',
'<button onclick="createAlbum(prompt(\'Enter Album Name:\'))">',
'Create New Album',
'</button>'
]
document.getElementById('app').innerHTML = getHtml(htmlTemplate);
}
});
}
function createAlbum(albumName) {
albumName = albumName.trim();
if (!albumName) {
return alert('Album names must contain at least one non-space character.');
}
if (albumName.indexOf('/') !== -1) {
return alert('Album names cannot contain slashes.');
}
var albumKey = encodeURIComponent(albumName) + '/';
s3.headObject({Key: albumKey}, function(err, data) {
if (!err) {
return alert('Album already exists.');
}
if (err.code !== 'NotFound') {
return alert('There was an error creating your album: ' + err.message);
}
s3.putObject({Key: albumKey}, function(err, data) {
if (err) {
return alert('There was an error creating your album: ' + err.message);
}
alert('Successfully created album.');
viewAlbum(albumName);
});
});
}
function viewAlbum(albumName) {
var albumPhotosKey = encodeURIComponent(albumName) + '//';
s3.listObjects({Prefix: albumPhotosKey}, function(err, data) {
if (err) {
return alert('There was an error viewing your album: ' + err.message);
}
// 'this' references the AWS.Response instance that represents the response
var href = this.request.httpRequest.endpoint.href;
var bucketUrl = href + albumBucketName + '/';
var photos = data.Contents.map(function(photo) {
var photoKey = photo.Key;
var photoUrl = bucketUrl + encodeURIComponent(photoKey);
return getHtml([
'<span>',
'<div>',
'<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
'</div>',
'<div>',
'<span onclick="deletePhoto(\'' + albumName + "','" + photoKey + '\')">',
'X',
'</span>',
'<span>',
photoKey.replace(albumPhotosKey, ''),
'</span>',
'</div>',
'</span>',
]);
});
var message = photos.length ?
'<p>Click on the X to delete the photo</p>' :
'<p>You do not have any photos in this album. Please add photos.</p>';
var htmlTemplate = [
'<h2>',
'Album: ' + albumName,
'</h2>',
message,
'<div>',
getHtml(photos),
'</div>',
'<input id="photoupload" type="file" accept="image/*">',
'<button id="addphoto" onclick="addPhoto(\'' + albumName +'\')">',
'Add Photo',
'</button>',
'<button onclick="listAlbums()">',
'Back To Albums',
'</button>',
]
document.getElementById('app').innerHTML = getHtml(htmlTemplate);
});
}
function addPhoto(albumName) {
var files = document.getElementById('photoupload').files;
if (!files.length) {
return alert('Please choose a file to upload first.');
}
var file = files[0];
var fileName = file.name;
var albumPhotosKey = encodeURIComponent(albumName) + '//';
var photoKey = albumPhotosKey + fileName;
s3.upload({
Key: photoKey,
Body: file,
ACL: 'public-read'
}, function(err, data) {
if (err) {
return alert('There was an error uploading your photo: ', err.message);
}
alert('Successfully uploaded photo.');
viewAlbum(albumName);
});
}
function deletePhoto(albumName, photoKey) {
s3.deleteObject({Key: photoKey}, function(err, data) {
if (err) {
return alert('There was an error deleting your photo: ', err.message);
}
alert('Successfully deleted photo.');
viewAlbum(albumName);
});
}
function deleteAlbum(albumName) {
var albumKey = encodeURIComponent(albumName) + '/';
s3.listObjects({Prefix: albumKey}, function(err, data) {
if (err) {
return alert('There was an error deleting your album: ', err.message);
}
var objects = data.Contents.map(function(object) {
return {Key: object.Key};
});
s3.deleteObjects({
Delete: {Objects: objects, Quiet: true}
}, function(err, data) {
if (err) {
return alert('There was an error deleting your album: ', err.message);
}
alert('Successfully deleted album.');
listAlbums();
});
});
}나머지는 붙여넣으면 되는데, 이후에 첨부하도록 한다..
이후 이 코드를 이용하여 한 코드내에
이렇게 만들고 실행하면
그러면 이렇게 실행이 되고. 저장 및 실행이 된다.
추가 디테일은
나중에 추가하도록 한다.
'웹 기술' 카테고리의 다른 글
| Django(장고) aws에서 실행시키기! - aws 배포 (0) | 2020.09.25 |
|---|