aws 정적 웹사이트 호스팅 (Arch-1)

정적 웹 사이트는 백엔드 처리 없이 고정 콘텐츠를 갖는다. 그러한 사이트는 HTML 페이지, 이미지, 스타일 시트 및 웹 사이트를 렌더링하는데 필요한 모든 파일을 포함하지만 서버 측 스크립팅 또는 데이터베이스가 없습니다. 원하는 경우, 웹 페이지는 사용자의 웹브라우저에서 실행 되는 JavaScript를 사용하여 상호 작용하고 프로그래밍 로직을 실행할 수 있다. Amazon Simple Storage Service(Amazon S3)에 원하는 콘텐츠를 업로드하고 공개적은 액세스를 허용하여 손쉽게 정적 웹 사이트를 호스팅할 수 있습니다. Amazon S3를 사용하면 서버 없이도 인터넷을 통해 언제 어디서든 원하는 양의 데이터를 저장하고 검색할 수 있다. 웹 페이지를 통해서 내가 버킷에 올린 객체에 접근한다. S3를 이용해서 웹 포스팅을 하여 보겠다. (s3 버킷 생성과 동시에 URL이 생성되어 웹 포스팅이 가능해진다.)

먼저 Amazon S3에 버킷을 생성하겠다. Service에서 S3를 찾아서 클릭한다.

Service에 들어간 뒤 create bucket을 선택한다. (Amazon S3 버킷 이름은 전역 수준에서 고유하며, 네임 스페이스는 모든 AWS 계정이 공유한다. 따라서 버킷이 생성된 후에는 해당 버킷이 삭제될 때 까지 어떤 AWS 리전에서도 다른 AWS 계정이 해당 버킷 이름을 사용할 수 없다.)

이름은 website-796으로 입력한 후 next 클릭!(Region도 확인한다.)

태그를 사용해서 버킷에 프로젝트 코드, 비용 센터, 소유자 등의 추가 정보를 추가할 수 있다. Tag key는 Department, Value는 Marketing으로 한 후 next 클릭!

버킷에 대한 public access는 기본적으로 차단된다. 정적 웹 사이트의 파일은 공개적으로 액세스할 수 있어야 하므로 엑세스를 허용해야 한다. (모든 옵션 선택 해제)

Permissions를 확인한 후 버킷을 생성한다.

무사히 버킷이 생성되었다. 새 버킷의 이름을 클릭한다.

Properties(속성) 탭을 클릭하여서 정적 웹 호스팅을 클릭한다.

웹 사이트가 잘 작동하나 확인하기 위해 Endpoint 링크를 클릭한다.

웹 사이트가 아직 구성되지 않았기 때문에 404 Not Found 오류가 발생한다. 나중에도 확인하기 위해 웹사이트는 열어 두었다.

다시 Console로 돌아가 웹사이트 구성을 위해 Use this bucket host a website를 클릭한다. 웹사이트의 기본 document을 index.html 파일로 설정하고 저장한다.

무사히 Bucket이 hosting 되었음을 확인할 수 있다.

버킷생성과 정적 웹호스팅 작업이 끝났다. 이제 만든 버킷에 콘텐츠를 업로드하여 보겠다. 버킷에 정적 파일을 업로드할 수 있다.

Add files 선택한다. (drag and drop으로도 업로드가 가능하다.)

임의로 미리 받아 놓은 index.html(amazon), script.js, style.css를 선택하였다.

List 확인하고 upload를 선택한다.

기존에 열어놓았던 웹 페이지를 새로고침하면 403 Forbidden에러가 나온다. Amazon S3에 정적 웹 사이트가 호스팅되었지만 콘텐츠가 비공개라는 의미이다.

객체에 다한 엑세스 활성화를 해보겠다. Amazon S3에 있는 객체는 기본적으로 비공개이다. 이렇게 하면 조직의 데이터를 안전하게 유지할 수 있다. 이 작업에서는 객체애 대한 액세스를 활성화한다.

기존의 웹 페이지를 새로고침 해보겠다.(index.html이 무사히 작동한다.)

웹 사이트를 업데이트하여 보겠다. Html 파일을 편집하고 Amazon S3 버킷에 다시 업로드하여서 웹사이트를 변경하겠다. Amazon S3는 object storage service(객체 스토리지 서비스)이므로 전체 파일을 업로드해야한다. 객체 내의 콘텐츠는 편집할 수 없으므로 전체 객체를 교체해야한다.

기존의 index.html파일을 연결프로그램을 메모장을 바꾸겠다.

그 후 Served from Amazon S3라는 부분에 create by duck을 추가하고 파일을 저장!

기존의 index.html을 삭제하고 다시 index.html를 업로드하고 make public하였다.

그 후 웹 페이지를 새로 고침 해보았다. (무사히 바뀌었다.)

삭제 실수 방지를 위해 versioning 기능도 활성화 해보겠다. (데이터 복원, reload)

다시 console창으로 와 overview(개요에서 versioning 기능 활성화!)

Index.html을 삭제하겠다.

삭제할 objects를 확인하고 삭제!

Index.html이 삭제되어 웹 페이지도 정상작동하지 않는다.

삭제 후 versions기능을 enable함으로써 versions기능이 생겨났고 Hide에서 Show로 바꿔준다. 그렇게 되면 삭제한 index.html 파일을 확인할 수 있다.

삭제한 index.html을 다시 actions에서 delete시켜준다.

objects확인하고 delete한다.

다시 versions를 show에서 hide로 바꾼 결과 무사히 복원되었음을 확인할 수 있다.(롤백)

웹 페이지도 정상작동한다.

그러면 무조건 versioning 기능을 사용하는 것이 좋지 않나 생각할 수 있지만 version기능은 오브젝트를 삭제해도 실제로는 삭제 안하고 그대로 복원 해놓는다. 그만큼 용량이 많이 필요함으로써 비용이 더 부과된다.

이제 인터넷에서 정적 웹 사이트에 접속할 수 있다. Amazon S3에 호스팅된 것이므로, 서버 없이도 가용성이 매우 높으며 많은 양의 트래픽을 처리할 수 있다. 또한 사용자가 정적 웹사이트에 접속할 떄 도메인 이름을 사용할 수 있다.