I am trying to host my Angular website using CloudFront, S3, and Amazon EC2
instances. I am creating a bucket for e.g. bucket_name and creating 3 folders in it naming:-
1. example
2. login
3. logout
And my URL is:-
1. abc.com/example/
2. abc.com/example/login
3. abc.com/example/logout
But when I host my website I am able to access abc.com/example/ but the issue I am facing is that when I tried to access login and logout URL I am getting an error "404 not found". Because it is trying to locate index.html in the example folder of the S3 bucket like in this way example/login/index.html and EC2 instance is for API calls.
To host your site on S3 bucket and aws CloudFront you must include your parent file index.html in S3 bucket and after this you need to configure static website hosting under properties of S3 bucket. Set these fields as use this bucket to host website then enter index document index.html this file must be in S3 bucket, and save this.
Next step you can edit public access of this bucket, if you want this site accessible outside world then turn off block public access under Permissions tab of S3 bucket.
Later, to host this using CloudFront you need to create CloudFront distribution, and set Origin Domain name = Your S3 bucket name and Default Root Object to your parent index.html file (which is stored in s3 bucket) and save this CloudFront distribution, now check the Domain name URL on browser, it should work fine.
After completing this you can setup your EC2 instance for back-end API calls as per your needs.
Try to keep pages like login.html and logout.html. That should work.
Related
I'm using custom domain and CloudFront for S3 static hosting site to serve https.
It's working fine when I open the pages through the app's internal buttons or link,
but if I input direct URL in the address bar, or click the browser refresh button, it shows
This XML file does not appear to have any style information associated with it. The document tree is shown below.... Access Denied error screen.
I searched related answers and tried to /index.html in the CloudFront general setting as Default Root Object but it didn't work. (Before this try, it was index.html)
When I updated it as /index.html, even the domain itself didn't work.
I have another S3 static hosting site without CloudFront and certificate just for testing.
This site is working fine even I input direct url or click the refresh button.
Above two S3 bucket have same settings (root object is index.html and error document is also index.html)
After this, I changed CloudFront Origin Domain Name from REST endpoint to website endpoint referred to this docs (https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/)
But now getting this error when I refresh the screen.
All the object in S3 is owned to bucket owner and has public access.
This app is made by React and using react-router-dom.
Could you give me any hint or advice?
Thanks.
Solved...
My S3 bucket region requires . instead of - when I use website endpoint for cloudfront.
And FYI..
In my case, there are some little difference with the document and some tutorial. My CloudFront distribution doesn't need to use default root object, and individual objects in S3 has no public access but the bucket has it.
There are some specific endpoints to be used for website hosting buckets, which are listed in the Amazon Simple Storage Service endpoints and quotas document. For example, when hosting in eu-west-1, cloudfront will prepopulate the dropdown with example.s3.eu-west-1.amazonaws.com, but if you look into the bucket settings, Static website hosting section, it will show you the correct url example.s3-website-eu-west-1.amazonaws.com
Carefully read the table! The url scheme is not fully consistent, eg. s3-website.us-east-2.amazonaws.com but s3-website-us-east-1.amazonaws.com - just to make your day a bit more joyful.
So I had the exact same issue and was able to resolve it after taking the s3 bucket endpoint located in the properties of the s3 bucket and then pasting it into the cloudfront origins section into the origin domain. I removed the beginning of the endpoint for example: "http://website.com.s3-website.us-east-2.amazonaws.com" you would just remove the "http://" and then post the rest into the cloudfront origin domain and click save. That should solve the problem!
I tried all kinds of different options such as making sure every object was public as well in the s3 bucket. Make sure your s3 bucket is also publicly available.
Certain regions do have different endpoints for your s3 buckets. Here is a link that shows more of that: https://aws.amazon.com/premiumsupport/knowledge-center/s3-rest-api-cloudfront-error-403/
With an S3 static site, I am able to hit /directory and it will serve up the index.html file inside the directory. Once I add the S3 bucket as a CloudFront origin, I instead get an Access Denied message.
How can I replicate this S3 functionality in CloudFront?
The fix was to setup S3 static site hosting and use CloudFront to point to it as a remote origin website instead of an S3 bucket.
I am trying to create a record set in route 53 that will point to one of my static file on s3.
Ex: https://s3-us-west-2.amazonaws.com/test/terms-conditions/termsconditions.html
I have created a CNAME record in route 53
"termsconditions.mydomain.com"
and in the value I have given the s3 url.
https://s3-us-west-2.amazonaws.com/test/terms-conditions/termsconditions.html
The record was saved without any errors. But now when I go to
termsconditions.mydomain.com I don't get any response.
Any idea why this is not working?
I have configured other record sets and pointed to EC2 instances and loadbalancers and they are working fine.
When using Amazon Route 53 to point to an Amazon S3 bucket:
The S3 bucket must be named the same as your domain, eg termsconditions.mydomain.com
Configure the bucket for static website hosting
Create a Route 53 record set to alias the domain name to the S3 bucket
Note that the record set can only point to the "domain portion" of the URL, not the whole URL. So, you'll need to use a bucket that is named termsconditions.mydomain.com and then access the page via the complete URL of termsconditions.mydomain.com/termsconditions.html.
If you want to just use the domain portion of a URL (eg termsconditions.mydomain.com) to direct to a specific page, define that page as the "Index" document in the Static Website Hosting configuration page.
See: Setting Up a Static Website Using a Custom Domain
I want to host a static website on S3, i.e. example.com. It requires a bucket name the same as example.com.
Then I found example.com had been occupied by other people.
So that's my question, why bucket name must be the same as the website name? For there are Route 53 to map the website to the bucket endpoints, it appears no necessary for this limitation.
Is there any reason for this?
The brief answer is, "that's how Amazon designed it."
If the bucket name weren't the same as the domain name, how would S3 know which bucket to use to serve requests for a given domain?
You can't say "Route 53," because S3 was created before Route 53, and web site hosting in S3 works the same even if you aren't using Route 53 for DNS.
Similarly, it can't be a configuration option on the bucket, because that would just create a new series of problems -- if the previous owner of a domain still had their bucket configured with your domain, you'd have exactly the same problem as you do, now.
You can still host your site on S3, but with a mismatched bucket name, you need either a reverse proxy server in EC2 in the same region, to rewrite the host header in each request to match the bucket name, or, you can use CloudFront to accomplish a similar purpose, because the bucket name, then, does not need to match -- CloudFront will rewrite the Host header also.
There's a pretty simple reason for this: by the time Amazon gets the request from your browser, the main information available is the domain in the URL, which isn't enough to figure it out.
Suppose your site is example.com, but that bucket name is taken, so you make the bucket my-example. Then you'll have an URL something like http://my-example.s3-website.us-east-1.amazonaws.com/. That will work just fine in your browser, because it gets resolved to some AWS web server, which looks at the Host HTTP header, pulls out your bucket name, and grabs your bucket content.
Now suppose you add something to Route53 to make example.com work. You can either add A records, which let your browser turn example.com directly into an IP address for some AWS S3 webserver. Or you can put in a CNAME, which points from example.com to the full my-example hostname. Either way, your browser's going to look up an IP address, contact an Amazon webserver, and send a Host header that just says example.com. So if that isn't the bucket name, it doesn't know what to do.
Admittedly, it could go an extra step. After all, you told it the hostname when you set up the bucket for serving websites. So at first thought, it seems like it would be nice if it used that as well. However, that won't really solve your problem either, because whoever set up the example.com bucket could well have set it up for hosting.
It seems like the best way to work around this is Cloudfront, which can associate domain names with arbitrary buckets.
I think is the way AWS have designed this and that's it : Check this
I have this done for my company's website and it works great!
Create an S3 bucket and configure it to host a website
Amazon S3 lets you store and retrieve your data from anywhere on the
internet. To organize your data, you create buckets and upload your
data to the buckets by using the AWS Management Console. You can use
S3 to host a static website in a bucket. The following procedure
explains how to create a bucket and configure it for website hosting.
To create an S3 bucket and configure it to host a website
Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
Choose Create bucket.
Enter the following values:
Bucket name - Enter the name of your domain, such as example.com.
Region - Choose the region closest to most of your users.
Make note of the region that you choose; you'll need this information later in the process.
Choose Next.
On the Configure options page, choose Next to accept the default values.
On the Set permissions page, uncheck the Block all public access check box, and choose Next.
Note
The console displays a message about public access to the bucket. Later in this procedure, you add a bucket policy that limits access to the bucket.
On the Review page, choose Create bucket.
On the list of S3 buckets, choose the name of the bucket that you just created.
Choose the Properties tab.
Choose Static website hosting.
Choose Use this bucket to host a website.
For Index document, enter the name of the file that contains the main page for your website.
Note
You'll create an HTML file and upload it to your bucket later in the process.
Choose Save.
Choose the Permissions tab.
Choose Bucket policy.
Copy the following bucket policy and paste it into a text editor. This policy grants everyone on the internet ("Principal":"*") permission to get the files ("Action":["s3:GetObject"]) in the S3 bucket that is associated with your domain name ("arn:aws:s3:::your-domain-name/*"):
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal":"*",
"Action":[
"s3:GetObject"
],
"Resource":[
"arn:aws:s3:::your-domain-name/*"
]
}]
}
In the bucket policy, replace the value your-domain-name with the name of your domain, such as example.com. This value must match the name of the bucket.
Choose Save.
Create another S3 Bucket, for www.your-domain-name
In the preceding procedure, you created a bucket for your domain name, such as example.com. This allows your users to access your website by using your domain name, such as example.com.
If you also want your users to be able to use www.your-domain-name, such as www.example.com, to access your sample website, you create a second S3 bucket. You then configure the second bucket to route traffic to the first bucket.
Note
Websites typically redirect your-domain-name to www.your-domain-name, for example, from example.com to www.example.com. Because of the way S3 works, you must set up the redirection in the opposite direction, from www.example.com to example.com.
To create an S3 bucket for www.your-domain-name
Choose Create bucket.
Enter the following values:
Bucket name - Enter www.your-domain-name. For example, if you registered the domain name example.com, enter www.example.com.
Region -Choose the same region that you created the first bucket in.
Choose Next.
On the Configure options page, choose Next to accept the default values.
On the Set permissions page, choose Next to accept the default values.
On the Review page, choose Create bucket.
n the list of S3 buckets, choose the name of the bucket that you just created.
Choose the Properties tab.
Choose Static website hosting.
Choose Redirect requests.
Enter the following values:
Target bucket or domain
Enter the name of the bucket that you want to redirect requests to. This is the name of the bucket that you created in the procedure To create an S3 bucket and configure it to host a website.
Protocol - Enter http. You're redirecting requests to an S3 bucket that is configured as a website endpoint, and Amazon S3 doesn't support HTTPS connections for website endpoints.
Choose Save.
Amazon.com just announced that one can host static web sites in a S3 bucket. I went to their setup page at http://docs.amazonwebservices.com/AmazonS3/latest/dev/index.html?WebsiteHosting.html and created a bucket for my static web site, and it worked fine. I have an URL of the form http://[my bucket name].s3-website-us-east-1.amazonaws.com/.
However, I would like to point a subdomain that I own (e.g. static.mydomain.com) to my static web site at Amazon S3. Has anybody figured out how to do that?
I appreciate any help you can give me.
It turns out that to make it work, you cannot just map any arbitrary subdomain to any arbitrary bucket. The fully qualified subdomain name must be the same as the S3 bucket name.
Suppose the name of your site is static.mydomain.com. Then you need to create a S3 bucket with that same name, named static.mydomain.com.
Once you configure that bucket as a S3 static web site, it will have a URL assigned to it that looks something like http://static.mydomain.com.s3-website-us-east-1.amazonaws.com.
Go to your domain host and map your subdomain to the URL from step 2. In enom.com, that meant mapping the host "static" to the address "static.mydomain.com.s3-website-us-east-1.amazonaws.com" as a CNAME record.
Thanks to Uriah and David for suggestions. I eventually got my answer at an Amazon AWS forum.
Make sure that you follow the S3 DNS bucket naming conventions when creating your bucket.
Then:
Enable S3 Website support for the bucket using the AWS Management Console at Properties --> Website
Make sure the files in the bucket have public read permissions
Try the website using the endpoint listed in the Management Console
Setup your CNAME using the listed endpoint (e.g. www.example.com CNAME www.example.com.s3-website-us-east-1.amazonaws.com)
Create a hosted zone say mydomain.com. You can use a web based UI DNS30.
Now create a CNAME entry for this hosted zone.
Add a resource record
with following detail Name as "mydomain.com"
Type as "CNAME"
Value as "mydomain.com.s3.amazonaws.com"
TTl as "on your required configuration"
Hope this will also work for static.mydomain.com
Regards-
Udit
This is called Virtual Hosting of Buckets: http://docs.amazonwebservices.com/AmazonS3/latest/dev/VirtualHosting.html
How about using a DNS service, like the Route 53 that Amazon provides. Set it up with a CNAME from your sub domain to the public bucket URL. Of course, if your domain company provide CNAME configuration, that could work directly.
Update 2019 : AWS custom subdomain hosting in S3
As of today following steps worked for me to have a working subdomain for AWS S3 hosted static website:
Create a bucket with subdomain name. In this example www.subtest.mysite.com
Note: Make sure on 'Permission' tab of bucket:
-Block public access (bucket settings)
-Access Control List &
-Bucket policy
are appropriately set to make sure bucket is public. ( Assuming you already did this for your root domain bucket, those settings can be mirrored on this subdomain bucket)
Upload the index.html file in the bucket
Create a CNAME record with your domain provider