Skip to main content

Story of Hosting a Static Website on AWS

I recently went through this process of hosting a static website on Amazon Web Services (AWS) S3 bucket, mapping it to a custom domain, and enabling HTTPS and found it to be a bit complex, so I wanted to share my experience to help others.

Since, I wanted to share my website with the world but I needed a place to host it. So, I turned to AWS S3, a storage service that could handle the job.

First, I created a bucket (like a digital container) on S3 and uploaded my website files. Initially, I made the bucket public for easy access, but this meant I had to type the entire file name (e.g., index.html) every time I visited. This wasn't ideal.

To avoid the long URL, I enabled static website hosting on the S3 bucket. This allowed me to access my website without specifying the filename. However, the provided URL was long and difficult to remember.

Needing a better address, I registered a domain name (e.g., abc.com) from a third-party like GoDaddy. But how could I connect my domain to the S3 bucket?

Enter Route 53, AWS's custom DNS service. I created A records in Route 53, one for abc.com and another for www.abc.com. This pointed my domain to the S3 bucket, but I still had an issue because the website was accessible only via HTTP.

Security is crucial, so I wanted to switch from HTTP to the secure HTTPS protocol. However, S3 buckets can't directly use HTTPS certificates.

The solution came in two parts:

  1. AWS Certificate Manager (ACM): I used ACM to register an SSL certificate for my domain. However, this certificate couldn't be directly used by the S3 bucket.

  2. AWS CloudFront: This service delivers content securely. I created a CloudFront distribution with my domain name and linked it to the ACM certificate (created in the US Virginia region for compatibility and due to regional limitations). CloudFront even provided a shorter URL, but it still wasn't ideal.

Finally, I removed the A records that directly pointed to the S3 bucket (as we wouldn't need HTTP access anymore). CloudFront created new A records for my domain in Route 53, allowing access through both abc.com and www.abc.com. I also deleted the unnecessary www.abc.com bucket since CloudFront could handle both URLs.

With CloudFront redirecting HTTP requests to HTTPS, I achieved a secure and user-friendly way to access my website. This journey through the AWS cloud may seem complex, but it empowers anyone to host their website with ease and security.

Labels:

Comments

Post a Comment

Popular posts from this blog

Unlock protected blocks in Siemens SIMATIC Step 7

Recently I'd been called by Hindalco's Fabrication Plant division to unlock the protected blocks in Siemens SIMATIC Step 7. They were in need to unlock those blocks since an year because of 1 million Rupees of loss per month. They want to re-program those blocks but it was locked by the man who'd done the setup. From the people working in that department, I came to know that they were trying to call that man (someone from Italy) right here but he's not coming. Actually, what he'd done was that he'd locked some of the blocks and deleted the source file. And Siemens didn't provide any feature to unlock. Department people also told me that even the people working in Siemens don't know how to do it. Being a software engineer I know that any thing can be reverse engineered. So I took up the challenge. How did I unlocked the blocks? The first thing I'd done was searched about this software at Google and read about what is this software all about. Aft...
50 comments
Read more

JS: The complete code example of Crypto.js (DES)

For one of the project I was trying to use crypto.js but I found that the Quick-start Guide have some deficiency in terms of library usage. So I am writing it here as a useful note for memory recap. <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/tripledes.js"></script> <script> var encrypted = CryptoJS.DES.encrypt("The secret message", "secret_key"); var e_msg = encrypted.toString(); console.log(e_msg); var decrypted = CryptoJS.DES.decrypt(e_msg, "secret_key"); var d_msg = decrypted.toString(CryptoJS.enc.Utf8); console.log(d_msg); </script>
4 comments
Read more

Openmeetings Widget Wordpress Plugin

One of my client asked me to create a Wordpress plugin, so the first thing I did was to search for any existing plugin on which I can work on. Luckily I found one. It was developed by Shuki Vaknin. You can visit his plugin at:  http://wordpress.org/extend/plugins/openmeetings-integration-plugin-widget/ But I had little different requirement. So I modified the Shuki Vaknin's plugin. The modification is that every session has a unique username. I choose guest as default name while adding a timestamp along with guest keyword like guest34578689 . Download Link:  openmeetings-integration-plugin-widget.zip
6 comments
Read more