S3 버킷만들고 HTML 컨텐츠 올려 정적웹사이트 실제 오픈해보기(#1/2)

0. 먼얘기랴~!

이 글에는 aws S3에 대한 아주 간단한 설명과 신규 버킷을 만들어 보고 초간단 웹게임 html소스를 올려서 정적웹사이트를 구동시켜 보고, 이전시간에 배운 Route 53과 연동시켜서 HTTP(HTTPS아님) 까지 실 도메인으로 서비스 오픈해보겠습니다.

 

참고로 aws 아키텍처 아이콘은 제가 그린게 당연히 아니겠지요. 

https://aws.amazon.com/ko/architecture/icons/

AWS 아키텍처 아이콘

여기 들어가면 AWS 아키텍처 관련 아이콘을 최신정보로 PPT 제공하고 있으니 가져다 사용하시면 되겠습니다.

 

1. S3가 머래유? 냄새만 맡아볼까.

 

Amazon S3

Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조직 및 규정 준수 요구 사항에 맞게 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공합니다.

 

aws 제공 s3 사용설명서

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html

Amazon S3란 무엇인가요? - Amazon Simple Storage Service

 

간단히 말해서 Amazon에서 제공하는 저장소중에 하나인데, 걍 제일 많이 사용하는 파일스토리지라고 생각하면 됩니다.

이것도 어려우면.

 

S3는 권한만 있다면 걍 이늠 저늠 다 가져다 쓸수 있는 HDD(로컬스토리지)보다는 강력한 NAS? 네트웍스토리지? 씨놀로지 같은거? 머 이런겨. 웹서비스까지도 가능하고, 머든 담는다. 객체스토리지니까. 됐재?

 

Amazon 스토리지 들

위에 보면 EBS, EFS 같은 거는 써봤고요. Computing할 때 HDD, Network Strorage 라고 생각하면 되고요.

Backup까지는 써봤는데, 나머지는 아직 사용경험은 없습니다.

암튼 제일 많이쓰고, 머 하나 쓰겠다 하면 빠지지 않고 사용하게될 저장소입니다.

 

2. 바로 하나 맹길어 보자규!

[첫화면]

 

첫화면입니다. 1번 버킷만들기를 클릭합니다.

1. 사용하고 싶은 버킷 이름 입력

s3 버킷의 이름은 중요합니다. 아무렇게 짓지 않도록 합니다. 버킷의 이름은 aws리전과 함께 도메인 형태로 서비스되기때문에 버킷의 이름은 간단히 도메인이름 규칙과 비슷하다고 생각하시면됩니다. 

그렇다면, 버킷이름을 생성할때 당근 중복여부도 지들이 검토를 하겠죠? 도메인이름이니까요.

이는 aws리젼과 함께 적용되니까, 리젼이 다르다면 버킷이름은 같아도 되겠습니다. 다만 리젼이 같다면 버킷이름은 이미 사용되고 있어 안된다 할겁니다. 

또 하나 도메인이름 규칙이니까 당연히 지난시간에 얘기한것처럼 _(언더바)는 안되겠죠. -(대쉬)는 됩니다. 따라서 가능하면 필요하다면 -(대쉬)를 사용해서 이름을 지으면 되겠습니다.

2. AWS리전은 서울로 두겠습니다.

 

저는 dev-easyaws 라는 이름으로 지어보겠습니다.

 

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/bucketnamingrules.html

버킷 이름 지정 규칙 - Amazon Simple Storage Service

위 가이드에서 예제버킷이름만 소개하겠습니다.

 

다음으로 객세소유권입니다.

초기값은 ACL 비활성화로 되어있는데. ACL활성화됨으로 일단 지정하겠습니다.

이 부분은 추후에 다시 언급할 예정입니다.

ACL활성화됨을 선택하면, 버킷소유자선호, 객체라이터 선택박스가 활성화되는데. 그대로 둡니다.

 

다음 모든 퍼블릭 엑세스차단 설정입니다.

기본값은 모든퍼블릭엑세스 차단이 체크되어있는 상태입니다. 체크를 해제합니다. 쫄지마시고.

 

체크해제하면 하단에 현재설정으로 인해 이버킷과 ~~~ 이부분을 체크합니다. 괜찮습니다. 쫄지마시라고.

 

다른부분은 그대로 두고, 마지막 버킷만들기를 클릭합니다.

 

드디어 만들어졌습니다.

1번 만들어진 버킷을 선택하면 2번 부분 버튼메뉴들이 활성됩니다.

위에서 이야기를 못한부분이 있었네요. 중요한 부분입니다.

 

버킷 삭제 주의!!!
한번 만든 버킷을 삭제하는 경우, 삭제한 버킷의 원본은 복구가 불가능하다는 점(100%확실하진 않습니다.)과
동일한 리젼에 같은 이름으로 버킷 만드는 것은 안되는 것으로 알고 있습니다.

이부분은 좀더 찾아보긴해야겠지만, 도메인과 연관되어있고, 만일 다시만든다고 해도 시간이 걸릴겁니다.
따라서 주의를 기울여서 만들어야 합니다.
예를 들어. 우리가 지금 dev-easyaws라는 버킷을 만들었는데, 다른 어떤 사용자도 서울리젼에다 dev-easyaws라는 이름으로 버킷을 만들지 못한다는 얘기입니다.

버킷의 이름을 호스트네임과 도메인으로 일치시키면 실 운영사이트 URL주소로 사용할 수 있다.
동일한 버킷의 이름을 호스트네임으로 Route 53에서 레코드를 등록하여
실제 운영도메인에서 http웹서비스가 가능하다는 것입니다.
CloudFront나 ApiGateway를 사용하지 않은 상태일때 이야기입니다.
아직 언급도 안한 서비스들에 대해 언급하니 좀 당황스러우셨쎄여?
괜찮아유~ 머 이까이꺼 머. 지금은 걍 그런가부다 하셔요.
위에 dev-easyaws로 버킷을 만들었으니
http://???.easyaws.click 으로 서비스 할수 있다는 것입니다.
이따 할거에요. ^^

 

3. 이제 정적 웹사이트 서비스를 만들어보자.

본격적인 삽질의 시작일수 있습니다. 주의하세요!

 

만든 버킷의 이름을 클릭합니다.

 

대뜸 파일 한번 올려보겠습니다.

위에 버킷안쪽으로 들어오면, 위에 탭메뉴로 객체, 속성, 권한... 등 메뉴가 있고, 객체부분이 선택되고 위화면처럼 보일겁니다.

[업로드] 또는 화면 중간에 [업로드]를 클릭하면 파일브라우져가 뜰겁니다. 우리는 이렇게 하지 않고요.

탐색기에서 html파일 두 개를 선택해서 마우스로 드래그 해서 화면에 가져다 놓으면 업로드 창이 뜹니다.

파일이 올라갈때 모습(와~ 진짜 친절하다)

이렇게 두개 파일을 올립니다.

두개 파일 내용입니다. index.html은 텍스트 몇글자, 그리고 error.html은 에러화면입니다. 걍 올리시면 됩니다.

위 파일은 Git 에 올려져 있습니다. 앞으로는 Git에 올려서 공유하도록 하겠습니다.

s3-init이라는 폴더에 위 2개 파일이 있습니다.

Git : https://github.com/sjworldacademy/easyaws

GitHub - sjworldacademy/easyaws: for TStory source

 

2 개 파일이 잘 올라갔습니다.

 

이제 이 2개파일로 정적웹사이트를 한번 만들어보겠습니다.

위에 탭메뉴에서 속성탭으로 이동하고, 

 

스크롤을 내려 멘 하단 정적 웹 사이트 호스팅으로 이동하여 [편집]버튼을 클릭합니다.

 

기본값은 비활성화입니다. 이를 활성화로 체크합니다.

하단에 호스팅유형과 인덱스문서, 오류문서를 입력하라고 나옵니다.

호스팅유형 : 정적웹사이트호스팅으로 그대로 두고

인덱스문서 : index.html

오류문서 : error.html

을 입력하고, 하단에 [변경사항 저장]을 클릭합니다.

 

머 별거 아니쥬? 그려... 별거 아녀 머 이까이꺼 머...

 

1번 링크 앞에 있는 정사각형 2개 겹친거는 누가봐도 그거 복사한다는 거고
끝에 화살표 있는놈 누르면 새창으로 뜨겠죠.

이 정도는 눈치로 해야겼쥬? 괜히 드래그 해서 복사해서 새창띄워서 늫구 그러지 말구.

 

이제 브라우져에 한번 띄워볼게요.

뿌하하하하. 이거 머냐. 403이 머더라? 하지마시고... ^^ 별거 아녀 뭔가 권한이 없다는데?

 

 

눈치가 빠르신 분은 s3 탭메뉴중에서 권한 이라는거를 본거 같은데 하는 분이 있을겁니다.

자 그럼 글루다 가보까요.

 

먼저

여기부분 보면 객체를 퍼블릭으로 설정할 수 있음 이라고 나와있죠?

이 부분이 어떻게 바뀌는지 한번 권한을 조정해볼게요.

 

이렇게 보이죠.

스크롤 좀 내려서 버킷정책 부분에 [편집]버튼을 눌러줍니다.

 

정책예제라던지 정책생성기 하단에 새 문 추가 등은 시간 되시는 분들은 들러서 이것저것 확인해보면 좋겠습니다.

일단 언능언능 우리는 가봐야죠

여기 1번 영역에 아래 json 을 넣어줍니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:Getobject",
            "Resource": "arn:aws:s3:::[버킷명]/*"
        }
    ]
}

