(AWS) 정적 웹 호스팅을 위한 S3 사용기

오늘은 간단한 사용기를 들고 와봤습니다.

최근에 front 단과 서버를 분리하면서 결론적으로 서버가 두대 필요하게 되었는데, 

문제는 aws 에서 인스턴스 두개 이상을 쓰는 순간 프리 티어가 빨리 소모된다는 사실이죠...!

ec2 프리티어는 1년간 총 750시간을 쓸 수 있게 해주는데, 한 인스턴스 당으로 계산하는게 아니라 인스턴스들의 사용량 합으로 이를 계산합니다.

그래서! 저는 가난한 학생...이기 때문에, S3 로 프론트 호스팅을 제공하고 서버를 ec2 한대로 돌리기로 했습니다.

S3 는 아마존의 클라우드 스토리지 서비스인데요. 자세한건 사실 저도 모르고 ... 웹의 정적 에셋(html, js, css, png 등) 을 저장해놓았다가 제공만 해주는 역할로 씀으로써 프론트쪽 서버를 따로 안두어도 되게 만들었습니다.

이때 cloudFront 라는 서비스를 통해서 S3가 제공할 수 있는 다리 역할을 (?) 하는 것 같고

도메인도 필요하기 때문에 Route53 서비스로 새로운 도메인도 마련을 했습니다. 

그리고 돈이 나갔습니다... 1년에 12달러...

예전에 쓰던 도메인은 지금 api 요청할 때 url 로 쓰고 있는데, 나중에 가서 도메인 결제 기간 끝났을 때도 필요한지는 잘 모르겠네요..

굳이 api 서버도 도메인 네임이 필요한건지.. 아니면 혹시 ip로만 통신할 수도 있는지 ㅎㅎ

어쨌든 그거는 내년 3월에 도메인 만료되면 생각해보도록 하고!

어쨌든 사용기는 이렇습니다!

먼저 aws 관리 콘솔에 들어가면 예전에 비해서 심플해진  gui가 우리를 맞이해줍니다.

거기서 딱 바로 보이는 'build a solution' 이라고 적힌 박스의 왼쪽 아래를 보면 Host a static website 라는 내용이 있습니다.

그거를 누르고! 다시 새로운 웹사이트 만들기 누르고!

웹사이트 이름과 우리가 가지고 있는 코드를 올리기 위해서 구름이 그려진 오른쪽 박스를 누른 다음

바로 아래에 우리의 프론트 에셋을 올려줍니다. zip 파일로 한번에 올릴 수 있도록 쉽게 해놓았더라구요 ㅎㅎ

(아 저는 create-react-app 을 사용하기 때문에 build 한 파일을 압축만 해서 바로 넣었는데, 번들링이 안된 에셋은 어떻게 받아들일지 잘은 모르겠네요.. )

그게 끝나고 나면 다 끝났습니다.

맨 처음에 과정이 잘은 기억이 안나는데 알아서 cloudFront로 cdn 도 연결해주었던 것 같고, 도메인도 그냥 돈만 주면 바로 만들어줍니다 ㅎㅎ

접속하면 바로 ! http://eleclion.org 여기 처럼 호스팅이 됩니다 :)

제가 아마 api 서버를 꺼두었을 거라 데이터는 오지 않겠지만 전체 틀은 아마 보일겁니다

생각보다 되게 쉬워서 좋았는데, 1년 동안 매달 5gb 무료 제공이라 아마도 한동안 계속 쓸 것 같습니다!

이만 여기까지 aws S3 사용기였습니다.!1