본문 바로가기

Cloud/AWS

[AWS] S3에서 정적 웹 사이트를 만들어보자!


안녕하세요!

 

두루뭉실 블로그의 주인장 두루뭉실 엔지니어입니다!

 

오늘은 AWS의 S3를 활용하여

정적 웹사이트를 구성하는 실습을 해보겠습니다!

 

AWS S3가 무엇인지 궁금하신 분은

 

[AWS]S3서비스에 대하여...

두루뭉실 블로그의 주인장 두루뭉실 엔지니어입니다! 오늘은 본격적으로 AWS의 S3 서비스에 대해 알아보겠습니다! 우선, 오늘도 시작하기 전에 S3 서비스에 대한 공식 문서 링크로 남기겠습니다!

www.cloud-jjunni.com

 

두둥!

 

오늘 실습 역시 AWS Documentation을 참조하여 진행하겠습니다!

 

링크 참조해주세요~!

https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

 

Tutorial: Configuring a static website on Amazon S3 - Amazon Simple Storage Service

Thanks for letting us know this page needs work. We're sorry we let you down. If you've got a moment, please tell us how we can make the documentation better.

docs.aws.amazon.com


0. 진행 순서

 

  1. 버킷 생성
  2. 정적 웹사이트 호스팅 활성화
  3. 퍼블릭 액세스 차단 설정 확인
  4. 버킷 콘텐츠를 공개적으로 사용 가능하도록 설정하는 버킷 정책 추가
  5. 인덱스 문서 구성
  6. 웹사이트 엔드포인트 테스트
  7. 실습 후 뒷정리

1. 버킷 생성

 

우선, 콘솔에 로그인하여 Amazon S3 콘솔을 열어줍니다!

 

1 ) 다음 사진과 같이, 버킷 만들기 선택

 


2) 버킷 만들기 옵션 설정 - 일반 구성

 

버킷 이름에는 <#####.com> 형태의 도메인 이름을 기입하고

AWS 리전을 선택해줍니다!

 

 

cf) 버킷 이름 지정 규칙

- 버킷 이름은 3자(최소)에서 63자(최대) 사이여야 합니다.

- 버킷 이름은 소문자, 숫자, 점(.) 및 하이픈(-)으로만 구성될 수 있습니다.

- 버킷 이름은 문자 또는 숫자로 시작하고 끝나야 합니다.

- 버킷 이름은 IP 주소 형식(예: 192.168.5.4)을 사용하지 않습니다.

- 버킷 이름은 접두사 xn--로 시작해서는 안됩니다.

- 버킷 이름은 접미사 -s3alias로 끝나서는 안됩니다. 이 접미사는 액세스 포인트 별칭 이름 용도로 예약되어 있습니다. 자세한 내용은 액세스 포인트에 버킷 스타일 별칭 사용 단원을 참조하세요.

- 버킷 이름은 파티션 내에서 고유해야 합니다. 파티션은 리전 그룹입니다. AWS에는 aws(표준 리전), aws-cn(중국 리전) 및 aws-us-gov(AWS GovCloud [미국] 리전), 이렇게 세 가지 파티션이 있습니다.

- Amazon S3 Transfer Acceleration에 사용되는 버킷은 이름에 점(.)을 사용할 수 없습니다. Transfer Acceleration에 대한 자세한 내용은 Amazon S3 Transfer Acceleration을 사용하여 빠르고 안전한 파일 전송 구성 단원을 참조하세요.


3) 버킷 만들기 옵션 설정 - 객체 소유권 및 Public Access

 

객체 소유권에 대한 설정을 하겠습니다.

 

그전에, Public Access에 대해 알아보겠습니다.

Public Access 란?

Public Access 권한은 모두에게 액세스 권한을 오픈할 것인지

아니면 임의의 사용자에게는 접근 권한을 제한할 것인지 설정합니다.

 

Public Access에는 4가지 종류가 있습니다.

 

 

위의 설정들은 하단 사진과 같이 일반적으로

