Accessing static website in S3 bucket through Cloudflare with Full SSL - amazon-web-services

I have been trawling forums, blog posts, technical places and I've also got in touch with Cloudflare support and I'm no further forward with this. Cloudflare says that AWS is not accepting the host headers for mine.mydomain.com and returning 403.
I have an S3 bucket setup called mine.mydomain.com, with static website hosting turned on. It gives me an AWS URL to use which works fine to browse the site and any pages within it.
I have created a CNAME record on Cloudflare for mine to point to the AWS URL of the bucket. However when I try to browse to the site using mine.mydomain.com I get Access Denied errors.
What I have been told is that because we're using full SSL I need to create an empty bucket called mine-abc (it could actually be anything I just used that name - just as long as it doesn't have dots in it) and map the CNAME record in Cloudflare to mine-abc.s3.amazonaws.com. When I do that I still get an Access Denied error for mine.mydomain.com. However if I go to mine.mydomain.com/index.html it works. It's also the same if I go to the root of URL I get Access Denied (ie. mine.mydomain.com/issues) but if I go to a page (ie. mine.mydomain.com/issues/index.html) it again works.
So I'm a little stumped.
Configuration for the mine.mydomain.com bucket is:
Public Access Settings - all False
Access Control List - Default
Bucket Policy - effectively Allow "arn:aws:s3:::mine.mydomain.com" (and `"mine.mydomain.com/*"`)
CORS Configuration - Allow GET and HEAD for `.mydomain.com and mydomain.com
Any help gratefully appreciated.

Related

AWS Cloudfront rewrites CSS and JS references in index.html to index_files/style.css instead of css/style.css

I have the following setup:
S3 bucket where Website hosting is enabled, "block all access" default feature is disabled. In the bucket I have an index.html file a css and a js folder with some files. I referencing them in the HTML code like <link rel="stylesheet" href="index_files/style.css"> and <script src="js/somejsfile.js"></script>. I haven't made any of the objects public directly. The bucket name is mydomain.com (I also have a www.mydomain.com and s0ubqconfigured as website enabled resdirecting everything to mydomain.com bucket)
I have a single certificate with all the cname included (naked, www, sub1). Certificate is validated using Route53
I have created a Cloudfront distribution.
Origin Domain Name points to mydomain.com.s3.amazonaws.com
Origin Path was left empty
Restrict Bucket Access: yes
Created new Identity
Allowed Cloudfront to Update bucket policy (I verified later that the policy indeed was modified)
Alternate Domain Names: listed all 3 domains
Custom SSL certificate --> used the previously created cert
default root object: index.html
redirect HTTP to HTTPS
everything else is default
Route 53 alias for the cloudformation dns entry.
The problem:
The site seems completely broken both on mydomain.com and the cloudformation url. After checking the page source in Firefox it turnes out that somehow all the CSS and JS reference got overwritten like href="index_files/some-css-file.css" and src="index_files/some-js-file.js". I have no clue where this index_files comes from. I have double checked on S3, downloaded my index.html and the code does not have this index_files nonsense.
I used Firefox Web Developer tool to overwrite temporarly index_files to css and js and the sites load as it should be...
What am I missing? And where this index_files stuff comes from? My google-fu fails me on this one.
Edit/Update:
I used the AWS Console to configure everything so no terraform or cloudformation or even aws cli is involved. (this was supposed to be a fast PoC)
The content in S3 was copied there using S3 sync. Original content comes from a website which I httrack-ed (basically downloaded all the static content of the site)
BTW today I have checked the site again and it is working. No clue why. My modifications:
I have added new origins to the distribution using same settings but with the www and the sub1 S3 buckets as soruce (so now the distributiuon has 3 origin). I don't know why would this fix it, since those S3 buckets are empty and I was always testing the site using the naked mydomain.com.
I have added a CORS rule to the bucket to allow "*" and all GET methods. But since all the files in the same naked domain s3 bucket I don't know why whould this fix the issue.
So the usual meme:
my stuff is not working... Why?
my stiff is working... But why?

AWS unable to enforce https for S3 bucket

I have tried several tutorials on how to set up https via CloudFront, but nothing is working. I am hosting from an S3 bucket and the app works fine via the http protocol, but I need it to be https.
Does anyone have a very thorough tutorial on how to make this work?
Some tutorials explain how to go about setting up a certificate, some explain how to use CloudFront to handle its distribution and I even found a CloudFront tutorial that explains how not using a link from the CloudFront setup forces the wrong region to be created for a certificate, so I even tried that.
I have not found anything that explains exactly what needs to be done for this very common setup, so I am hoping that someone here has some helpful resources.
I think the main issue I had when setting up a CloudFront distribution for an S3 static webhosting bucket was in the Orign Domain Name.
When you create a new distribution, under Origin Settings, the Origin Domain Name field works as a drop-down menu and lists your buckets. Except that picking a bucket from that list doesn't work for static webhosting. You need to specifically put the endpoint for the bucket there, for example:
mywebhostingbucket.com.s3-website-sa-east-1.amazonaws.com
And for custom domains, you must set up the CNAMEs under Distribution Settings, Alternate Domain Names (CNAMEs), and then make sure you have your custom SSL certificate in the us-east-1 region.
Then you can configure the alias record set for the CloudFront distribution.
Here is a complete answer for setting up a site with https.
I had everything in this document completed:
https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html
And it worked to get the site live via http, but in order to add https, I needed to do the following:
I had requested a certificate for whatever.com, and tried several suggestions after that. But there were a couple of things missing.
To route traffic for the domain (whatever.com) to CloudFront distribution, you will need to clear the current value of the A record and fill in distribution domain name.
Several documents that I viewed said to point the whatever.com S3 bucket to the www.whatever.com S3 bucket, and use the second one to drive the site. Since CloudFront can serve multiple domain name, you may set CNAME of distribution with both, but you will need to set A record for both to distribution AND request an ACM certificate with both domain names (with and without the www). Also, I did ask this, so if you already have a certificate, you can't edit it to do this, which means you'll need to request a new one that has both whatever.com and www.whatever.com
After all of this, I still got "Access Denied" when I went to my site, so to fix this issue, I had to create a new origin in CloudFront with 'Origin Domain Name' set to the full address of the S3 bucket (without the http), and then set the Default (*) Behavior to the S3-Website-.....whatever.com bucket.
After all of this, my site was accessible via http AND https. I hope this helps anyone who experienced this challenge.

AWS Redirecting route53 to S3 bucket

I am having trouble redirecting route53 domain to my S3 bucket.
I have created a working bucket which you can access trough this url:
http://linas.me.uk.s3-website.eu-west-2.amazonaws.com/
The bucket name matches domain name and I am able to setup new record set with linas.me.uk alias target. However when you try visiting http://linas.me.uk 404 gets thrown.
I have tried anything I could think of or find googling but I have hit the wall it seems, any help would be appreciated!

Amazon Web Services Route 53 / S3 unable to point to my registered domain

This is another problem I am having, here is the info.
My endpoint for the first bucket works, but not the 2nd bucket, and using my domain name in the browser just doesn't work at all.
Once again I have taken screenshots, this is driving me insane, I have no idea how to correct it, it just doesn't find my root or something.
Record Sets
Buckets
I can't post more than 2 links
If anyone can help me, even PM me, I'll give my login details to take a look, because I'm completely stumped.
You should follow the directions on Setting Up a Static Website Using a Custom Domain.
For the first bucket, the steps are:
Create an Amazon S3 bucket with the same name as your domain (justdiditonlne.com)
Add a bucket policy to make the content public, or modify desired objects to make them publicly accessible
Turn on Static Website Hosting, and you will receive a URL like: justdiditonline.com.s3.amazonaws.com
Create a Route 53 entry for justdiditonline.com, type A, set Alias=Yes and enter the static website hosting URL
For the second bucket:
Create an Amazon S3 Bucket with the desired domain name (www.justdiditonline.com)
Turn on Static Website Hosting, but this time select Redirect all requests to another host name. Enter www.justdiditonline.com.

Custom Domain for S3 Files

This should be easy as there is no shortage of pages on custom domains and S3 but for some reason I can't seem to get it to work as expected.
I have a S3 Bucket full of videos. The S3 bucket is called for example "videos.foo.com". I bought the domain "videos.foo.com" and set it up in cloudflare with the cname "videos.foo.com" pointing to "videos.foo.com.s3-website-us-east-1.amazonaws.com".
I can view files in my bucket by going to there full url such as "videos.foo.com.s3-website-us-east-1.amazonaws.com/myvideo.mpg".
My problem is I can't view them by going to "videos.foo.com/myvideo.mpg".
I tried enabling "Redirect all requests to another host name" and entering "videos.foo.com" but that didn't work either. To note, I will 'not' be hosting a site at "videos.foo.com" just serving files.
All the files have permissions everyone: open/download.
If anything sees the error in my ways please let me know. In the mean time I'll keep searching and going through trial and error. Thanks!
Nginx S3 proxy helps to solve that problem, please check more details: https://stackoverflow.com/a/44749584/290338
A bucket can be named differently, the only performance rule is to have EC2 and a bucket in the same geo location.
You may need to configure the Route 53 record as an alias rather than a cname. In R53, edit your record set and configure it like this -
Type: A - IPv4 address
Alias: Yes
When you click in the Alias Target textbox it will drop down a list that contains your S3 bucket (if it's properly configured). It can take a while to load that list so be patient. Select your bucket and hit save.
Check out this document for more info - http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html