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 バケットの設定

バケットポリシーを以下の通り設定*1

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

S3 バケット"portfolio.yoheia.com" 以下の全オブジェクトを削除して、アップロードし直す。
- 01. Amazon S3 でウェブサイトを公開する - ablog で公開設定を行ったため。
CloudFront（http://d1n2bs9euq7unr.cloudfront.net/）経由ではアクセスできるが、S3（http://portfolio.yoheia.com.s3-website-ap-northeast-1.amazonaws.com/）に直接アクセスできないことを確認する。

参考

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

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

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.
{
  "Version":"2012-10-17",
  "Id":"http referer policy example",
  "Statement":[
    {
      "Sid":"Allow get requests originating from www.example.com and example.com.",
      "Effect":"Allow",
      "Principal":"*",
      "Action":["s3:GetObject","s3:GetObjectVersion"],
      "Resource":"arn:aws:s3:::DOC-EXAMPLE-BUCKET/*",
      "Condition":{
        "StringLike":{"aws:Referer":["http://www.example.com/*","http://example.com/*"]}
      }
    }
  ]
}
Bucket Policy Examples - Amazon Simple Storage Service

*1:Bucket Policy Examples - Amazon Simple Storage Service