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.
I've got an S3 bucket configured to host a static website, and if I browse to the bucket URL it shows the index.html file. I also have a CloudFront distribution to show another S3 bucket under a custom domain. Is there any chance I could configure CloudFront to serve one bucket from the root and another from a custom path? So:
mydomain.com -> bucket1/index.html
mydomain.come/some-path -> bucket2/index.html
I already created an origin for the bucket and set up a path pattern for it and some-path, but I'm getting 403 Forbidden, even though if I browse to the origin directly I can see the webpage.
This configuration works fine, but it requires that the object in bucket2 be located at some-path/index.html inside bucket2.
The path pattern you configured in the cache behavior is still part of the request path, so it is forwarded to the origin.
CloudFront does not support removing part of the request path before forwarding the request to the origin.
I am a little bit confused with subdomain point to S3 bucket.
I have domain called mydomain.com from NameCheap.com and my hosting server is Hostgater.
So my website is up and running.
I have a lot of mp3 files. So I have created Amazon S3 bucket call
media.mydomain.com
So I got my static s3 website URL as follow.
http://media.mydomain.com.s3-website-ap-southeast-1.amazonaws.com/
I want to point this url to my subdomain, media.mydomain.com.
May I know how and where to point? NameCheap or Hostgator.
I have created subdomain in hostgator but it can only redirect to S3 URL
Thanks,
Alex
You can make a new DNS record in Namecheap for this task
In your Namecheap account, go to Manage your domain, then Advanced DNS, and Add new Record with CName type
Host: Enter your subdomain media
Value: Enter media.mydomain.com.s3-website-ap-southeast-1.amazonaws.com. (with a dot . at the end)
TTL: Automatic
Save all changes and wait for about 1 hour for the new record to take effect.
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