AWS CloudFront with multiple S3 origins

Question

I would like to configure an AWS CloudFront CDN to serve HTML static content from two AWS S3 buckets. One bucket should host the objects in the root, the second one should host objects in a specific subpath.

S3 config

The first bucket, myapp.home , should host the home page and all other objects directly under "/".

The second bucket, myapp.subpage , should be used for the same purpose but for a specific set of URLs starting with "/subpage/".

Both buckets have been configured with "static website hosting" option enabled and with a default document "index.html", which has been uploaded to both.

Both buckets have been made public using the following policy (in the case of myapp.subpage the Resource has been adapted accordingly)

{
    "Version": "2012-10-17",
    "Id": "Policy1529690634746",
    "Statement": [
        {
            "Sid": "Stmt1529690623267",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myapp.home/*"
        }
    ]
}

CloudFront config

The CDN is configured to respond to a name "host.domain.tld".

The CDN is configured having 2 origins:

1. the bucket myapp.home , having these properties:
   • Origin Domain Name: myapp.home.s3.amazonaws.com
   • Origin Path: empty
   • Origin Type: S3 Origin
2. the bucket myapp.subpage , having these properties:
   • Origin Domain Name: myapp.subpage.s3.amazonaws.com
   • Origin Path: empty
   • Origin Type: S3 Origin

These origins are linked to 2 Cache Behaviors:

1. First Behavior
   • Origin: the bucket myapp.subpage :
   • Precedence: 0
   • Path Pattern: subpage/*
2. Second Behavior
   • Origin: the bucket myapp.home :
   • Precedence: 1
   • Path Pattern: Default (*)

The problem

The myapp.home origin seems to work correctly, but myapp.subpath instead always returns an AccessDenied error using all of the following URIs:

• host.domain.tld/subpath
• host.domain.tld/subpath/
• host.domain.tld/subpath/index.html

Update : I also tried substituting the origins using the S3 website domains, eg myapp.subpath.s3-website-eu-west-1.amazonaws.com , instead of the plain buckets domains: the homepage still works anyway, but the subpath this time returns a 404 with Message: "The specified key does not exist" for all URIs above.

What am i doing wrong?

Thanks in advance

Answer 1

The "subpage/*" in first behaviors is the directory in myapp.subpage .
Make a directory named subpage in the bucket, then put index.html into this bucket.

Like below:

* myapp.subpage <bucket name>
  * subpage <directory>
     * index.html