안전한 정적 웹 사이트 시작하기 - Amazon CloudFront
솔루션 개요솔루션 배포

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

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

  • Amazon Simple Storage Service(Amazon S3)의 내구성이 뛰어난 스토리지 사용 - 이 솔루션은 정적 웹 사이트의 콘텐츠를 호스팅하는 Amazon S3 버킷을 생성합니다. 웹 사이트를 업데이트하려면 새 파일을 S3 버킷에 업로드하면 됩니다.

  • Amazon CloudFront 콘텐츠 전송 네트워크를 통해 속도 향상 - 이 솔루션은 짧은 지연 시간으로 최종 사용자에게 웹 사이트를 제공하는 CloudFront 배포를 생성합니다. 배포는 웹 사이트가 S3에서 직접 액세스하지 않고 CloudFront를 통해서만 액세스할 수 있도록 오리진 액세스 제어(OAC)로 구성됩니다.

  • HTTPS 및 보안 헤더에 의해 보호 – 이 솔루션은 AWS Certificate Manager(ACM)에 SSL/TLS 인증서를 생성하고 이를 CloudFront 배포에 연결합니다. 이 인증서를 사용하면 배포가 HTTPS를 사용하여 도메인의 웹 사이트를 안전하게 제공할 수 있습니다.

  • AWS CloudFormation으로 구성 및 배포 – 이 솔루션은 AWS CloudFormation 템플릿을 사용하여 모든 구성 요소를 설정하므로 구성 요소 구성보다 웹 사이트의 콘텐츠에 더 집중할 수 있습니다.

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

솔루션 개요

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

CloudFront가 있는 안전한 정적 웹 사이트의 개요 다이어그램

  1. 최종 사용자는 www.example.com에서 웹 사이트를 요청합니다.

  2. 요청된 객체가 캐싱된 경우 CloudFront가 캐시의 객체를 최종 사용자에게 반환합니다.

  3. 객체가 CloudFront 캐시에 없는 경우 CloudFront는 오리진(S3 버킷)에서 객체를 요청합니다.

  4. S3가 객체를 CloudFront로 반환합니다.

  5. CloudFront가 객체를 캐시합니다.

  6. 객체가 최종 사용자에게 반환됩니다. 동일한 CloudFront 엣지 로케이션에 들어오는 객체에 대한 후속 요청은 CloudFront 캐시에서 제공됩니다.

솔루션 배포

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

  • AWS CloudFormation 콘솔을 사용하여 기본 콘텐츠가 포함된 솔루션을 배포한 다음, 웹 사이트 콘텐츠를 Amazon S3에 업로드합니다.

  • 솔루션을 컴퓨터에 복제하여 웹 사이트 콘텐츠를 추가합니다. 그런 다음 AWS Command Line Interface(AWS CLI)를 사용하여 솔루션을 배포합니다.

참고

CloudFormation 템플릿을 배포하려면 미국 동부(버지니아 북부) 리전을 사용해야 합니다.

사전 조건

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

  • example.com과 같이 Amazon Route 53 호스팅 영역을 가리키는 등록된 도메인 이름. 호스팅 영역은 이 솔루션을 배포하는 동일한 AWS 계정에 있어야 합니다. 등록된 도메인 이름이 없는 경우 Route 53에 등록할 수 있습니다. 등록된 도메인 이름이 있지만 Route 53 호스팅 영역을 가리키지 않는 경우 Route 53를 DNS 서비스로 구성합니다.

  • IAM 역할을 생성하는 CloudFormation 템플릿을 시작할 수 있는 AWS Identity and Access Management(IAM) 권한 및 솔루션의 모든 AWS 리소스를 생성할 수 있는 권한. 자세한 내용은 AWS CloudFormation 사용 설명서에서 AWS Identity and Access Management를 사용한 액세스 제어 섹션을 참조하세요.

이 솔루션을 사용하는 동안 발생하는 비용에 대한 책임은 귀하에게 있습니다. 비용에 대한 자세한 내용은 각 AWS 서비스의 요금 페이지를 참조하세요.

