안전한 정적 웹 사이트 시작하기

이 주제에서 설명하는 솔루션을 통해 도메인 이름에 대한 안전한 정적 웹 사이트를 생성하여 Amazon CloudFront를 시작할 수 있다. 정적 웹 사이트는 HTML, CSS, JavaScript, 이미지 및 비디오와 같은 정적 파일만 사용하며, 서버나 서버 측 처리가 필요하지 않다. 이 솔루션을 사용하면 웹 사이트에서 다음과 같은 이점을 얻을 수 있다.

Amazon Simple Storage Service(Amazon S3)의 내구성이 뛰어난 스토리지 사용 - 이 솔루션은 정적 웹 사이트의 콘텐츠를 호스팅하는 Amazon S3 버킷을 생성한다. 웹 사이트를 업데이트하려면 새 파일을 S3 버킷에 업로드하면 된다.
Amazon CloudFront 콘텐츠 전송 네트워크를 통해 속도 향상 - 이 솔루션은 짧은 지연 시간으로 최종 사용자에게 웹 사이트를 제공하는 CloudFront 배포를 생성한다. 배포는 웹 사이트가 S3에서 직접 액세스하지 않고 CloudFront를 통해서만 액세스할 수 있도록 원본 액세스 ID로 구성된다.
HTTPS 및 추가 보안 헤더에 의해 보호 - 이 솔루션은 AWS Certificate Manager(ACM)에 SSL/TLS 인증서를 생성하고 이를 CloudFront 배포에 연결한다. 이 인증서를 사용하면 배포가 HTTPS를 사용하여 도메인의 웹 사이트를 안전하게 제공할 수 있다.

또한 이 솔루션은 Lambda@Edge를 사용하여 모든 서버 응답에 보안 헤더를 추가한다. 보안 헤더는 웹 서버 응답에서 웹 브라우저에 추가 보안 예방 조치를 취하도록 알려주는 헤더 그룹이다. 자세한 내용은 이 블로그 게시물인 Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront를 참조한다.
AWS CloudFormation으로 구성 및 배포 - 이 솔루션은 AWS CloudFormation 템플릿을 사용하여 모든 구성 요소를 설정하므로 구성 요소 구성보다 웹 사이트의 콘텐츠에 더 집중할 수 있다.

이 솔루션은 GitHub의 오픈 소스이다. 코드를 보거나 끌어오기 요청을 제출하거나 문제를 열려면 https://github.com/aws-samples/amazon-cloudfront-secure-static-site로 이동한다.

1. 솔루션 개요

다음 다이어그램은 이 정적 웹 사이트 솔루션의 작동 방식에 대한 개요를 보여준다.

최종 사용자는 www.example.com에서 웹 사이트를 요청한다.
요청된 객체가 캐싱된 경우 CloudFront가 캐시의 객체를 최종 사용자에게 반환한다.
객체가 CloudFront의 캐시에 없는 경우 CloudFront는 오리진(S3 버킷)에서 객체를 요청한다.
S3는 객체를 CloudFront로 반환하여 Lambda@Edge 오리진 응답 이벤트를 트리거한다.
Lambda@Edge 함수에 의해 추가된 보안 헤더를 포함하여 객체가 CloudFront의 캐시에 추가된다.
(표시되지 않음) 객체가 최종 사용자에게 반환된다. 동일한 CloudFront 엣지 로케이션에 들어오는 객체에 대한 후속 요청은 CloudFront 캐시에서 제공된다.

2. 솔루션 배포

이 안전한 정적 웹 사이트 솔루션을 배포하기 위해 다음 옵션 중 하나를 선택할 수 있다.

AWS CloudFormation 콘솔을 사용하여 기본 콘텐츠가 포함된 솔루션을 배포한 다음, 웹 사이트 콘텐츠를 Amazon S3에 업로드한다.
솔루션을 컴퓨터에 복제하여 웹 사이트 콘텐츠를 추가한다. 그런 다음 AWS Command Line Interface(AWS CLI)를 사용하여 솔루션을 배포한다.

1) 사전 조건

