04. CloudFront 経由で Amazon S3 でホストされた静的ウェブサイトを公開する

CloudFront の設定

  • マネジメントコンソールで CloudFront にアクセスする。
  • [Create Distribution] をクリック、[Get Started] をクリック、以下の通り入力し、[Create Distribution] をクリック。
    • Origin Domain Name: portfolio.yoheia.com.s3.amazonaws.com
    • Origin ID: S3-portfolio.yoheia.com
    • Origin Custom Headers
      • Header Name: Referer
      • Value: 119a46ec6677cfb90e1704250a5db941 ※任意の文字列
  • SSL Certificate: Default CloudFront Certificate (*.cloudfront.net)
  • Default Root Object: index.html

S3 バケットの設定

    "Version": "2012-10-17",
    "Id": "CloudFront",
    "Statement": [
            "Sid": "Allow get requests originating from Cloudfront.",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
            "Resource": "arn:aws:s3:::portfolio.yoheia.com/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "119a46ec6677cfb90e1704250a5db941" ★ CloudFront で設定した RefererValue 


Amazon S3 でホストされている静的ウェブサイトを公開するには、次のいずれかの設定を使用して CloudFront ディストリビューションをデプロイできます。

  • アクセスがオリジンアクセスアイデンティティ (OAI) で制限されたオリジンとして、REST API エンドポイントを使用する
  • 匿名 (パブリック) アクセスを許可して、ウェブサイトのエンドポイントをオリジンとして使用する
  • アクセスが Referer ヘッダーで制限されたオリジンとして、ウェブサイトのエンドポイントを使用する
  • AWS CloudFormation を使用して REST API エンドポイントをオリジンとしてデプロイし、OAI と CloudFront を指すカスタムドメインによってアクセスを制限する

2 つのエンドポイントタイプの詳細については、ウェブサイトエンドポイントと REST API エンドポイントの主な相違点を参照してください。

CloudFront を使用して Amazon S3 でホストされた静的ウェブサイトを公開する
Key difference REST API endpoint Website endpoint
Access control Supports both public and private content Supports only publicly readable content
Error message handling Returns an XML-formatted error response Returns an HTML document
Redirection support Not applicable Supports both object-level and bucket-level redirects
Requests supported Supports all bucket and object operations Supports only GET and HEAD requests on objects
Responses to GET and HEAD requests at the root of a bucket Returns a list of the object keys in the bucket Returns the index document that is specified in the website configuration
Secure Sockets Layer (SSL) support Supports SSL connections Does not support SSL connections
Website endpoints - Amazon Simple Storage Service

Restricting Access to a Specific HTTP Referer
Suppose that you have a website with a domain name (www.example.com or example.com) with links to photos and videos stored in your Amazon S3 bucket, DOC-EXAMPLE-BUCKET. By default, all the Amazon S3 resources are private, so only the AWS account that created the resources can access them. To allow read access to these objects from your website, you can add a bucket policy that allows s3:GetObject permission with a condition, using the aws:Referer key, that the get request must originate from specific webpages. The following policy specifies the StringLike condition with the aws:Referer condition key.

  "Id":"http referer policy example",
      "Sid":"Allow get requests originating from www.example.com and example.com.",
Bucket Policy Examples - Amazon Simple Storage Service