s3 스토리지 +정적웹사이트

# 개요

s3는 simple storage service의 약자이다. s3가 세 번 들어간다는 뜻.

말그대로 우리가 구글클라우드나 뭐 네이버클라우드에다가 사진들 넣어두고 쓰는 뭐 그런 느낌의 서비스다.

데이터파일을 넣고빼고 쓸 수 있는데, 이런 개인의 스토리지용으로도 사용가능하지만, 프로그래밍에서 여러 데이터들을 사용하는거에 더욱 최적화되어있는듯하다.

우리 어릴떄는 외장하드나 USB처럼 로컬디바이스에 데이터를 저장했는데 쓰다보면 데이터 날아가거나 몇년후 꺼내보면 데이터상태가 안좋은 경우가 많았다. 그래서 이거 쓰면 좋은듯

가용성이 좋고 안전하고 이런건 뭐 내실력으로 대충 아 그렇구나 정도로 넘어가고 aws광고문구라고 생각하고 일단 포스팅한다.

 

 

# s3구조

s3는 객체형식으로 관리된다. 그러니까 파일하나가 객체가 된다.

일단 s3에 muzzi-bucket이라는 버킷을만들고 여기에 이미지 파일 head.png란 이름으로 하나 넣었다. 그리고 속성을 보자.

보면 단순히 head.png파일을 넣은것 뿐인데, 키 값과 객체 URL이라고 있다.

난 js에서 객체란 개념을 배웠는데 비슷한것 같다.

키가 js 객체에서 키값이고 데이터는 값이겠지?

 

또한 객체 URL을 잘 살펴보면

이런식으로 URL앞은 버킷이름, 리전, 파일이름이 URL으로 작동된다. 저기 접속하면 다운받아짐.

s3접근정책을 수정해줘야 저 url로 접속해서 데이터를 볼수 있는것같음. 이건 좀따 해볼거임

이 버킷 객체 구조를 js객체형식으로 써보면,

const muzzibucket = {
    'head.png': '이미지 데이터..'
}

이런느낌일듯

# 폴더자체를 넣으면?

이런식으로 test라는 폴더자체를 넣었다.

그리고 그 폴더에는 txt1.txt, txt2.txt파일이 들어있다. url은 어떻게 될까?

저렇게 기존에 있던 URL에 /test/txt1.txt으로 된다.

약간 js 코드로 쳐보면,

const muzzibucket = {
    'test':{
        'txt1.txt' : 'txt1.txt 데이더...',
        'txt2.txt' : 'txt3.txt 데이더...'
    }
}

이런 느낌일듯?

 

 

# s3버킷을 만들어보자

콘솔 검색창에 s3검색하자. s3콘솔로 ㄱ

오른쪽에 '버킷만들기' 버튼을 누르자.

버킷이름을 정해주자. 난 muzzi-bucket으로 잡았다.

ACL은 버킷에 접속할수 있고 작업하는 그런걸 하는것같음. 잘모르겠다.

 

암호화는 s3가 기본적으로 데이터들을 암호화해서 관리한다고 한다. 그래서 더 안전하다고한다.

 

난 다 기본설정으로 놨다

'버킷만들기' 버튼을 클릭하자.

우리가 만들려고 했던 muzzi-bucket이 잘 만들어졌다.

 

 

 

# 버킷에 파일 넣기

화면에서 바로 muzzi-bucket링크를 클릭하자.

버킷이 비어있다. 여기에 바탕화면에서 원하는 파일을 끌어와서 넣으면 된다.

난 바탕화면에 있던 index.html파일을 드래그앤 드롭으로 넣었다.

위 화면처럼 저렇게 화면이 좀 바뀐다.

화면이 바뀌면서 index.html파일이 잘 적용됐다.

'업로드'버튼을 누르자.

업로드가 잘 되었단다. '닫기'버튼을 누르고 나가자.

잘 올라갔다.

객체정보를 보면 크기는 374바이트, 뭐 이것저것 많이 나와있다.

 

