aws S3 를 이용한 정적 웹사이트 배포하기

🚥 들어가며

개발자에게 있어 개발은 물론 중요하지만, 그만큼 자신이 만든 결과물을 배포하고 운영하면서 보완해 나가는 것 또한 중요합니다. 사이트를 배포하는 데 있어 어느곳에 배포하는지에 대한 선택지는 다양합니다. 흔히들 aws의 ec2의 서비스를 많이 사용합니다. 하지만 여러분이 간단한 정적 웹사이트를 배포한다면, 직접 서버를 구축하거나 aws의ec2등의 제품을 사용하는것보다는 aws의S3를 이용하는것이 더 적은 노력과 자원으로 동일한 결과물을 낼 수 있습니다.

aws의S3는 Amazon Simple Storage Service(Amazon S3)라는 이름에서 알 수 있듯 간단한 저장소 서비스입니다. 업로더가 파일이나 폴더를 S3를 올리고 사용자는특정 url을 통해 해당 파일들을 접근합니다.(공개 범위는 수정 가능합니다.) 이때 html,css,js 파일과 같은 정적웹사이트를 위한 파일들을 버켓에 저장하면 S3에서는 호스팅기능을 제공하여 정적 웹사이트를 간단하게 배포할 수 있습니다.

또한 aws S3를 사용하면 차후 aws의 다른 제품군인 aws Route 53을 이용해서커스텀 도메인 및 https설정을 할 수 있으며 aws cloudfront를 이용해서 전세계 사람들이 매우 빠른 속도로 여러분의 사이트에 접속할 수도 있게 할 수 있습니다. 이 내용이 더 궁금하시다면 이 링크를 참조해 주시기 바랍니다.

🚧 S3 101

지금부터 우리는 aws S3에 파일들을 올려간단히 정적 웹사이트를 배포해보겠습니다.

  • 우선 aws 에 접속하여 로그인 후 S3에 들어갑니다. 그럼 아래 사진과 같이 대시보드가 나오게 되는데, 우측 중앙 주황색(create bucket)을 클릭합니다.
  • 파일들을 담을 버켓을 생성하는 과정입니다. Bucket name에는 원하는 이름을, AWS Region에는 원하는 지역을(본인이 서비스할 국가에 최대한 가까운 곳으로 하는 것을 추천드립니다). 마지막으로 아래 사진의 빨간색으로 표시된 부분의 체크를 해제한 후(public access를 허용해야 불특정 다수의 사람들이 여러분의 사이트에 접속할 수 있습니다) create bucket 을 클릭합니다.
  • 생성이 완료되었으면 대시보드 화면에 아래 사진과 같이 나옵니다. 생성한 버켓을 클릭합니다. 필자는 deploywebsite라는 이름의 버켓을 생성하였습니다.
  • 아래 사진 1에서 보이는 속성(properties)탭을 클릭합니다.
  • 속성 탭에서 아래로 스크롤 하면 아래 사진에서 보이는 정적 웹 사이트 호스팅(Static website hosting)이라는 영역이 보입니다. 우측의 Edit 버튼을 클릭합니다.
  • 저희는 이 과정을 통해 자신의 버켓을 정적 웹사이트 호스팅하는데 사용할 것이라는 것을 설정할 것입니다. 아래 사진과 같이버튼을 체크한 후 Index document 영역에 index.html을 입력한 후 완료 버튼을 클릭합니다.
  • S3는 저장소입니다. 사이트에 접속하는 사람이 도메인을 통해 접속했을 때 S3에 있는 파일을 가져오게 됩니다. 즉 해당 버켓의 파일을 가져올 수 있는 권한이 필요하고 지금부터 설정 해 줄 것입니다. 세번째 권한(Permissions)탭을 클릭합니다.
  • 해당 탭의 하단에 있는 버킷 정책(Bucket policy)부분 우측의 Edit 버튼을 클릭합니다.
  • 아래 사진에서 나오는 버킷 ARN을 따로 기억해 주시고 정책 생성기(policy generator)버튼을 클릭해줍니다.
  • 아래 사진과 같이 작성해줍니다. 마지막 Amazon Resource Name(ARN)탭에는 아까 기억해둔 버킷ARN에 /* 뒤에 붙여 작성해줍니다. (예 : arn:aws:s3:::deploywebsite/*) 이후 생성 버튼을 누르면됩니다.
  • 생성된 것을 복사 한 후 policy에 붙여넣기 후저장합니다.
  • 거의 다 왔습니다! 이제 객체(Objects)탭으로 와서 업로드(Upload) 버튼을 클릭합니다. 저의경우는 간단하게 helloworld라고 쓰여있는 index.html파일만을 올리겠습니다.
  • 업로드하면 아래와 같은 화면이 나왔습니다. 그러면 끝입니다! 이제 결과를 확인하면 됩니다.
  • 속성(Properties) 탭에서정적 웹사이트 호스팅(Static website hosting) 영역에 있는 아래의 도메인 주소를 클릭합니다.
  • 그러면 아래와 같이 본인이 만든 사이트가 배포된 것을 확인할 수 있습니다.

🚘 마치며

이로써 오늘의이야기를 마칩니다. aws S3를 사용하면, 프리티어 기준 개발용으로 사용시 거의 비용이 발생하지 않습니다. 이와 더불어 aws Route 53, aws Cloudfront 서비스를 이용하신다면, 여러분이 아시는 네이버, 구글 사이트와 같이 여러분이 원하는 도메인으로 전세계사람들이 여러분의 사이트를 빠른 속도로 접속 할 수 있습니다. 이에 대한 포스트는 차후 진행 하겠습니다. 궁금하신 사항은 lak9348@gmail.com로 문의바랍니다.

--

--

contact : lak9348@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store