Amplify Deployed CloudFront Returning Cache Miss

[Ciara-Cloud]

How did you install the Amplify CLI?

npm install -g @aws-amplify/cli

If applicable, what version of Node.js are you using?

v18.17.1

Amplify CLI Version

12.7.1

What operating system are you using?

Amazon Linux 2 on AWS Cloud9

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

Ran amplify configure in /home/ec2-user/

Ran amplify init inside ~/environment/cloud-wanderer-blog/

From Amplify Console connected GitHub repository to Amplify app.

Ran amplify add hosting inside ~/environment/cloud-wanderer-blog/ to configure S3 bucket and CloudFront

From AWS CLI confirmed jpg files were uploaded to S3 bucket created by Amplify

Describe the bug

CloudFront is not caching the images. Getting Cache Miss

$ curl -I https://www.cloudwanderer.life/img/rolling-fog.jpg HTTP/2 200 content-type: image/jpeg content-length: 2089465 date: Wed, 25 Oct 2023 15:52:19 GMT server: AmazonS3 accept-ranges: bytes last-modified: Wed, 25 Oct 2023 05:41:52 GMT cache-control: public, max-age=0, s-maxage=2 etag: "018f65f706b0e60f5fcb86c703915ad1" x-cache: Miss from cloudfront via: 1.1 0e5b8ac0c35b795a035fafc85d9c0c7c.cloudfront.net (CloudFront) x-amz-cf-pop: MAN51-P3 alt-svc: h3=":443"; ma=86400 x-amz-cf-id: l4FARWD2vEB5ssLcrCKxVmHsCBgks_oWtonzUcYtA-h3M7t9x4bDjQ==

Expected behavior

CloudFront should be caching image files as Amplify configured the CloudFront & S3 bucket as origin.

For the S3 object /img/rolling-fog.jpg I update metadata and added cache-control header
with cache-control public, max-age=86400, s-maxage=86400
Here is details of S3 object

$ aws s3api head-object --bucket cloud-wanderer-bucket-dev --key img/rolling-fog.jpg { "AcceptRanges": "bytes", "LastModified": "2023-10-25T11:05:51+00:00", "ContentLength": 2089465, "ETag": "\"018f65f706b0e60f5fcb86c703915ad1\"", "CacheControl": "public, max-age=86400, s-maxage=86400", "ContentType": "image/jpeg", "ServerSideEncryption": "AES256", "Metadata": {} }

Attaching copy of Amplify CloudFront distribution
cloudfront-config.txt

Reproduction steps

Launch Cloud9 instance Amazon Linux 2.
Install ReactJS app using npx create-react-app cloud-wanderer-blog
Confirm it runs in Cloud9 preview mode:

$ cd cloud-wanderer-blog
$ npm start

Instal Amplify CLI, Configure & Initialise as per screen-shots shared above.
In React public folder add img sub-directory and add JPG files that ReactBlog will use.
Run amplify add hosting to deploy S3 & CloudFront
Check that CloudFront caches images

Project Identifier

Project Identifier: ee71b96d0470ab8dd2b3d2c46931fb86

Log output

# Put your logs below this line

Additional information

No response

Before submitting, please confirm:

• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

[Ciara-Cloud]

Accessing image file from CloudFront URL also returns cache miss

`

curl -i https://d1ei9g4tqob0gv.cloudfront.net/img/rolling-fog.jpg
HTTP/2 200
content-type: image/jpeg
content-length: 2089465
date: Wed, 25 Oct 2023 16:17:14 GMT
last-modified: Wed, 25 Oct 2023 11:05:51 GMT
etag: "018f65f706b0e60f5fcb86c703915ad1"
x-amz-server-side-encryption: AES256
cache-control: public, max-age=86400, s-maxage=86400
accept-ranges: bytes
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 967425266468bd56bf14d0a928942c04.cloudfront.net (CloudFront)
x-amz-cf-pop: LHR50-C1
x-amz-cf-id: fDepmMpwIs3H2Q499_FXIU91qO42fhh8h3VwqdZzJyWz2DVl0eAoVg==

Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: " to save to a file.
ciara-doit@Ciaras-MBP ~ %

`

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.