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.
Related
I am trying to deploy my static website to S3 configuring CloudFront in front of it. But I am not able to configure Route53 to integrate with CloudFront. Below is what I have done so far.
I create an S3 bucket enabling static hosting and allowing public access. Then I deployed/ uploaded the files. I can access my website through the S3 website static URL, http://www.waiyanhein.com.s3-website-eu-west-1.amazonaws.com/.
I have my own domain called, waiyanhein.com.
I am trying to configure the CloudFront in front of my static website. So I created a CloudFront distribution. For the Origin Domain Name, I chose the S3 Bucket's static website URL. Then I chose "Compress Objects Automatically" as YES. In the "Alternate Domain Names (CNAMEs)" text field, I entered, "waiyanhein.com". Then I created the CloudFront distribution. Now my CloudFront distribution is up and running.
Then I tried to configure Route53 pointing to the CloudFront distribution. I tried creating a record choosing "Alias to CloudFront distribution" option. But I can't find my CloudFront distribution in the resources as you can see in the screenshot below.
What's wrong with my configuration?
I have sort of found out something in the CloudFront distribution too. When I edit the CloudFront distribution, the Alternative domains field is empty for some reasons. Then I entered the domains and clicked save. Then I got the following error.
com.amazonaws.services.cloudfront.model.InvalidViewerCertificateException: To add an alternate domain name (CNAME) to a CloudFront distribution, you must attach a trusted certificate that validates your authorization to use the domain name. For more details, see: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html#alternate-domain-names-requirements (Service: AmazonCloudFront; Status Code: 400; Error Code: InvalidViewerCertificate; Request ID: 2d1bacd5-794c-46e5-beec-70b24fab83a6; Proxy: null)
If it does not appear automatically in the dropdown then AWS would be filtering this as it believes that the exact domain you intend to use is not usable for any CloudFront distributions in the account.
Please check the following are correct:
The exact record is covered by the alternative name(s) attached to the CloudFront distribution.
The CloudFront distribution is finished rolling out.
From the interface for the Alias value you should be able to paste the CloudFront domain name with a trailing . although in this new interface certain actions do not currently appear to work. If this is the case for you revert back to the original interface by clicking on the Switch to old console link on the left hand side of the screen and attempt from here.
Additional Comments
The screenshot indicates that an alternative domain that is being specified does not have a matching ACM certificate in us-east-1 which is attached to your CloudFront distribution.
If you do not have one generate a new one, then attach it to your CloudFront distribution when you add the alternative domain name.
I have set up an S3 bucket to reroute all traffic to example.com to www.example.com with https according to this very poor AWS guide. It works for example.com and http://example.com.
But when I access https://example.com it hangs for a little while and then routes to a blank page. Why is it so difficult to redirect a URL I own to another one in AWS and how do I fix this?
Edit:
I am now configuring CloudFront distributions and trying to find one decent tutorial explaining how to perform this seemingly simple task.
Did you miss this line in the link you provided:
Note: The sites must use HTTP, because the redirect can't connect to Amazon S3 over HTTPS.
You are trying to do something that is expliciting called out as not being possible in the docs.
BTW: If you want to use https to service static s3 websites, using cloudfront if often the easiest and quickest way to do that.
https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-https-requests-s3/
So I finally figured this out and I am going to describe here what worked for me. E.J.'s answer above was a helpful pointer but wasn't specific enough to make this the absolutely trivial task I would hope this to be, even for a first-timer.
Here are the exact steps required, with some prior notes.
Two notes:
You HAVE to setup an SSL certificate with AWS to re-route after https. As an organisation AWS has not yet reached the place where automatic certificate management is... well... automatic. You have to use what I might call AWS "Extremely Manual" ACM.
You need an AWS S3 bucket (make it have the name of the domain your are routing FROM).
Steps:
Follow this guide to setup a S3 bucket that will route (without HTTPs) from example.com to www.example.com (or vice versa I guess)
Navigate to the absolute eye-sore that is Amazon CloudFront
Click everywhere until you find a button to "create distribution"
Set "Origin Domain Name" to the link for the bucket created in step 1. DO NOT use the one AWS recommends, you have to go to the bucket and copy the end-point manually, the one AWS fills-in automatically will not work. It should look like this: example.com.s3-website-eu-west-1.amazonaws.com but location and stuff will be different obviously. Not sure why AWS recommends the wrong end-point but that is the least of my concerns about this process.
This guide works for the rest of the CloudFront distribution creation but is not super specific and points to this mess at one important part. The other steps are okay but when creating an SSL certificate just click that "Request or Import a Certificate with ACM" button (you will have to refresh after creating a certificate because Ajax didn't exist when the AWS console was made 200 years ago)
And the most important step, take the link or whatever it is to your CloudFront distribution (which will look like this: d328r8fyg.cloudfront.net, this one is fake because apparently you're not supposed to share them), and make the A record for example.com created in step 1 point to that CF distro instead of pointing directly to your bucket.
And voila, only took about 3 hours to get a URL to redirect somewhere securely. Not sure why people expect us to make it to Mars when the largest company in the world can't point one url to another and Microsoft Image Editor still can't crop to a specific pixel dimension.
Anyway. I'm glad this is over.
Just hosted a website on amazon aws in a s3 bucket. When I move around in the website the URL doesn't change, even if the link redirect on a page with a different path.
I read around that it has something to do with iframes, even though I'm not sure what they are.
Regardless, I'm just wondering whether it's possible with the aws s3 to make so that by moving around in the website, the URL gets updated as well.
For testing purposes, this is the link to the website, and to go to another part of the website, just scroll down and click on the website image.
Thank you!
I've manage to find out how to connect the web hosting s3 bucket to the freenom free domain provider.
The s3 bucket needs to have the same name as your domain + the "www". In my example my domain was paolo-caponeri.ga, the bucket needs to be www.paolo-caponeri.ga
Then in the freenom domains manager you need to go the name servers section, select the "Use default nameservers" and then press "save"
Finally you need to go to the freenom DNS manager and add a new CNAME record with "www" on the left and the full link to the s3 bucket provided in the amazon s3 properties on the right; in my case it was "www.paolo-caponeri.ga.s3-website.eu-central-1.amazonaws.com"
And that's it, after a while you should be able to connect to your website without having the URL being masked.
(thank you to Frederic Henri, who got me much closer to the answer!)
NB: I have no experience with freenom so those are more advices than a proven solution.
It seems freenom is doing frame forwarding and you would need instead a "A" / "CNAME" referral.
Your site runs fine if you go to http://testpages.paolo.com.s3-website.eu-central-1.amazonaws.com/ and as such bypass the freenom redirection.
A quick search on freenom seems it could be possible: https://my.freenom.com/knowledgebase.php?action=displayarticle&id=4
I just recently moved my domain name from a hosting provider to Amazon. I want to host my website using S3 buckets and I originally I tried to set up my buckets to be domain.com and www.domain.com but I think my previous hosting provider took these bucket names because I cannot create them.
So I am looking at a work around now ...
- created a new bucket with a unique name and put my website files in it
- I set up Cloud Front to pull the files from that bucket
- and lastly a Route 53 hosted zone with the CNAMES for domain.com and www.domain.com pointing to that Cloud Front.
Here is where my problem comes in. I cannot add www.domain.com to my CNAMEs in the Cloud Front. I get the following error:
com.amazonaws.services.cloudfront.model.CNAMEAlreadyExistsException: One or more of the CNAMEs you provided are already associated with a different resource. (Service: AmazonCloudFront; Status Code: 409; Error Code: CNAMEAlreadyExists; Request ID: 19a9a141-8b15-11e6-aa8f-87e12f4b3abf)
However, it does accept domain.com ... so when I visit domain.com I get the proper website, but when I visit www.domain.com I get the old website.
I think it is due to the fact that I can't add that CNAME in my Cloud Front. How can I fix this error?
Thank you
You cannot add an alternate domain name to a CloudFront distribution if the alternate domain name already exists in another CloudFront distribution, even if your AWS account owns the other distribution.
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html#alternate-domain-names-restrictions
This is the condition that would cause the error you're seeing. If you already have another CloudFront distribution configured with this, then clearly that needs to be removed and then this would work.
Otherwise, the old provider may still have your domain configured on one of their CloudFront distributions -- so you need to persuade them to remove it, or you'll need to have AWS support assist you. If the domain is already configured in CloudFront on another account, this can't be fixed by your actions alone.
AWS Support has a special process for handling exactly this situation: https://aws.amazon.com/premiumsupport/knowledge-center/resolve-cnamealreadyexists-error/
In case any of you guys have been playing with Zappa and/or AWS API Gateway before and CNAMEAlreadyExistsException occurred.
Just make sure with AWS CLI that domain you want to use isn't listed in AWS API Gateway anymore like this:
aws apigateway get-domain-names
In case you find it listed there:
aws apigateway delete-domain-name --domain-name <your-domain>
This fixed the issue for me. Piece!
BTW, I didn't find a way to list it or delete it through Web, just AWS API Gateway welcoming screens everywhere.
In my case I forgot I deployed an app using AWS Amplify in the past using the CNAMEs I wanted to use.
This is why I could not find the Cloudfront distribution on the Cloudfront console. Check to see if you have an AWS Amplify app using the desired names.
We want to host images on our application as fast as possible. As we already have an AWS setup we prefer to host our images on S3 buckets (but are open for alternatives).
The challenge is routing the request to the closest S3 bucket.
Right now we use Amazon Route 53 with geolocation routing policy to the closes EC2 instance wich redirects to the respective bucket. We find this inefficent as the request goes:
origin->DNS->EC2->S3 and would prefer
origin->DNS->S3. Is it possible to bind two static website S3 buckets to the same domain where request are routed based on Geolocation?
Ps: We have looked into cloudfront, but since many of the images are dynamic and are only viewed once we would like the origin to be as close to the user as possible.
It's not possible to do this.
In order for an S3 bucket to serve files as a static website, the bucket name must match the domain that is being browsed. Due to this restriction, it's not possible to have more than one bucket serve files for the same domain because you cannot create more than one bucket with the same name, even in different regions.
CloudFront can be used to serve files from S3 buckets, and those S3 buckets don't need to have their names match the domain. So at first glance, this could be a workaround. However, CloudFront does not allow you to create more than one distribution for the same domain.
So unfortunately, as of this writing, geolocating is not possible from S3 buckets.
Edit for a deeper explanation:
Whether the DNS entry for your domain is a CNAME, an A record, or an ALIAS is irrelevant. The limitation is on the S3 side and has nothing to do with DNS.
A CNAME record will resolve example.com to s3.amazonaws.com to x.x.x.x and the connection will be made to S3. But your browser will still send example.com in the Host header.
When S3 serves files for webpages, it uses the Host header in the HTTP request to determine from which bucket the files should be served. This is because there is a single HTTP endpoint for S3. So, just like when your own web server is hosting multiple websites from the same server, it uses the Host header to determine which website you actually want.
Once S3 has the Host that you want, it compares it against the buckets available. It decided that the bucket name would be used to match against the Host header.
So after a lot of research we did not find an answer to the problem. We did however update our setup. The scenario is that a user clicks a button and will view some images in an IOS app. The request when the user pushes the button is geo rerouted to the nearest EC2 instance for faster performance. Instead of returning the same imagelinks in EU and US we updated it so when clicking in US you get links to an American S3 bucket and the same for Europe. We also put up two cloud front distributions, one in front of each S3 bucket, to increase speed.