모든 퍼블릭 액세스에 대해 차단하여 사용합니다.

 

 

단, 필요시에 각자 필요한 부분에 한해

퍼블릭 제한을 오픈하고 사용하시길 권장합니다. 

 

ACL이란?

ACL은 버킷이나 객체에 대해 요청자의 권한 허용 범위를 어디까지 설정할 것인가에 대해 간단하게 설정할 수 있습니다.

요청자는 일반 퍼블릭 사용자, 계정의 owner, resource group, 특정 사용자가 될 수 있습니다.

 

1 ) ACL 정책이 활성화되어 있다면,,,!

  •  버킷 소유자 선호 :  버킷 소유자는 ACL에 대해 bucket-owner-full-control을 가지고 다른 계정이 버킷에 쓰는 새로운 개체를 소유하고 완전히 제어할 수 있습니다.
  • 객체 라이터 : 객체를 업로드하는 AWS 계정은 객체를 소유하고 완전히 제어하며 ACL을 통해 다른 사용자에게 이에 대한 액세스 권한을 부여할 수 있습니다.

 

2) ACL 정책을 비활성화하면,,?

  • ACL 사용이 중지되고 버킷 소유자는 버킷의 모든 객체를 자동으로 소유하고 완전히 제어합니다.
  • ACL은 더 이상 S3 버킷의 데이터에 대한 권한에 영향을 주지 않습니다.
  • 버킷은 정책을 사용하여 액세스 제어를 정의합니다.

 

결론적으로, S3 버킷 객체 소유권은

S3 버킷에 대해 접근을 할 수 있게 하기 위해

ACL을 활성화시키고 "객체 라이터"옵션을 주겠습니다!

 

 

cf) 퍼블릭 액세스 설정에서 [모든 퍼블릭 액세스 차단]을 했다면,

ACL을 통해 퍼블릭에 대한 권한을 설정하여도 변경되지 않습니다.

 

 

그리고 퍼블릭 액세스를 허용하기 위해

하단의 사진과 같이 모든 퍼블릭 액세스 차단을 풀어줍니다!

 


4) 나머지 옵션

 

나머지 옵션에 대해서는 디폴트 값을 적용해줍니다.

 

[버킷 버전 관리]는 S3의 기능 중 버저닝에 해당됩니다!

 


그리고 버킷을 활성화시켜줍니다!

 

하단의 사진과 같이 버킷이 생성된 것을 확인해줍니다!

 


2. 정적 웹사이트 호스팅 활성화

 

방금 만든 [awscloud.com] 이름을 가진 버킷을 선택하여

"속성" 탭으로 진입해줍니다!

 


쭈우우욱 내려

[정적 웹 사이트 호스팅]을 찾아 "편집"을 눌러줍니다!

 


 편집 화면에서 다음과 같이 세팅해줍니다.

  1. 정적 웹 사이트 호스팅 : 활성화
  2. 호스팅 유형 : 정적 웹사이트 호스팅
  3. 인덱스 문서 : index.html
  4. 오류 문서 : error.html
  5. 리디렉션 규칙 : 디폴트 값(기본 옵션/적지 말기)

 

옵션을 모두 입력했으면, 변경사항 저장을 완료해줍니다!

 

 

cf) 호스팅 유형 중 "객체에 대한 요청 리디렉션"에 대하여

 

루트 도메인이 naver.com이라고 가정하겠습니다.

이때, 우리는 "naver.com"으로 접속 가능하고 "www.naver.com"으로도 접속 가능합니다.

그래서 루트 도메인에 대해 서브 도메인을 붙여주고 이를 리디렉션 하는 것입니다.

즉, "www.naver.com"과 같이 [www.]이라는 서브도메인을 가진 주소를 루트 도메인인 "naver.com"으로 연결시켜 주는 것입니다.

이로써 우리는 "naver.com"과 "www.naver.com" 두 주소 모두로 네이버에 접속할 수 있게 되는 것이지요!


3. 퍼블릭 액세스 차단 확인

 

