Project Summary

Below is a comprehensive summary of every step taken to create and deploy the static website, focusing on areas where issues were encountered and resolved.

AWS Account Setup

• Create IAM User: Created an IAM user with admin permissions for daily operations to avoid using the root account.

Static Website Hosting

• Create S3 Bucket: Set up an S3 bucket for static website hosting. Uploaded HTML and CSS files to the S3 bucket.
• Configure S3 Bucket Policy: Updated the bucket policy to allow public read access. Resolved a 403 Forbidden error by correctly setting the bucket policy.

HTTPS with CloudFront

• Set Up CloudFront Distribution: Created a CloudFront distribution to enable HTTPS for the S3 website. Chose the S3 website endpoint for the origin domain. Configured the distribution settings, including SSL/TLS support.
• Obtain SSL Certificate: Requested an ACM certificate in the N. Virginia region for the CloudFront distribution. Encountered issues with domain validation, resolved by manually adding CNAME records in Route 53.

Custom Domain with Route 53

• Register and Set Up Domain: Registered a custom domain with Route 53. Created a hosted zone and added necessary records. Associated the domain with the CloudFront distribution using Route 53.

Visitor Counter Implementation

• Lambda Function: Created a Python Lambda function to handle visitor count. Set up a DynamoDB table to store the visitor count. Encountered issues with IAM permissions and fixed them by attaching appropriate policies.
• API Gateway: Configured API Gateway to expose the Lambda function as a REST API. Tested the API using Postman to ensure it returned the correct visitor count.

Frontend Integration

• Add Visitor Counter to Website: Updated the HTML and CSS files to display the visitor count. Added JavaScript code to call the API and update the visitor count on page load. Resolved CORS issues by configuring CORS in API Gateway. Fixed an issue with the visitor count displaying "undefined" by ensuring the Lambda function returned the correct JSON response.

Continuous Deployment

• Set Up GitHub Repository: Created a GitHub repository for the project. Configured a GitHub Actions workflow to automatically deploy updates to the S3 bucket. Resolved issues with pushing changes to the repository by managing branches and fixing merge conflicts.

Final Troubleshooting and Validation

• Invalidate CloudFront Cache: Invalidated CloudFront cache to ensure updated files were served. Verified that the website displayed correctly with the visitor counter working.

Final word

• In this project, I built a secure, dynamic website using a variety of AWS resources. I hosted the site on AWS S3 and used Amazon CloudFront to deliver content quickly and securely with SSL/TLS encryption. To keep track of visitors, I set up a counter using AWS Lambda, API Gateway, and DynamoDB. Managing the custom domain through Route 53, I ensured everything pointed to the right place smoothly. My skills in Python, JavaScript, HTML/CSS were certainly put to the test for this, and I used Git and GitHub Actions for continuous deployment, making updates and version control a breeze. Along the way, I tackled challenges like managing permissions, handling CORS issues, clearing caches, and checking code for naming and reference errors, showing I can troubleshoot effectively and understand cloud services and web development.