참고로 난 head.png또한 muzzi-bucket에 넣었다.

 

 

 

# 버킷데이터에 다운로드

아까 업로드했던 head.png를 다운받고 싶다.

그럼 버킷안에서 head.png를 클릭하자.

속성페이지로 넘어가는데, 저기 우측 상단의 '다운로드'버튼을 누르면 해당 이미지 파일을 다운 받을 수 있다.

 

 

 

# 객체 url로 접근하기

객체 속성이 보이는데, 저기 url이 있다.

접속해보자.

어라? access denied가 떴다.

 

 

 

# 왜일까?

다운로드 버튼을 눌러서 다운받으려고 헀던거, url을 눌러서 다운받으려 한것, 둘다 해당 파일에 접근하는거다.

다운로드 버튼을 눌러서 받은건 잘 동작했다. 하지만 왜 url은 access denied가 뜬걸까?

 

다운로드 버튼을 클릭할때는 aws에 로그인한 정보도 같이 전송되는것 같다.

그래서 이 버킷의 주인공인 내가 다운로드 하려고 한거니까 문제없이 다운이 잘 된거다.

 

하지만 url로 접속한건 브라우저가 url로만 다운로드 요청을 한거다. 버킷주인인 내가 다운로드를 요청한건지, 먼나라 이웃나라 중국인이 악의적으로 요청한건지 구분을 못한다. 그래서 기본적으로 거부를 한거다.

 

 

# 권한을 열자!

버킷에서 권한탭으로 드가자.

버블릭 엑세스 차단이 활성화 되어있다. 우리가 버킷만들때 기본설정으로 하였는데

이게 이걸 풀어줘야한다.

'편집'으로 드가자.

저기 체크되어있는걸 해제한다.

'변경 사항 저장'을 클릭하자.

아까 활성화였던 퍼블릭액세스차단이 비활성화로 바뀌었다.

 

 

 # 안되는데?

아까 head.png의 url로 브라우저 접속을 하였지만 아직도 access denied상태이다.

 

버킷정책을 만들어줘야하기 때문이다.

 

 

# 버킷정책만들기

아까 퍼블릭액세스차단 푼 화면에서 스크롤을 좀 내리면

버킷정책이 나온다. 정책이 없단다.

참고로 정책이 아무것도 없으면 기본적으로 거부를 한다.

우리가 브라우저로 url을 입력해서 다운하려고했을때 퍼블릭엑세스는 허용됐지만 버킷정책이 없어서 기본적으로 거부된거라 access denied가 된거다.

암튼 편집을 누르자.

 

뭘적으라는데 뭘 적으라는지 모르겠다.

우측 상단에 '정책 생성기'버튼을 누르자.

 

요상한 이런 새창이 뜨는데, 

정책 타입을 S3 Bucket Policy를 누르샘. S3버킷정책을 만들거라는뜻.

Effect는 allow를 하자. 위에도 설명했듯 정책이 아무것도없으면 기본적으로 deny이다.

우리는 브라우저가 접속하는걸 허용해줄거므로 allow.

principal은 객체에 접근하는 주체가 누구냐라는거란다. 우린 브라우저로 접속가능하게 할거므로

모든 주체가 접근가능해야한다. 때문에 *을 적어주자.

action은 getObject를 선택한다. 스크롤 존나내리면 보인다. 알파벳순이라..

 

정책생성기 페이지 창을 끄지말고 아까 정책생성기버튼이 있던 탭으로 돌아가서 버킷 ARN을 복사하자.

ARN은 Amazon Resource Name의 약자인데, 리소스마다 붙어있는 아이디? 같은 느낌이다.

버킷정책에 이 정책이 어떤 버킷에 사용될건지 명시해줘야하기때문에 복사한다.

정책생성기 창으로 돌아와서 복사한 ARN을 저기 ARN 입력창에다가 복분하고 마지막으로 'Add Statement'버튼을 눌러주자.

 

