Web Hosting with AWS
Hands on tutorial with AWS hosting services.
Hello! and welcome to another exciting blog post. In this post, I will give you a hands-on tutorial with AWS Hosting Services. At the end of this blog post, you will have a fully hosted web application along with a domain name. We will deploy our web application using AWS Services such as CloudFront, Amazon Simple Storage Service(S3), Route53, and Amazon Certificate Manager(ACM).
You might wonder, why do we need all these services? Let me walk through the process. In the meantime, you will find an answer to this question.
1. Configuring Route53
Route53 will act as the PhoneBook. We need to map our domain name, into our CloudFront distribution using Route53. Route53 is the DNS Service provided by AWS. First, we can map our domain name into Route53.
Then, after setting up a CloudFront Distribution, we can map Route53 into CloudFront later.
Ready to start? let’s get started.
Navigate to Route53, and click Create Hosted Zone.
Add your domain name, and click Create hosted zone. If you don’t have a domain already. You can use sites like GoDaddy to buy a domain, or you could find a free domain using sites like freenom. I have used freenom as an example. However, you can use any DNS Provider.
Now, the default recordset should be loaded.
Select the first record, and click edit. You will find some nameserver values there (like the ones that I have highlighted). Copy these name server values one by one into your DNS Provider.
Your DNS Provider should give you the ability to change these name server values. If you are using freenom, go to settings > Management Tools > Nameservers. If you are using any other DNS provider, you will have to find where you can edit these values.
Alright, Route53 has been configured for now. Next, we have to set up our S3 Bucket.
2. Setting Up an S3 Bucket
S3 is a storage solution, provided by Amazon Web Services. Think of S3 as the server. The server is where all your files will be stored.
First, you need to create a new S3 Bucket.
Your bucket name should be your domain name. Simply, after adding the bucket name, click Create. You should see your newly created bucket now.
Now, you need to configure your bucket into static website hosting. In your bucket, go to Properties > Static website hosting. You will see something similar to this.
You need to specify two files here. Your index file, and your error file. Click Save Changes. Now you need to upload those two files into your S3 bucket.
In my case, these are the two files. It’s completely fine if you don’t understand these files, cause I have used a very complex web application as an example.
Done uploading? Now, you need to configure your S3 bucket as public, so that anyone can access these files. Go to permissions and click Bucket Policy. Copy and paste the following text, add your bucket ARN as the resource. Don’t worry about the version date.
{
"Version":"2012–10–17",
"Statement":[
{
"Sid":"PublicRead",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject","s3:GetObjectVersion"],
"Resource":["arn:aws:s3:::YOUR BUCKET NAME/*"]
}
]
}Click on Save. Now you should get a public link. You will find it under static website hosting on the overview tab.
This link should lead to your index.html file. If you try to enter bucket-link/new, since the path is undefined, the error.html file will be shown. The S3 bucket has been configured correctly. Now, we need to add some more services, so that the users can use that domain name to access our website, not that S3 bucket URL. First, let’s create an SSL Certificate for our domain using Amazon’s Certificate Manager Service.
3. SSL Certificate Using Amazon Certificate Manager(ACM)
We use ACM to create a new SSL Certificate for our website. SSL certificate is a program that will be installed into your server. It activates the padlock and the HTTPS protocol. This will allow secure connections from a web server to a browser. Almost all websites use SSL to protect sensitive information.
We can request an SSL Certificate for our domain, using ACM. Let me walk you through the process.
Navigate to ACM, and click on the Get started button under the Provision Certificates subheader. Make sure that request a public certificate is selected, and click Request a certificate. You should see something like this.
Add your domain name here, and click next. In the next step, select the validation method as DNS Validation and click Review. Recheck your domain name and the validation method. Click Confirm and request.
Now you are in the validation phase. ACM will check your domain name before issuing an SSL Certificate.
Expand your domain. You need to add this DNS Record into Route53. You can simply do that by clicking this Create Record button.
Now you have created a new Route53 record. Simply click Continue. It will take some time for ACM to issue a certificate, be patient. After successfully validating your domain, the status of your newly created certificate will change into Issued.
We can use this SSL Certificate in our CloudFront Distribution. So, let’s create our CloudFront Distribution.
4. Creating a Cloudront Distribution
Let’s say I have hosted my web application with a domain, sahan.lk on a server somewhere. Now if anyone, types in sahan.lk, the user automatically sends a request to my server. The server processes the files which I have uploaded. Then send them back to the user. In order to reduce this waiting time, we use Content Delivery Networks such as Amazon CloudFront.
Amazon CloudFront will cache those processed files on Amazon Data Centres. Since there are Amazon Data Centres around the world, it reduces the waiting time drastically. By configuring CloudFront, my web application gets loaded with minimal delay.
Let’s create our CloudFront Distribution. Navigate to CloudFront Distributions, and click Create Distribution. Don’t get intimidated by the huge form. You don’t need to fill all the fields.
Under Origin Domain add the domain of your S3 website URL. It should be something like sahan.lk.s3-website-us-east-1.amazonaws.com. Also, make sure to select Redirect HTTP to HTTPS. Now, scroll down into Distribution Settings.
Under Alternative Domain Names, enter your domain. Make sure that you select Custom SSL Certificate and under the drop-down list, select the SSL Certificate that we already created in the last step.
That’s it. Scroll down to the bottom, and click Create Distribution. One more thing here, we need to connect Route53 and our CloudFront Distribution.
Navigate into our created hosted zone in the Route53 dashboard. Click Create Record. Select simple route, then the following form should get loaded.
Since we are not using www subdomain, we don't need to add any additional record name, keep that field empty. Make sure that Alias to CloudFront distribution is selected. Under distribution pick the distribution that we have already created. Click Define simple record. And the new record should be loaded into the records table. That’s it. We have completed all the steps.
Congratulations! on completing all the steps. Now go to your domain, you should see your index.html file.
Conclusion
Let’s recap on what we have done. We have mapped our domain into AWS Route53. We have created an S3 Bucket, and we stored our files there. We were able to issue an SSL Certificate for our domain. We have configured our CloudFront Distribution by providing our SSL Certificate, and our S3 Bucket. At last, we mapped our Route53 into CloudFront.
It’s fascinating, how these different services can be mapped and able to produce fast reliable web applications.
Thank You for reading!
