Day 2: Designing the AWS Architecture for Migration

Recap of Day 1

In our first post, we introduced the migration plan for the LimitlessAO Power Solutions Website to AWS. We explored why AWS is the ideal platform for this project, emphasizing scalability, cost optimization, and security. Today, we will design the architecture that will guide the entire migration process, using AWS services like S3, CloudFront, Route 53, and ACM. Additionally, we’ll provide step-by-step instructions to create the architecture diagram using draw.io or Lucidchart, making this process easy to follow and replicate.

AWS Architecture Design Overview

Migrating the LimitlessAO Power Solutions Website requires a carefully designed architecture that ensures scalability, reliability, and security. The diagram above illustrates the architecture we will implement, which consists of several AWS services working together to host and deliver the website.

"In the cloud, simplicity today paves the way for scalability tomorrow."

Here's a breakdown of the components and their roles:

S3 Bucket (Simple Storage Service)
The website's static files (HTML, CSS, JavaScript, images) will be stored in a private S3 bucket. This ensures cost-effective and secure storage. Access to these files will be managed using an Origin Access Control (OAC), restricting public access and allowing only the CloudFront distribution to fetch content.

CloudFront (Content Delivery Network)
CloudFront is used to deliver website content globally with low latency. It works by caching the website files in AWS edge locations around the world. CloudFront is configured to use an SSL/TLS certificate for secure HTTPS communication, which will be issued through AWS Certificate Manager (ACM).

AWS Certificate Manager (ACM)
ACM provides the SSL/TLS certificate used by CloudFront to encrypt data between the client and the server. This ensures that all communication is secure and adheres to HTTPS protocols.

Route 53 (DNS Service)
Route 53 will handle DNS management, directing users' requests to the CloudFront distribution. This service ensures high availability and reliable routing of traffic to the website.

CloudFront Function
A CloudFront Function is configured to redirect all HTTP traffic to HTTPS and ensure users accessing "www" are redirected to the root domain (e.g., redirecting www.example.com to example.com). This helps maintain a consistent user experience.

Step-by-Step Guide to Creating the Architecture Diagram

Step 1: Choose Your Tool (draw.io or Lucidchart)
Visit diagrams.net for a free, browser-based diagramming tool. Alternatively, use Lucidchart for a more collaborative, professional experience (free trial available).

Step 2: Set Up the Canvas
Open your chosen tool and create a new blank diagram.
Set the diagram type to AWS Architecture (both tools offer AWS icons).

Step 3: Add Key Components
Drag and drop the following icons from the AWS library:

• S3 bucket: Representing static website storage.
• CloudFront: As the CDN layer.
• Route 53: For DNS routing.
• ACM (SSL/TLS Certificate): For HTTPS encryption.
• Client/User: Representing the end-user accessing the website.
• CloudFront Function: For domain and protocol redirection.

Step 4: Connect Components
Use arrows to define relationships:

• Connect Client to Route 53, showing DNS lookup.
• Link Route 53 to CloudFront, representing domain resolution and content delivery.
• Attach CloudFront to S3, highlighting the origin for website content.
• Add a connection between CloudFront and ACM, illustrating HTTPS encryption.
• Include a feedback loop from CloudFront to CloudFront Function, showing viewer requests for redirection.

Step 5: Label the Connections
Add annotations for each arrow to explain the interactions, such as “DNS Lookup,” “Viewer Request,” or “Content Fetch.”

Step 6: Add Final Touches
Use text labels to identify each service clearly.
Adjust alignment and spacing to ensure the diagram is neat and professional.

How This Architecture Works

Once implemented, this architecture enables secure, reliable, and efficient website hosting

• Users access the website via a custom domain managed in Route 53.
• Route 53 directs traffic to CloudFront, which delivers cached content globally.
• CloudFront retrieves website files securely from S3 via OAC.
• ACM ensures all connections are encrypted with HTTPS.
• The CloudFront Function handles domain redirection (e.g., from “www” to the root domain) and enforces HTTPS.

"A well-designed solution solves today's needs while staying ready for tomorrow's possibilities."

What’s Next?

For Day 3, we’ll set up the AWS environment, including creating an account, configuring IAM roles for security, and preparing S3 for hosting the website files. Make sure to stay tuned as we move closer to making this architecture a reality!

Stay tuned!
LimitlessAO