AWS CloudFormation 콘솔을 사용합니다.

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

  1. AWS CloudFormation 콘솔에서 이 솔루션을 시작합니다. 필요한 경우 AWS 계정에 로그인합니다.

  2. CloudFormation 콘솔에서 이 솔루션의 CloudFormation 템플릿을 지정하는 필드가 미리 채워져 있는 스택 생성 마법사가 열립니다.

    페이지 하단에서 [Next]를 선택합니다.

  3. 스택 세부 정보 지정 페이지에서 다음 필드에 값을 입력합니다.

    • SubDomain - 웹 사이트에 사용할 하위 도메인을 입력합니다. 예를 들어, 하위 도메인이 www인 경우 웹 사이트는 www.example.com에서 사용할 수 있습니다. 다음 글머리 기호에 설명된 대로 example.com을 도메인 이름으로 바꿉니다.

    • DomainName - 도메인 이름(예: example.com)을 입력합니다. 이 도메인은 Route 53 호스팅 영역을 가리켜야 합니다.

    • HostedZoneId — 도메인 이름을 위한 Route 53 호스팅 영역 ID.

    • CreateApex - (선택 사항) CloudFront 구성에서 도메인 apex(example.com)에 대한 별칭을 생성합니다.

  4. 마친 후에는 다음을 선택합니다.

  5. (선택 사항) 스택 옵션 구성(Configure stack options) 페이지에서 태그 및 기타 스택 옵션을 추가합니다.

  6. 마친 후에는 다음을 선택합니다.

  7. 검토 페이지에서 페이지 하단으로 스크롤한 다음 기능 섹션에서 두 상자를 선택합니다. 이러한 기능을 통해 CloudFormation은 스택의 리소스에 대한 액세스를 허용하는 IAM 역할을 생성하고 리소스의 이름을 동적으로 지정할 수 있습니다.

  8. [Create stack]을 선택합니다.

  9. 스택 생성이 완료될 때까지 기다립니다. 스택은 일부 중첩된 스택을 생성하고 완료하는 데 몇 분 정도 걸릴 수 있습니다. 완료되면 상태가 CREATE_COMPLETE로 변경됩니다.

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

    이 솔루션의 정적 웹 사이트 기본 콘텐츠입니다. “나는 정적 웹 사이트입니다!”라고 표시됩니다.
웹 사이트의 기본 콘텐츠를 사용자 고유의 콘텐츠로 바꾸려면

  1. https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔을 엽니다.

  2. 이름이 amazon-cloudfront-secure-static-site-s3bucketroot-로 시작하는 버킷을 선택합니다.

    참고

    이름에 s3bucketlogs가 아닌 s3bucketroot가 있는 버킷을 선택해야 합니다. 이름에 s3bucketroot가 있는 버킷에는 웹 사이트 콘텐츠가 포함되어 있습니다. s3bucketlogs가 있는 버킷에는 로그 파일만 포함되어 있습니다.

  3. 웹 사이트의 기본 콘텐츠를 삭제한 다음, 직접 업로드합니다.

    참고

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

로컬로 솔루션 복제

사전 조건 

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

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

  1. 에서 솔루션을 복제하거나 다운로드합니다https://github.com/aws-samples/amazon-cloudfront-secure-static-site 복제하거나 다운로드한 후 명령 프롬프트 또는 터미널을 열고 해당 amazon-cloudfront-secure-static-site 폴더로 이동합니다.

  2. 다음 명령을 실행하여 솔루션의 아티팩트를 설치하고 패키징합니다.

    make package-static

  3. 웹 사이트의 콘텐츠를 www 폴더에 복사하여 기본 웹 사이트 콘텐츠를 덮어씁니다.

  4. 다음 AWS CLI 명령을 실행하여 솔루션의 아티팩트를 저장할 Amazon S3 버킷을 생성합니다. amzn-s3-demo-bucket-for-artifacts를 사용자 고유의 버킷 이름으로 바꿉니다.

    aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1

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

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

  6. 다음 명령을 실행하여 CloudFormation으로 솔루션을 배포하고 다음 값을 바꿉니다.

    • your-CloudFormation-stack-name - CloudFormation 스택의 이름으로 바꿉니다.

    • example.com - 도메인 이름으로 바꿉니다. 이 도메인은 동일한 AWS 계정의 Route 53 호스팅 영역을 가리켜야 합니다.

    • www - 웹 사이트에 사용할 하위 도메인으로 바꿉니다. 예를 들어, 하위 도메인이 www인 경우 웹 사이트는 www.example.com에서 사용할 수 있습니다.

    • hosted-zone-ID – 도메인 이름의 Route 53 호스팅 영역 ID로 바꿉니다.

    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 HostedZoneId=hosted-zone-ID

    1. (선택 사항) 도메인 apex를 사용하여 스택을 배포하려면 다음 명령을 대신 실행하세요.

      aws --region us-east-1 cloudformation deploy \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides  DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes

  7. CloudFormation 스택의 생성이 완료될 때까지 기다립니다. 스택은 일부 중첩된 스택을 생성하고 완료하는 데 몇 분 정도 걸릴 수 있습니다. 완료되면 상태가 CREATE_COMPLETE로 변경됩니다.

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

액세스 로그 찾기

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

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

  1. https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔을 엽니다.

  2. 이름이 amazon-cloudfront-secure-static-site-s3bucketlogs-로 시작하는 버킷을 선택합니다.

    참고

    이름에 s3bucketroot가 아닌 s3bucketlogs가 있는 버킷을 선택해야 합니다. 이름에 s3bucketlogs가 있는 버킷에는 로그 파일이 포함되어 있습니다. s3bucketroot가 있는 버킷에는 웹 사이트 콘텐츠가 포함되어 있습니다.

  3. cdn 폴더에는 CloudFront 액세스 로그가 포함되어 있습니다.