소개

이 기사에서는 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에 설정할 인증서의 식별자를 기록해 둡니다.


색인 문서는 index.html입니다.

구축 절차

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


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


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



매개변수 이름
용도
비고


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

WebsiteDomainName
정적 웹 사이트의 도메인 이름
필수 S3의 버킷 이름입니다.

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


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

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


6 관리 콘솔 하단의 출력에서 ​​구축한 정적 웹 사이트의 끝점과 CloudFront 정보를 확인할 수 있습니다.
여기서 키는 DomainName 및 WebsiteURL 값을 기록해 둡니다.


7 확인을 위해 S3 관리 콘솔에서 버킷 (버킷 이름은 WebsiteDomainName으로 설정된 값)으로 index.html 파일을 업로드합니다.


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

또한 WebsiteURL의 값에 웹 액세스(S3에 웹 액세스)하여 index.html의 내용이 표시되면 OK입니다.

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

템플릿

s3-cloudfront-web-hosting-01.yml

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

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

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

# ------------------------------------------------------------#
# Input Parameters
# ------------------------------------------------------------# 
Parameters:
  WebsiteDomainName:
    Type: String

  CFSSLCertificateId:
    Type: String

Resources:
# ------------------------------------------------------------#
#  S3 Bucket
# ------------------------------------------------------------#        
# Bucket
  Bucket:
    Type: "AWS::S3::Bucket"
    Properties:
      BucketName: !Ref WebsiteDomainName
      AccessControl: PublicRead
      WebsiteConfiguration:
        IndexDocument: index.html

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

# ------------------------------------------------------------#
#  CloudFront
# ------------------------------------------------------------#  
  CloudFrontDistribution:
    Type: "AWS::CloudFront::Distribution"
    Properties:
      DistributionConfig:
        PriceClass: PriceClass_All
        Aliases:
        - !Ref WebsiteDomainName
        Origins:
        - CustomOriginConfig:
            OriginProtocolPolicy: http-only
          DomainName: !Sub "${WebsiteDomainName}.s3-website-${AWS::Region}.amazonaws.com"
          Id: !Sub "S3-Website-${WebsiteDomainName}.s3-website-ap-northeast-1.amazonaws.com"
        DefaultCacheBehavior:
          TargetOriginId: !Sub "S3-Website-${WebsiteDomainName}.s3-website-ap-northeast-1.amazonaws.com"
          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:
#WebsiteURL:
  WebsiteURL:
    Value: !GetAtt Bucket.WebsiteURL

#DistributionID
  DistributionID:
    Value: !Ref CloudFrontDistribution

#DmainName
  DomainName:
    Value: !GetAtt CloudFrontDistribution.DomainName