AWS Cloud DevOps (Project — 1): Deploying a Static website on AWS S3 with CloudFront Integration

Case 1: Functional—Setting Up and Testing an S3-Hosted Static Website!

Objective:

• Create an S3 bucket via the AWS Console
• Upload the provided index.html file
• Set up the S3 bucket for static website hosting
• Ensure the bucket is internet-accessible
• Test access using the Bucket website endpoint, not the Object URL, in an incognito browser window.

Create an S3 bucket and give a unique name. Because S3 bucket Names must be unique globally, across all the AWS accounts.

— Let’s name the bucket ‘levelupbank-goldteam’.

Scroll down to ‘Object Ownership’ and select ‘ACLs enabled’

keep the rest of the settings at their default values, and click ‘Create bucket’

Upload the index.html to the levelupbank-goldteam bucket.

Then, click on ‘Properties’, scroll down to ‘Static Website Hosting’. Click the ‘Edit’ button, select ‘Enable’, and enter the name of the file in the ‘Index document’ field. Click ‘Save the changes’

Once you uploaded the index.html file, then you can only access the file through the ‘Open’ option. However, if you try to copy the file’s URL from the ‘Object URL’ option, it will not working as shown in the image below, because the file is not public.

So, you should return to the ‘levelupbank-goldteam’ bucket then go to the ‘Permissions’ tab.

Then, click the ‘Edit’ button next to ‘Block Public Access’ to change the bucket setting to be accessed through the internet access. You should uncheck ‘Block All Public Access’.

Next, navigate to the ‘Access Control List (ACL)’ section and select ‘Edit.’ Check ‘Read’ box access to the ‘Everyone (public)’ group within the Bucket ACL. Recognize the consequences of this modification by ticking the acknowledgment box that states, ‘I understand the effects of these changes on my objects and buckets.’ Then click ‘Save changes’ to confirm.

Then, return to the bucket, select the file, and click on the ‘Action’ dropdown option to choose ‘Make public using ACL’.

Then, the bucket is publicly accessible, as shown in the image.

Lastly, you confirm that the website is accessible, using the bucket website endpoint URL, not the object URL. In your file, go to the properties tab, find static website hosting, and copy the bucket website endpoint URL.

Then, open an incognito browser, paste the URL and here we go!!!

Case 2 — Advanced: Use AWS CloudFront with an S3-Hosted Static Website!

Objective:

• Implement CloudFront with an S3-hosted static website to leverage edge caching for enhanced global performance.
• Set up CloudFront to allow only HTTPS access and ensure automatic redirection from HTTP to HTTPS.
• Confirm that the website is accessible through the CloudFront URL and Validate that the URL redirects from HTTP to HTTPS in the browser.

Let’s search for CloudFront and create a CloudFront distribution.

In the ‘Origin’ section, select your website’s S3 bucket.

Scroll down to the ‘Origin access’ option and select ‘Origin access control settings’ (recommended), as this setting allows the bucket to restrict access exclusively to CloudFront.

Click ‘Create control setting’ button. A popup will appear. Keep the rest of the settings at their default values, then click the ‘Create’ button.

To summarize the ‘Origin Access’ concept, this section offers options for configuring how CloudFront interacts with the S3 bucket. I have chosen ‘Origin Access Control Settings (Recommended)’ because it restricts access to the bucket, ensuring it is only accessible via CloudFront. This recommended setting significantly enhances security.

Proceed to the default cache behavior settings and select ‘Redirect HTTP to HTTPS’.

Let’s choose the ‘Do not enable security protection’ option from the Web Application Firewall (WAF). Opting for this setting is generally not recommended because it leaves your application without certain security measures, potentially exposing it to attacks. Best practice dictates selecting ‘Enable security protections,’ which does incur costs based on the number of requests. However, for the purposes of this project, we will proceed with the ‘Do not enable’ option as illustrated in the image.

Lastly, keep the rest of the settings at their default values, except for the ‘Default Root Object.’ Here, add your ‘index.html’ page, then click the ‘Create Distribution’ button to finalize the setup.

Then, you should see a message at the top in a yellow banner stating, ‘The S3 bucket policy needs to be updated’. Click on ‘Copy Policy’.

Next, click on ‘Go to S3 bucket permissions’ to update the policy, which will redirect you to the ‘Bucket policy’ section. Click the ‘Edit’ button, then paste the policy you previously copied into the ‘Bucket Policy’ field. After reviewing the policy to ensure it accurately reflects the permissions required, click ‘Save changes’ to apply the policy.

Finally let’s go back to CloudFront to get the distribution domain name. After copying it we can simply paste it into our web browser…. Voila! Success! The website is now up and running on CloudFront guaranteeing that all traffic is securely redirected to HTTPS for an encrypted connection. This configuration does not boost security. Also enhances the performance of the site, with the content delivery network capabilities provided by CloudFront. Enjoy browsing smoothly and securely!

Thank you for taking the time to read through this article 💻. As I continue my journey 🚀 into the vast and evolving world of AWS Cloud DevOps, I look forward to sharing more advanced projects and learnings.

Stay tuned 📡 for future articles where I will delve deeper into the complexities ⚙️ and innovations 💡 of cloud computing ☁️.