위 json형식을 보면 version과 statement가 있고, Sid도 있고, Effect도 있고 한데, 대충 눈치로 때려 잡어유.

Sid부분은 고정된건 아니고 Statement내에 유일값처럼 입력하는 것같고, Effect를 보니 Allow이니까 Deny도 있겠다. 그죠?

Principal이 있는데 이건 *니까 뭔가 다 허용한다는 것 같고, Action이 있는데. s3:Getobject니까 아~ s3에 있는 객체를 가져가도된다는 것같고, 그럼 쓴다면 Putobject도 있겠다. 그죠? 마지막으로 arn~~~ [버킷명]/* 로 되어있는데. 음.. 이게 버킷명을 지정하는 거구나 하실겁니다. 

먼소리야~~!!! ㅋ
걍 특정 버킷(버킷명)에 올라간 객체를 가져가(Getobject)도 좋다 (Allow) 는 야그여.

 

자 그럼 버킷명 부분을 수정해서 적용해보죠.

이제 하단에 [변경사항저장]

 

1번 빨간글씨 보이남요? (퍼블릭엑세스가능) 

 

와~~~ 이제 먼가 되는건가?
그럼 아까 403으로 나왔던 주소로 다시 드가보까?
잘 나온다잉? 와~~~~.
이제 머 ... 

 

error도 잘나오나? 위 주소 뒤에 /abcdef머 있지도 않은놈 해보니 이놈도 잘나오네요.

거바.. .별거 아니재? 이제 머 거의 다왔어유~!

 

#2가 이어집니다.

2022.11.26 - [실전AWS-기본편/S3] - S3 버킷만들고 HTML 컨텐츠 올려 정적웹사이트 실제 오픈해보기(#2/2)

S3 버킷만들고 HTML 컨텐츠 올려 정적웹사이트 실제 오픈해보기(#2/2)

주의!

내용상에 잘못된 정보도 있을 수 있습니다. 내가 아는대로 적는거라.

그리고, 심한 사투리와 반말이 무자비하게 섞여있으니, 임산부 및 노약자는 유의하시기 바랍니다. 알겄쥬?