This Second tutorial is to host a website on AWS and Restricting Access to Amazon S3 Content by Using an Origin Access Identity.
Step 1: Register a Domain
Buy a domain of your choice. eg sanamdeep.com. You can buy your domain from AWS, Google domains, Go Daddy and other providers. For the scope of this blog we will consider domain to be sanamdeep.com . You will use the domain you have chosen and replace them with the usage in below steps.
To buy domain name from AWS go to Route53 and check for available domains of your choice.
Step 2: AWS Setup
This Step involves multiple substeps.
Setting up ACM or AWS Certificate Manager.
ACM handles the complexity of creating and managing public SSL/TLS certificates for your AWS based websites and applications.
Go to AWS Certificate Manager and select “Request a certificate” > “Request a public certificate” > Under domain name enter sanamdeep.com and *.sanamdeep.com . The second domain name is for all the subdomains like www.sanamdeep.com . > choose “DNS validation” > Review > confirm and request.
After this step if you have bought your domain from AWS then you will have to wait for 10–15 minutes while the certificate is issued. Otherwise if you have bought your domain from a third party domain provider then you will need to click on “ Export DNS configuration to a file” option inside your requested certificate and copy the DNS Name and Values to your domain settings.
Eg for Google Domain you can go to your particular domain and under DNS > Custom resource records you will add the DNS entries. Only enter unique entries.
Only after this step is completed will AWS take 10–15 minutes to issue a certificate.
Set up S3 Buckets
Go to S3 and make bucket www.sanamdeep.com . For the purpose of a sample website use a Hello world HTML file.
Setting up CloudFront
Now we will set up two CloudFront one for sanamdeep.com and the other for www.sanamdeep.com
First lets create CloudFront from www.sanamdeep.com.
Create Distribution > Web > Get Started > Under Origin domain path you need to add S3 bucket for www.sanamdeep.com.
Note: Select the option displayed under Origin domain path.
Upon entering the Origin domain path the Origin ID is automatically populated.
Check yes under Restrict Bucket Access. Now you will see Origin Access Identity option. If you have not created Identity before select yes else use an existing one.
Under Grant Read Permissions on Bucket choose yes. This will automatically add a bucket policy to grant permission to CloudFront to access S3 objects.
Under Default Cache Behavior Settings > Viewer Protocol Policy choose Redirect Http to Https.
Under Distribution Settings > Alternate Domain Names(CNAMEs) > enter www.sanamdeep.com
Under Distribution Settings > SSL Certificate >choose Custom SSL certificate and choose your certificate
Under Distribution Settings > Default Root Object type index.html
Click Create Distribution. After this CloudFront will take 20–30 minutes to be deployed.
Repeat the process for sanamdeep.com
since we created only one bucket we will use www.sanamdeep.com here as well.
Use sanamdeep.com as the Alternate Domain Names(CNAMEs)
enter index.html under Distribution Settings > Default Root Object for sanamdeep.com
Rest of the settings will be similar to the previous CloudFront.
Note: The purpose of this CloudFront is to redirect traffic coming to sanamdeep.com to redirect to www.sanamdeep.com bucket. So the settings would remain the same.
Setting up Route53
In this step Under Hosted Zones > Create Hosted Zones
Enter Domain as sanamdeep.com and click create.
Now under the newly created hosted zone sanamdeep.com you will find two automatically created record sets.
One of them will have the Name servers with four entries.
Now Click Create Record Sets >under Name put sanamdeep.com >
check Alias as yes > choose alias target as the corresponding CloudFront. Make sure to choose the right alias Target.
Create a Record Set for www.sanamdeep.com following the above steps.
Copying the DNS entries
For Third party providers we already copied the DNS entries from certificate manager. But for people using domain from AWS you will need to copy the DNS entries under Route53 if not added automatically.
Copying Name Servers
This step is for domains from third-party providers copy the Name Serversgenerated in Route53 and add them to the domain. Eg for google domains they can be added under DNS> Name Servers
After this step, you can open your website either by www.sanamdeep.com or sanamdeep.com. Both will be redirected to https://www.sanamdeep.com
Changes not reflecting on website
Also in case, you make the change to your website by changing contents in S3 bucket. CloudFront can take some time before reflecting the changes automatically. A Faster way is to go to the CloudFront > Invalidations > Create Invalidation and enter /* if you want to invalidate all the files. After creating the invalidation on both www.sanamdeep.com and sanamdeep.com, the changes will be reflected immediately.
Top comments (2)
Thank you so much for your tutorial, it is better if you include some image for more readable.
Cloudfront auto downloads and caches your static site to the edge location based on TTL, by default it is 86400 which is equal to 1 day, you can set it to lower or higher than this value.
BTW:
Create Invalidationit can cost some fee, and I think better you can create auto deploy script, every time you update your website, it auto push to s3 then run this command to updateCreate Invalidation:It very helpful and save your time.
That was very informative. I will keep your suggestions in mind next time.Will try and update the current ones as well.