이 솔루션을 사용하려면 다음과 같은 사전 요구 사항이 있어야 한다.

example.com과 같이 Amazon Route 53 호스팅 영역을 가리키는 등록된 도메인 이름. 호스팅 영역은 이 솔루션을 배포하는 동일한 AWS 계정에 있어야 한다. 등록된 도메인 이름이 없는 경우 Route 53에 등록할 수 있다. 등록된 도메인 이름이 있지만 Route 53 호스팅 영역을 가리키지 않는 경우 Route 53를 DNS 서비스로 구성한다.
IAM 역할을 생성하는 CloudFormation 템플릿을 시작할 수 있는 AWS Identity and Access Management(IAM) 권한 및 솔루션의 모든 AWS 리소스를 생성할 수 있는 권한.
이 솔루션을 사용하는 동안 발생하는 비용에 대한 책임은 귀하에게 있다. 비용에 대한 자세한 내용은 각 AWS 서비스의 요금 페이지를 참조한다.

2) AWS CloudFormation 콘솔 사용

CloudFormation 콘솔을 사용하여 배포하려면

AWS에서 시작을 선택하여 AWS CloudFormation 콘솔에서 이 솔루션을 연다. 필요한 경우 AWS 계정에 로그인한다.
AWS CloudFormation 콘솔에서 이 솔루션의 CloudFormation 템플릿을 지정하는 필드가 미리 채워져 있는 스택 생성 마법사가 열린다.

페이지 하단에서 [Next]를 선택한다.
스택 세부 정보 지정 페이지에서 다음 필드에 값을 입력한다.
- SubDomain - 웹 사이트에 사용할 하위 도메인을 입력한다. 예를 들어, 하위 도메인이 www인 경우 웹 사이트는 www.example.com에서 사용할 수 있다. 다음 글머리 기호에 설명된 대로 example.com을 도메인 이름으로 바꾼다.
- DomainName - 도메인 이름(예: example.com)을 입력한다. 이 도메인은 Route 53 호스팅 영역을 가리켜야 한다.
마친 후에는 다음을 선택한다.
(선택 사항) 스택 옵션 구성(Configure stack options) 페이지에서 태그 및 기타 스택 옵션을 추가한다.

마친 후에는 다음을 선택한다.
검토 페이지에서 페이지 하단으로 스크롤한 다음 기능 섹션에서 두 상자를 선택한다. 이러한 기능을 통해 AWS CloudFormation은 스택의 리소스에 대한 액세스를 허용하는 IAM 역할을 생성하고 리소스의 이름을 동적으로 지정할 수 있다.
[Create stack]을 선택한다.
스택 생성이 완료될 때까지 기다린다. 스택은 일부 중첩된 스택을 생성하고 완료하는 데 몇 분 정도 걸릴 수 있다. 완료되면 상태가 CREATE_COMPLETE로 변경된다.

상태가 CREATE_COMPLETE이면 https://www.example.com으로 이동하여 웹 사이트를 본다(www.example.com을 3단계에서 지정한 하위 도메인 및 도메인 이름으로 바꾼다). 웹 사이트의 기본 콘텐츠가 표시된다.

웹 사이트의 기본 콘텐츠를 사용자 고유의 콘텐츠로 바꾸려면

https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔을 연다.
이름이 amazon-cloudfront-secure-static-site-s3bucketroot-로 시작하는 버킷을 선택한다.

Note

이름에 s3bucketlogs가 아닌 s3bucketroot가 있는 버킷을 선택해야 한다. 이름에 s3bucketroot가 있는 버킷에는 웹 사이트 콘텐츠가 포함되어 있다. s3bucketlogs가 있는 버킷에는 로그 파일만 포함되어 있다.
웹 사이트의 기본 콘텐츠를 삭제한 다음, 직접 업로드한다.

Note

