CloudFront for website with custom CMS hosted out of AWS - amazon-web-services

I've got a website with custom CMS hosted outside of AWS.
How can I set up CloudFront?
My idea is to upload current content to S3 bucket. Set CloudFront up with origin from that S3.
This also require some changes in CMS itself:
To replace static content (pics) urls for the one from S3bucket.
Check if file exists on S3 then use S3 if not use copy on local server.
To interact with S3 butcket API. (uploading/deleting)
When uploading new file, upload it to S3bucket too
When deleting file, delete it from S3 too
Delete only from the bucket.
Is there any other easier way? Mayby I'm just overthinking and cannot see the simplest solution.

Related

Where to upload media content on AWS S3?

I have a static website hosted on S3 with CloudFront.
The bucket name is "www.domain.com" and it's a react website built with npm build.
I was wondering, for CloudFront to work with posts uploaded by the user, does the content need to be inside this bucket or can it be a different bucket called "domain-media", for example?
I'm not yet sure how this all works exactly.

Protect webfonts via Amazon CloudFront from download

Is it possible to protect data embedded on my website via Amazon CloudFront from hotlinking or other downloads? I am mainly interested in protecting webfonts from being downloaded.
Amazon CloudFront is connected to a S3 Bucket
S3 Bucket Policy controls allowed domains for files via CloudFront
You think that could work?
Since you have cloudfront setup connected to your s3 bucket, you can use Cloudfront Signed Urls to prevent download by anyone from the public.
You can put your fonts in a folder called fonts for example, and setup a separate behaviour in cloudfront for any path that contains /fonts/ and in there you can activate Restrict Viewer Access.
In your website, you will need to add some way to generate the presigned url for this only when your webpage is loaded and you can put a short expiry time for this URL.

Hiding web content in S3

This is more of a theoretical question for AWS S3 website hosting.
Say I have a website hosted in S3. Obviously I want the content to be public, but I don't want people to be able to download the backend scripts, images, css by simply changing the domain url. I want to hide those folders, but if I deny GetObject access in the bucket policy for the folders the application "breaks" because it can't reach those folders.
How can I secure my content to ensure the most security for my backend when it sits in an S3 bucket?
You need to access the website via cloudfront with restricted access, better known as Origin Access Identity. This will allow cloudfront distribution access to s3 bucket.
More details can be found in the AWS Docs or https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html#private-content-creating-oai

Moving files without breaking links in AWS s3

We have a website hosted which uses s3 bucket for storing different files (say policy repo). we want to reorganize the files in a proper folder under S3 bucket without breaking the link to these objects in our website. Is there a way to achieve this in S3?
You could use a Cloudfront distribution in-front of your s3 bucket and use AWS Lambda Edge to re-write the URLs mapping to the new moved folder paths without breaking the old URLs.
From Configuring a Webpage Redirect - Amazon Simple Storage Service:
If your Amazon S3 bucket is configured for website hosting, you can redirect requests for an object to another object in the same bucket or to an external URL.
You set the redirect by adding the x-amz-website-redirect-location property to the object metadata. The website then interprets the object as 301 redirect. To redirect a request to another object, you set the redirect location to the key of the target object.

Does cloudfront support questionsmarks at URLs to fetch a new resource

We are porting a website to a AWS cloudfront backed infrastructure which serves static resource from an S3 bucket.
We access the resource like this
http://example.com/static/foo.css?hash=1
Our CMS generates a new hash when the files changed (cachebusting).
So we upload the file foo.css to the S3 bucket and access
http://example.com/static/foo.css?hash=2
But still the old contents are displayed. It seems to be cached in cloudfront?
Can this be avoided?
Or does the cms need to be modified?
You have to configure your CloudFront distribution to forward query parameters and use them as part of the cache key. Documented here.