저희는 앞서, 버킷을 생성하는 과정에서

퍼블릭 액세스 차단을 모두 "비활성화"했습니다.

 

이를, 아래 사진과 같이 권한에 들어가 확인해줍니다!

 

 

버킷 생성 과정에서 

퍼블릭 액세스 옵션을 설정하지 못했다면,

추후에 변경할 수 있음을 알 수 있습니다!


4. 버킷 콘텐츠를 공개적으로 사용 가능하도록 설정하는 버킷 정책 추가

 

참고) JSON 정책 옵션은 하단 링크를 통해 참고해주세요!

 

IAM JSON 정책 요소 참조 - AWS Identity and Access Management

이 페이지에 작업이 필요하다는 점을 알려 주셔서 감사합니다. 실망시켜 드려 죄송합니다. 잠깐 시간을 내어 설명서를 향상시킬 수 있는 방법에 대해 말씀해 주십시오.

docs.aws.amazon.com

 

다음과 같이, JSON형식의 정책을 추가해줍니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<Bucket-Name>/*"
            ]
        }
    ]
}

 

 

 

cf) Version은 버킷 생성에 관한 일자가 아닙니다.

하단의 사진을 참조해주세요!

 


최종적으로, 상단에 [퍼블릭 액세스 가능]이라는 문구

확인할 수 있으면 넘어가셔도 됩니다!

 


버킷 웹 사이트 엔드포인트 테스트를 해봅니다.

 

 

어떤 화면이 나오시나요??

 

네, 맞습니다. 에러가 뜨는 게 당연합니다!

 

왜냐하면, 저희는 정적 웹사이트를 업로드하지 않았기 때문입니다!

 

그럼 이제 인덱스 문서를 만들러 가볼까요??


5. 인덱스 문서 구성

 

AWS의 튜토리얼 문서에는 다음과 같이

시시한 HTML 코드를 업로드하라고 적혀있습니다!

 


우리는 어떤 민족입니까ㅏㅏㅏ!!

 

저희는 실제로 예쁘게 생긴 웹을

S3에 한 번 올려보도록 하겠습니다!

 

가지고 있는 웹 애플리케이션 코드도 괜찮고

없으시다면, 링크를 하나 드리겠습니다!

 

 

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

Landing Page A clean, functional landing page theme

startbootstrap.com

 

Bootstrap 홈페이지에서 무료 템플릿을

S3에다가 업로드해보겠습니다!


다운을 받고, 압축을 풀어줍니다.

 


파일을 개별로 업로드하지 말고,

폴더는 폴더로 파일은 파일로 업로드해주세요!

 


6. 웹사이트 엔드포인트 테스트

 

업로드를 했으니,

엔드포인트 테스트를 해보겠습니다!

 

다음 사진과 같이 엔드포인트 주소에 접속합니다!

 

 

 

과연,,,

두구두구두구두구

 

 

예~~~~~~~~~

 

정적 웹사이트가 호스팅 된 것을 

볼 수 있었습니다ㅏㅏㅏㅏㅏㅏㅏㅏ!!!!!!!!


7.  실습 후 뒷정리

실습을 마쳤습니다!

 

근데 AWS 서비스에 파일을 올려두면,,,

 

요금이 발생하겠죠??

 

실습한 부분들을 호다닥 지워줍니다.

 

비어있는 버킷만 제거가 가능하기 때문에

 

오브젝트들을 먼저 삭제해줍니다!

 

 

버킷을 삭제하면 됩니다!

 


AWS S3 서비스를 어떻게 사용하는지,

튜토리얼을 통해 알아보았습니다!

 

박수!!!!!

 

과정을 짧게 요약하자면,

 

[버킷 생성 - 권한 설정(퍼블릭 액세스) - 객체 업로드 - 엔드포인트 확인]

 

순서로 진행되었습니다!!

 

이상 두루뭉실 블로그의 주인장 두루뭉실 엔지니어였습니다!

 

감사합니다!