Setting up my own website using AWS I realized how confusing it can be to find all the right information. So I decided to step up and write a blog myself.
My aim is to run you through some steps so you can have your website up and running in minutes. Here are some steps and checklist to successfully host a website.
Step 1: Register a Domain
Buy a domain of your choice. eg sanamdeep.dev. 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.dev . 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.dev and .sanamdeep.dev . The second domain name is for all the subdomains like www.sanamdeep.dev . > 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 2 buckets www.sanamdeep.dev and sanamdeep.dev .
We are creating two buckets so a request from sanamdeep.dev will be redirected to www.sanamdeep.dev
Go to bucket sanamdeep.dev and under Permissions > Access public settings edit all the below properties to be false.
Next under Properties > Static website hosting > choose Redirect requests and set target as www.sanamdeep.dev and protocol as https.
Now Go to bucket www.sanamdeep.dev and under Permissions > Access public settings edit all the below properties to be false.
and put the following policy under Bucket Policy
{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicReadForGetBucketObjects”,
“Effect”: “Allow”,
“Principal”: “”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::www.sanamdeep.dev/*”
}
]
}
Next under Properties > Static website hosting > Use this bucket to host a website and under index document put index.html. You can now test the endpoint. For the purpose of a sample website use a Hello world HTML file.
While adding files to www.sanamdeep.dev make sure to change Manage public permissions to Grant public read access to this object(s).
Setting up CloudFront
Now we will set up two CloudFront one for sanamdeep.dev and the other for www.sanamdeep.dev
First lets create CloudFront from www.sanamdeep.dev.
Create Distribution > Web > Get Started > Under Origin domain path you need to copy the endpoint for S3 bucket for www.sanamdeep.dev . You can go to the S3 bucket and under properties > Static website hosting you can find the endpoint.
Note: do not select the option displayed under Origin domain path.
Upon entering the Origin domain path the Origin ID is automatically populated.
Under Default Cache Behavior Settings > Viewer Protocol Policy choose Redirect Http to Https.
Under Distribution Settings > Alternate Domain Names(CNAMEs) > enter www.sanamdeep.dev
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.dev
Get the endpoint from sanamdeep.dev bucket.
Use sanamdeep.dev as the Alternate Domain Names(CNAMEs)
No need to enter index.html under Distribution Settings > Default Root Object for sanamdeep.dev
Rest of the settings will be similar to the previous CloudFront.
Setting up Route53
In this step Under Hosted Zones > Create Hosted Zones
Enter Domain as sanamdeep.dev and click create.
Now under the newly created hosted zone sanamdeep.dev 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.dev >
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.dev 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 Servers generated 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.dev or sanamdeep.dev. Both will be redirected to https://www.sanamdeep.dev
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.dev and sanamdeep.dev, the changes will be reflected immediately.
Top comments (0)