S3 스토리지 사용하기 #3 - static 웹사이트로 만들고, 도메인 연결하기.

S3 버킷에 html 파일을 올려서 Static 웹사이트로 만들 수 도 있습니다. 이게 참 별거 아닌거같은데, 요새같이 SPA 형태로 만드는 웹앱에서는 서버리스로 웹앱을 구성할 수 도 있단 얘기입니다!! 필자는 Angular로 웹앱을 만들어 본 적이 있는데, Angular 는 일단 index.html 파일과, 관련된 자바스크립트만 다운로드 되면, 클라이언트단에서 렌더링하기 때문에, 이 S3 Static 웹사이트 기능을 이용해서 서버리스 웹앱을 만들 수 있게 되는것입니다.  (물론 데이터 통신이 필요한경우 API 서버가 필요하긴 합니다만 기본적으로 서버리스 웹앱이 가능해집니다.) 

뭐, 서버리스 웹앱 까지는 아니고, 그냥 파일 주소를 내 도메인으로 사용하려는 용도로도 사용가능하겠습니다. 지금처럼 https://s3.ap-northeast-2.amazonaws.com/xxx.xxxx.xxx/image2.png 같은 주소를 xxx.com/image2.png 로 사용할 수 있게 되겠네요.

1. S3 - 내가 만든 버킷에 들어가봅시다. - Properties - Static website hosting 을 선택합니다.

2. 첫번째 Use this bucket to hosting a webstite  를 선택합니다. index.html 파일은 원하는 파일 이름으로...

3. 요렇게 Bucket Hosting 에 불이 들어오면 완료된것입니다.

4. 그럼 도메인을 연결해 봅니다.

Route-53 서비스로 들어가서 내 도메인을 선택합니다.

5. Create Record Set - 우측에 레코드셋을 입력할 수 있는데요, 버킷 이름과 동일한 이름을 만들어야 합니다! (그래서 s3 버킷 만들 때, 버킷의 이름이 중요합니다)

Alias 를 Yes 로 만들고,  Alias Target 을 눌러보면 처음엔 Loading... 시간이 쫌 걸립니다.

S3 website endpoints 에 내가 만든 버킷 이름이 나타난다면, 그것을 Target 으로 선택 -> Create  버튼 클릭.

6. 연결이 완료되었습니다. 이제 이 입력한 주소로 s3 리소스에 접근할 수 있습니다.

브라우저에 해당 도메인만 입력하면 자동으로 index.html 파일도 열립니다. 이것을 통해 정적인 웹사이트를 만들 수 있겠습니다.