Simple steps to host a website/web-app in AWS with SSL/TLS enabled! [Complete Guide]
Hey guys, in this article I will guide you through the steps which you can follow to host your website or web-app (built with React, Angular, etc…) using Amazon Web Services (AWS) with SSL/TLS enabled (HTTPS). This article is targeted for beginners so anyone could follow these simple steps.
What do you need to get started?
You need the following two prerequisites in order to host a website/web-app in AWS:
- An active AWS account (Free Tier can be used)
- A domain (Can be either a free or purchased domain). The domain which I’ll be using for demo will be devonwijesinghe.tk
What services in AWS will be used?
The following services will be used:
- Simple Storage Service (S3): https://docs.aws.amazon.com/s3
- Route 53: https://docs.aws.amazon.com/route53
- Cloud Front: https://docs.aws.amazon.com/cloudfron
- Certificate Manager: https://docs.aws.amazon.com/acm
Side Note: If you are totaly new to AWS, I recommend you to watch the following video!
Let's get started! 🌟
Step 1: Prepare your Website or Web-App
If you have a simple HTML website, you don't have to do anything in this step, simply skip this step!
If you have a Web App developed using React, Angular or any other frontend framework, you have to generate a production build. How you generate a production build varies between frameworks (You can refer to the framework documentation to learn how this is done).
Either way, at the end of this step you should end up with a folder containing an index.html file and relevant style files, assets and scripts (if any). In my case, I have a very simple HTML site which displays the following!
Step 2: Create a S3 bucket, Upload Website and Configure
Once you have your website or web-app ready, you can head over to the AWS management console, login and navigate to the “Simple Storage Service (S3)” service. We will be utilizing the Static Web Hosting feature of S3 to get the website/web-app up and running!
As the first step, you need to create a brand new S3 bucket.
The bucket you create should have the exact name as your domain! In my case, the bucket name should be “devonwijesinghe.tk” (Note that you should not put “www” in front of the bucket name). Also, make sure to untick the “Block all public access” checkbox!
After the bucket is created, you should navigate into the created bucket. You should then upload your website/web-app files into the S3 bucket. You just have to add the files in your website folder and click on upload! Don't worry about the rest of the configurations for now!
Once the upload is successful, your bucket root should contain the “index.html” file along with the relevant style files, assets and scripts (if any).
Afterwards, you need to allow PublicReadGetObject on the S3 bucket. This could simply be done by navigating to the “Permissions” tab and attaching the following policy to the S3 bucket.
The policy can be copied from below and changed by adding your bucket name!
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<YOUR BUCKET NAME>/*"
}
]
}Next, you have to enable static web hosting under the bucket “Properties” tab.
Select “Host a static website” option for the hosting type and for both Index Document and Error Document you should enter “index.html”.
After this step is complete, you should be able to find a link which can be used to access your website/web-app. You can test it out now!
Example: http://devonwijesinghe.tk.s3-website-ap-southeast-1.amazonaws.com/
Awesome right, you are almost there! In the next steps, you will get to know how you can connect this to a custom domain!
Step 3: Create Hosted Zone is Route 53
As mentioned before in this article, you require a free or purchased domain to fully complete all the steps. If you already have a domain, then awesome, if not, don't worry, you can get a free domain! You can visit the following site and get yourself a free domain.
Once you sort out your domain, you should go back to the AWS console and navigate to the “Route 53” service. You should then navigate to “Hosted zones” and create a new hosted zone.
You have to make sure to enter the exact domain name and select “Public hosted zone” for the type when creating the new hosted zone.
Once you have created the hosted zone, it should contain two records, NS (Name Server) record and SOA (Start Of Authority) record. You will need to use the NS record in the next step!
Step 4: Configure Domain Name Servers from Domain Admin Panel
Next, you should head over to the admin panel of your domain provider, in my case it is freenom.com. You should find the section which enables you to configure the name servers for the domain! For different domain providers, this would look a bit different!
Once you located the place to configure the Nameservers in your domain provider, you should add them like shown below!
Side Note: The values highlighted in the red box in the above screenshot (previous step) is what you should add as nameservers in your DNS management console!
You should be aware that sometimes Nameservers takes a couple of hours to Sync in. So if your domain doesn't work at the end of this article, be patient and try again in a few hours and see the magic! 🎩
Step 5: Create an SSL/TLS certificate using the Certificate Manager
To serve your website via HTTPS, you required a SSL/TLS certificate. You can either get this certificate from the third party or create one from AWS itself using the Certificate Manager.
Head over to the AWS console and navigate to the “Certificate Manager” service. In this step make sure to select the region as us-east-1. You should then click on “Request a certificate”.
Proceed with “Request a public certificate” option.
In the next step, when adding the domain names for the certificate, make sure to add the exact domain name and also the www sub-domain. Refer the screenshot below!
The step to add tags can be skipped for now as it is not mandatory! For the validation method, choose “DNS validation” and click Next.
You will see the following “Create record in Route 53” buttons as shown below. Click on both the buttons.
To verify that the records are added to Route 53, you can head over to the hosted zone you created earlier and verify if two CNAME records are added for validation!
If everything goes smoothly, the status of the certificate should be “Issued” as shown below. Sometimes this may take a while! 😛
Step 6: Create a Cloud Front Distribution
Next, you have to navigate to the “Cloud Front” service in AWS and go to the “Distributions” section. Click on the “Create Distribution” button and complete the following steps!
There are so many configurations that you could do when creating a new Cloud Front Distribution. However, you do not have to worry about them all, you can keep most of the configurations as default. You only have to focus on setting the Origin Domain Name, View Protocol Policy and Alternate Domain Names (CNAMEs) and SSL certificate!
For the Orgin Domain Name, you should make sure to paste the URL you got from the S3 static web hosting when you configured the S3 bucket. Refer screenshot below!
It’s really tempting to select the Orgin Domain Name from the drop down you get when you click on the textfield, but you should not do it! One more important thing you should do is select “Redirect HTTP to HTTPS” for “View Protocol Policy”. This will make sure that the HTTP traffic to your website will also be served via HTTPS!
For the Alternate Domain Names (CNAMEs) field, you should enter your top level domain and all sub-domains (as comma separated values). The domain and subdomains you define here should tally with the domain and sub-domains you added when creating the SSL certificate!
Finally, you have to select “Custom SSL Certificate” option for the SSL certificate and from the drop down, select the certificate that you created previously!
Side Note: You might not see your Certificate in the drop down if you don’t make it in the correct region!
As mentioned before, don’t worry about any other configurations, keep it as default and create the CloudFront distribution. Once it is completed, the status should be “Deployed” and the state should be “Enabled”. It may take some time to get deployed!
You can make sure this step is successful by visiting the genarated URL found under Domain Name in the created distribution. You should be able to see your website!
Example: https://d34qpo65dtcaco.cloudfront.net/
Side Note: The configuration of the created distribution should look similar to the screenshot below.
Step 7: Create Records in Route 53 to direct to CloudFront
Just one more final step! You have to head back to “Route 53” service in AWS and create two more records in the hosted zone that you created earlier. Click on the “Create Record” button and complete the following steps!
Select “Simple routing” as the routing policy and click Next!
Next, click on the “Define simple record” button.
For the first simple record, leave the “Record name” empty and for “Value/Route trafic to” select “Alias to CloudFront distribution” and select or paste the Domain Name of the CloudFront distribution you created earlier! In my case this is d34qpo65dtcaco.cloudfront.net. The “Record type” should be an “ A record”.
After the previous record is defined, click on the “Define simple record” button onces again. This time, for the “Record name”, enter “www” and for “Value/Route trafic to” select “Alias to another record in this hosted zone” and type in your main domain. In my case it is devonwijesinghe. The “Record type” of this record should also be an “ A record”.
Your final record set should look like this once you are done defining the simple records (refer screenshot below).
Good Job! You did it! 🔥
Now you have successfully completed all the steps required to host your website/web-app with SSL/TLS enabled! You can now visit your website via HTTPS. Both https://your-site.com and https://www.your-site.com should work!
Example:
Additional Tip: If you need to update your site, you only have to change the content in the S3 bucket and invalidate the cache in CloudFront.
Thank you for following this article and hope it helped you! Please do buzz me if you want any help! 😛
- Email: wdevon99@gmail.com
- Linkedln: https://www.linkedin.com/in/devon-wijesinghe/
- Twitter: https://twitter.com/wdevon99/