이런식으로 우리가 원한 정책이 표에 추가되고 'Generate Policy' 버튼을 누를 수 있게된다.

다른 권한도 더 추가하면 저 표에 추가될거다. 

아래 'Generate Policy' 버튼을 누르자.

그러면 요런 JSON파일 스트링이 뜬다. 

우리는 브라우저에서 객체데이터에 접근가능하게 하는게 목적이다.

여기서 주의할점은!! 

저기 Resource에 있는 뭔 값에다가 /*을 넣어줘야한다.

url같은 느낌인데 muzzi-bucket안에있는 모든 키값에 접근가능하다는걸 설정해줘야한다.

바꾸었다.

그럼 이 JSON스트링 통쨰로 복사를 하자.

아까 버킷정책 페이지로 돌아가서 복붙한 JSON내용을 넣자.

그리고 아래에 '변경 사항 저장' 버튼을 누르면

버킷정책이 편집되었다.

 

 

# 다시 아까 head.png의 url로 접속해보자.

와우 이제 사진이 잘 보여진다. 브라우저에서 url로 접속해도 데이터가 잘 받아진걸 알 수 있다.

 

 

 

# index.html도 접속되니?

아까 muzzi-bucket안에 index.html파일도 넣어놨었다.

이 객체의 index.html파일에 url로 접속하면 이게 html파일이니까 이 html이 브라우저에서 뿌려져서 웹사이트가 뜨지 않을까?

해보자.

저 url로 접속해보면..

잘 된다.

참고로 아까 head.png가 사진으로 뜨는데, 이건 html파일내의 이미지 태그에서 src 아까 head.png파일 url을 입력해놓은거다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>hello muzzi world</p>
    <img
      src="https://muzzi-bucket.s3.ap-northeast-2.amazonaws.com/head.png"
      alt=""
      srcset=""
      style="width: 100%"
    />
  </body>
</html>

코드는 이렇다.

 

 

 

# 정적 웹사이트 호스팅

버킷드가서 속성탭을 보자.

정적웹사이트 호스팅이 비활성화 되어있다. '편집' 버튼을 누르자.

활성화로 바꿔주자.

인덱스 문서에 index.html을넣으면 저 파일로 드간다는거다.

리다이렉션 규칙은 뭔지 잘 모르겠는데 약간 nginx엔진에서 리다이렉션 설정하는거랑 비슷한 느낌인듯.

암튼 오늘은 s3의 기초에 대해서 포스팅 하려고 한거니까.. 자세히는 안알아볼래

 

 

 

# 정적 웹사이트 호스팅이랑 그냥 index.html의 도메인으로 접속하는거랑 뭐가 다를까?

난 맨처음 이 두 차이가, index.html파일로 접속할 경우 html파일만 적용되고 css나 js파일은 연결안될줄 알았다.

하지만 

이렇게 버킷에 템플릿 통째로 넣었다.

그리고 객체 URL로 접속해봤따.

index.html파일의 객체 URL로 접속했는데 잘 접속된다.

보면 알겠지만 css js파일 다 적용되었다.

 

퍼블릭 엑세스를 키고 접속해도 뭐 당연히 잘 접속된다.

 

두 방식의 차이는 아마 정적웹사이트 호스팅으로 최적화할수 있고 TSL인증서(구 SSL)나 프록시설정등 많은걸 웹배포에 최적화할 수 있는 차이 같다.

또한 URL도 서로 다르다.

정적웹사이트 호스팅인경우는 URL이 

https://muzzi-bucket.s3.ap-northeast-2.amazonaws.com/index.html

이렇다.

 

정적웹사이트 호스팅의 경우 속성탭의 스크롤 쭉쭉 내려서 정적웹사이트 호스팅 박스에 URL이 있는데

http://muzzi-bucket.s3-website.ap-northeast-2.amazonaws.com

이렇게 나 웹사이트다~ 말해주고 있다.

 

뭐 그렇더라.