이 솔루션의 기본 콘텐츠가 있는 웹 사이트를 본 경우, 일부 기본 콘텐츠가 CloudFront 엣지 로케이션에 캐싱될 가능성이 높다.. 최종 사용자가 업데이트된 웹 사이트 콘텐츠를 볼 수 있도록 하려면 파일을 무효화하여 CloudFront 엣지 로케이션에서 캐싱된 복사본을 제거한다. 자세한 내용은 파일 무효화 단원을 참조한다.

3) 로컬로 솔루션 복제

사전 조건

이 솔루션을 배포하기 전에 웹 사이트 콘텐츠를 추가하려면 Node.js 및 npm이 필요한 솔루션의 아티팩트를 로컬로 패키징해야 한다. 자세한 내용은 https://www.npmjs.com/get-npm 단원을 참조한다.

웹 사이트 콘텐츠를 추가하고 솔루션을 배포하려면

https://github.com/aws-samples/amazon-cloudfront-secure-static-site에서 솔루션을 복제하거나 다운로드한다. 복제하거나 다운로드한 후 명령 프롬프트 또는 터미널을 열고 해당 amazon-cloudfront-secure-static-site 폴더로 이동한다.
다음 명령을 실행하여 솔루션의 아티팩트를 설치하고 패키징한다.
```
make package-static
```
웹 사이트의 콘텐츠를 www 폴더에 복사하여 기본 웹 사이트 콘텐츠를 덮어쓴다.
다음 AWS CLI 명령을 실행하여 솔루션의 아티팩트를 저장할 Amazon S3 버킷을 생성한다. example-bucket-for-artifacts를 사용자 고유의 버킷 이름으로 바꾼다.
```
aws s3 mb s3://example-bucket-for-artifacts --region us-east-1
```

솔루션의 아티팩트를 AWS CLI 템플릿으로 패키징하려면 다음 AWS CloudFormation 명령을 실행한다. example-bucket-for-artifacts를 이전 단계에서 생성한 버킷의 이름으로 바꾼다.

aws cloudformation package \
    --region us-east-1
    --template-file templates/main.yaml \
    --s3-bucket example-bucket-for-artifacts \
    --output-template-file packaged.template

다음 명령을 실행하여 AWS CloudFormation으로 솔루션을 배포하고 다음 값을 바꾼다.
- your-CloudFormation-stack-name - AWS CloudFormation 스택의 이름으로 바꾼다.
- example.com - 도메인 이름으로 바꾼다. 이 도메인은 동일한 AWS 계정의 Route 53 호스팅 영역을 가리켜야 한다.
- www - 웹 사이트에 사용할 하위 도메인으로 바꾼다. 예를 들어, 하위 도메인이 www인 경우 웹 사이트는 www.example.com에서 사용할 수 있다.
```
aws cloudformation deploy \
    --region us-east-1
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides DomainName=example.com SubDomain=www
```
AWS CloudFormation 스택 생성이 완료될 때까지 기다린다. 스택은 일부 중첩된 스택을 생성하고 완료하는 데 몇 분 정도 걸릴 수 있다. 완료되면 상태가 CREATE_COMPLETE로 변경된다.

상태가 CREATE_COMPLETE이면 https://www.example.com으로 이동하여 웹 사이트를 본다(www.example.com을 이전 단계에서 지정한 하위 도메인 및 도메인 이름으로 바꾼다). 웹 사이트의 내용이 보일 것이다.

4) 액세스 로그 찾기

이 솔루션은 CloudFront 배포에 대한 액세스 로그를 활성화한다. 배포의 액세스 로그를 찾으려면 다음 단계를 완료한다.

배포의 액세스 로그를 찾으려면

https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔을 연다.
이름이 amazon-cloudfront-secure-static-site-s3bucketlogs-로 시작하는 버킷을 선택한다.

Note

이름에 s3bucketroot가 아닌 s3bucketlogs가 있는 버킷을 선택해야 한다. 이름에 s3bucketlogs가 있는 버킷에는 로그 파일이 포함되어 있다. s3bucketroot가 있는 버킷에는 웹 사이트 콘텐츠가 포함되어 있다.
cdn 폴더에는 CloudFront 액세스 로그가 포함되어 있다.

References

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/getting-started-secure-static-website-cloudformation-template.html