AWS S3를 활용한 웹 호스팅 방법

안녕하세요 :) 오늘은 S3를 이용해 웹호스팅 하는 방법을 알려드리고자 합니다.

S3? 하시면 모두 이미지 전용 서버로 아시는데요 S3는 웹호스팅도 가능하고, 백업 서버로도 사용합니다. 

또 S3에는 생명주기라는 개념도 있어 자주 사용하지 않은 이미지는 s3 glacier로 전환 하면됩니다.. 

이처럼 S3로 여러방면으로 활용이 가능합니다 :)

 

 

1. AWS S3로 웹호스팅을 하려면 버킷을 생성하자

AWS 콘솔로 로그인 하여 S3 버킷생성 버튼을 클릭합니다. 

 

S3 버킷생성

자 위 화면이 나올텐데요. 여기서 가장 주의할점이 있습니다. 버킷이름을 도메인이름과 같게 해야합니다.

ex) sangwon.naver.com 으로 도메인이름을 만들 예정이라면 버킷이름도 sangwon.naver.com으로 해야합니다.  이부분을 몰라 실수 하시는 분들이 매우 많습니다.

 

S3 버킷이름생성

이렇게 위와 같이 버킷이름을 도메인할 주소이름으로 해서 다음버튼을 누르고, 권한 설정은 모두 퍼블릭으로 해줍니다. 왜냐구요? 웹서버로 사용하여 모든 유저가 접속하기 위함입니다.

 

S3 퍼블릭 설정

되셨나요? 이제 만들어진 S3로 들어가셔서 속성 메뉴로 들어갑니다. 그리고 아래 사진과 같이 정적 웹 호스팅을 클릭합니다. 

S3 정적 웹호스팅 사용

 

위 사진과 같이 정적 웹 사이트 호스팅 인덱스 문서에 메인으로 보일 페이지이름을 명시해 주고 저장을 누르면 해당 S3는 웹호스팅 서버가 됩니다.. 참 쉽죠잉? 심지어 S3는 몇만 요청까지 프리티어로 사용가능하니 웹호스팅 업체를 이용하는것보단 훨씬 이득이라고 생각합니다.

 

2. S3 세부 설정 ( 버킷정책, CORS 구성)

 

S3 버킷정책과 CORS 부분만 수정하면 해당 S3는 public이 되어 클라이언트에서 접속이 가능해집니다.

권한으로 들어가셔서 아래와 같이 버킷 정책 편집기를 사용합니다. Resouce 에 값은 방금 만든 버킷이름으로 해주시면 됩니다. (그럼 각자마다 저 값은 다르겠쬬?)

 

버킷정책

아래 소스를 제공해드리겠습니다.

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

아래 소스는 CORS 구성란에 그대로 입력하시면 됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

 

3. S3에 html 파일과 js,css 업로드 

 

html 업로드

main.html 이 있는것을 볼 수 있는데, 전단계 s3 호스팅 설정에서 인덱스문서를 main.html으로 설정했기 때문입니다.

 

 

4. 서버로부터 값을 가져올 수 도 있는지?

 

네! 백엔드(java, node.js, php ...) 등등 같이 사용합니다. 그럼 해당 소스파일을 s3에 업로드 하냐구요? 정답은 아닙니다.

이때는 AWS API Gateway서비스와 연계하여 사용하면 됩니다. 프론트에서는 ajax를 사용하면 되니깐요 !! ㅎㅎㅎ

 

필자같은 경우에는 급하게 디비로 데이터를 가져와 보여줄때 사용합니다.  AWS API Gateway, Lambda, DynamoDB 이렇게 구성해서요 ㅎㅎ 이 아키텍쳐를 바로 Serverless 구조라고 칭합니다.

 

 

이상입니다. 서버리스가 무엇인지, s3 호스팅 유지방법 등등 궁금하신 사항은 댓글 감사하겠습니다 :)