소개

이 기사에서는 AWS CloudFormation 관리 콘솔을 사용하여 S3 및 CloudFront에서 정적 웹 사이트 환경을 구축하는 단계를 설명합니다. (초보자용)

또한 CloudFront의 Origin 설정에서는 OAI(Origin Access Identity)를 사용하여 S3의 정적 웹 사이트에 직접 액세스할 수 없는 구성으로 하고 있습니다.
직접 액세스할 수 있는 구성으로 하고 싶은 경우는, 아래의 기사를 참고해 주세요.
CloudFormation을 사용하여 S3 및 CloudFront 구성으로 정적 웹 사이트 구축(Origin Access Identity 사용 안함)

본 기사에서 게재하고 있는 템플릿의 최신판은 아래에 두고 있습니다.
htps : // 기주 b. 코 m / 오쿠보 t / 아 ws-c ぉ d d ぉ r 마치 온

구성도

전제 조건

CloudFront에 설정하는 SSL 서버 인증서를 리전이 버지니아 북부의 AWS Certificate Manager(ACM)로 가져왔습니다.

ACM 관리 콘솔에서 CloudFront에 설정할 인증서의 식별자를 기록해 둡니다.

구축 절차

1 AWS CloudFormation 관리 콘솔에서 스택 생성을 클릭합니다.


2 후술하는 템플릿을 선택합니다.


3 각 파라미터를 입력합니다.



매개변수 이름
용도
비고


스택 이름
템플릿에서 만들 리소스 집합의 이름
예 s3-cf-web-20190226

BucketName
콘텐츠를 배치할 버킷 이름
필수

WebsiteDomainName
정적 웹 사이트의 도메인 이름
CloudFront의 CNAME 필수

CFSSLCertificateId
전제 조건에서 기록한 인증서의 식별자
필수


4 후속 작업은 기본값으로 다음으로 생성됩니다.

5 상황이 CREATE COMPLETE가 되면 S3와 CloudFront의 구축이 완료됩니다.


6 관리 콘솔 하단의 출력에서 ​​구축한 S3 버킷과 CloudFront 정보를 확인할 수 있습니다.
"여기서, 키가 DomainName의 값을 메모해 둡니다.


7 확인을 위해 S3 관리 콘솔에서 매개 변수로 설정된 버킷으로 index.html 파일을 업로드합니다.


8 브라우저에서 방금 메모한 DomainName 값에 웹 액세스하여 index.html의 내용이 표시되면 OK입니다.

9 마지막으로 적절한 경우 WebsiteDomainName의 CNAME 레코드 (Route53의 경우 ALIAS 레코드)로 CloudFront의 도메인 이름을 DNS 서버 (Route53)에 등록합니다.

템플릿

s3-cloudfront-web-hosting-02.yml

AWSTemplateFormatVersion: "2010-09-09"
Description: 
  S3 and CloudFront for Static website hosting (OAI Available)

Metadata:
  "AWS::CloudFormation::Interface":
    ParameterGroups:
      - Label: 
          default: "S3 and CloudFront Configuration"
        Parameters: 
          - BucketName
          - WebsiteDomainName
          - CFSSLCertificateId

    ParameterLabels: 
      BucketName:
        default: "BucketName"
      WebsiteDomainName:
        default: "WebsiteDomainName"
      CFSSLCertificateId: 
        default: "CFSSLCertificateId"

# ------------------------------------------------------------#
# Input Parameters
# ------------------------------------------------------------# 
Parameters:
  BucketName:
    Type: String

  WebsiteDomainName:
    Type: String

  CFSSLCertificateId:
    Type: String

Resources:
# ------------------------------------------------------------#
#  S3 Bucket
# ------------------------------------------------------------#        
# Bucket
  Bucket:
    Type: "AWS::S3::Bucket"
    Properties:
      BucketName: !Ref BucketName

  CloudFrontOriginAccessIdentity:
    Type: "AWS::CloudFront::CloudFrontOriginAccessIdentity"
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: !Sub "access-identity-${Bucket}"

  BucketPolicy:
    Type: "AWS::S3::BucketPolicy"
    Properties:
      Bucket: !Ref Bucket
      PolicyDocument:
        Statement:
        - Action: "s3:GetObject"
          Effect: Allow
          Resource: !Sub "arn:aws:s3:::${Bucket}/*"
          Principal:
            CanonicalUser: !GetAtt CloudFrontOriginAccessIdentity.S3CanonicalUserId

# ------------------------------------------------------------#
#  CloudFront
# ------------------------------------------------------------#  
  CloudFrontDistribution:
    Type: "AWS::CloudFront::Distribution"
    Properties:
      DistributionConfig:
        PriceClass: PriceClass_All
        Aliases:
        - !Ref WebsiteDomainName
        Origins:
        - DomainName: !GetAtt Bucket.RegionalDomainName
          Id: !Sub "S3origin-${BucketName}"
          S3OriginConfig:
            OriginAccessIdentity: !Sub "origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}"
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: !Sub "S3origin-${BucketName}"
          ViewerProtocolPolicy: redirect-to-https
          AllowedMethods:
          - GET
          - HEAD
          CachedMethods:
          - GET
          - HEAD
          DefaultTTL: 3600
          MaxTTL: 86400
          MinTTL: 60
          Compress: true
          ForwardedValues:
            Cookies:
              Forward: none
            QueryString: false
        ViewerCertificate:
          SslSupportMethod: sni-only
          MinimumProtocolVersion: TLSv1.1_2016
          AcmCertificateArn: !Sub "arn:aws:acm:us-east-1:${AWS::AccountId}:certificate/${CFSSLCertificateId}"
        HttpVersion: http2
        Enabled: true

# ------------------------------------------------------------#
# Output Parameters
# ------------------------------------------------------------#  
Outputs:
#BucketName
  BucketName:
    Value: !Ref Bucket

#DistributionID
  DistributionID:
    Value: !Ref CloudFrontDistribution

#DmainName
  DomainName:
    Value: !GetAtt CloudFrontDistribution.DomainName