Web application for service-based business
This project simulates the development of a business website hosted on AWS. KōkuaLoop is designed to support the Kūpuna of Hawai‘i by offering a range of services, including courier and concierge support, as well as an Active and Fit program to promote wellness and engagement. The initiative showcases the journey of building KōkuaLoop’s digital presence, with a backend architecture that is scalable, secure, and cloud-native. By leveraging AWS services, the platform is optimized for high availability, reliability, and minimal operational overhead.
Key features include:
- ☁️AWS S3: Hosts the static frontend (HTML/CSS/JS), ensuring fast, globally accessible content delivery.
- 🌐Amazon CloudFront: A global content delivery network (CDN) service designed to speed up the distribution of static and dynamic web content.
- 📍Route 53: Handles DNS routing.
- 🔐Certificate Manager (ACM): Provides SSL certificates for secure HTTPS connections.
Let’s dive in
Architecture Components
We'll reiterate and go dive a bit deeper into our comonents. This implementation leverages four core services to create a robust hosting solution:
- S3: Simple Storage Service (S3) is a cloud object storage service that provides scalable, durable, and secure storage for any amount of data from anywhere on the web. It stores data as objects within buckets, where each object consists of a file and optional metadata, and is uniquely identified by a key.
- CloudFront: Think Content Delivery Network (CDN). CDN's delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. Disney+, Instacart, Slack, Intuit, SuperCell, Marriott, NOAA, and NASA, just to name a few all leverage AWS CloudFront.
- Route 53: A highly available and scalable cloud Domain Name System (DNS) web service provided by Amazon Web Services (AWS). Route 53 offers a comprehensive suite of features beyond basic DNS resolution. It enables users to register and manage domain names directly through AWS. It provides various routing policies to control how traffic is directed, including options for geographic location (geoproximity routing), latency-based routing to minimize response times, and health checks to monitor the status of resources. Route53 gets its name from port 53 which is the port DNS uses.
- Certificate Manager (ACM): a service that simplifies the process of provisioning, managing, and deploying public and private Secure Sockets Layer/Transport Layer Security (SSL/TLS) certificates for use with AWS services and internal resources. It automates the time-consuming manual tasks of purchasing, uploading, and renewing certificates, thereby reducing operational overhead and helping prevent downtime from expired or misconfigured certificates.
Why AWS for Static Website Hosting?
- It is designed for 99.999999999% durability, meaning the likelihood of data loss is extremely low, and it provides high availability through replication across multiple systems
- Global infrastructure with multiple availability zones
- Automatic failover and redundancy built-in scalability
- Auto-scaling CDN handles traffic spikes without configuration
- Global edge locations serve content from closest geographic point
- Versioning support protects against accidental changes
- 99.9% uptime SLA for CloudFront distribution
Step-by-Step Implementation Guide
- Domain Registration and DNS Setup (Route 53)
- Navigate to Route53 console → Click "Registered domains" in left sidebar → You'll be able to check if your domain name is aviable → Purchase domain if avaiable
- Search for Domain → Click "Register domain" → Enter your desired domain name → Check availability and select your domain (The average timeframe to register a domain is minimun 1 year and should cost about $15 for a .com domain)
- Complete Purchase → Fill in contact information → Enable privacy protection → Review and complete purchase → Domain registration can take up to 3 days (personally this takes about 30 min to an hour but depends on your domain).
- Create S3 Bucket for Static Website
- Go to S3 Console → Create bucket (Bucket name must exactly match your domain "kokualoop.com) → Region should default to the region you are working in → Uncheck "Block all public access" → Keep other settigns as default and "Create bucket"
- Configure Static Website Hosting → Select your bucket → Properties tab → Scroll to "Static website hosting" → Click Edit → Enable → Index document: index.html → Save changes
- Set Bucket Policy → Go to Permissions tab → Bucket policy → Add policy below
- We are adding a resource based policy stating allow everyone to get objects from your bucket. We will secure this later when we configure CloudFront
- Now we can upload our index.html file. Make sure files are publicly readable. This file should be your .html landing page, if you want to take it a step further your can add CSS and JS t your page to make it look fancy
- Request SSL Certificate in ACM
- Navigate to AWS Certificate Manager (ACM) → IMPORTANT: Your certificate must exist in the US-EAST-1 Region to use with CloudFront (This is because CloudFront administrative infrastructure is centralized in N. Virginia)
- Click "Request a certificate" → Choose "Request a public certificate" → add 2 domain names "YourDomainName.com" and "www.YourDomainName.com" (this will ensure users are routed to your domain regarless of prefix)
- Choose DNS validation (easier with Route 53) → Click Request
- Validate Certificate → In certificate details, click "Create record in Route 53" → This automatically adds DNS validation records → Wait for validation (usually 5-30 minutes) → Status should change to "Issued"
- Create CloudFront Distribution
- Go to CloudFront Console → Create distribution
- Origin Settings: Origin domain: Select your S3 bucket from dropdown → Origin access: "Origin access control settings (recommended)"
- Create new OAC if prompted. (OAC secures Amazon S3 origins by restricting access so that only designated CloudFront distributions can retrieve objects. Think about OAC as a bouncer at a club. The bouncer allows or rejects cutomers visiting your site.)
- Default Cache Behavior: Viewer protocol policy: "Redirect HTTP to HTTPS" → Set Allowed HTTP methods to "GET, HEAD" →
- Distribution Settings: Alternate domain names (CNAMEs) add YourDomainName.com and www.yYourDomainName.com → Custom SSL certificate: Select the ACM certificate you created → Default root object:
index.html
- Create Distribution: Click "Create distribution" → Wait for deployment (15-20 minutes)
- Update S3 Bucket Policy for CloudFront
- Go back to S3 bucket → Permissions → Bucket policy
- Replace the previous policy with CloudFront OAC policy below (Replace ACCOUNT-ID and DISTRIBUTION-ID with your actual values)
-
{ "Version": "2008-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": "AllowCloudFrontServicePrincipal", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YourDomainName.com/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT-ID:distribution/DISTRIBUTION-ID" } } } ] }
- Configure Route 53 DNS
- Create A Records: Go to Route 53 → Hosted zones → Create record:
- Record name: leave blank (for root domain)
- Record type: A
- Alias: Yes
- Route traffic to: CloudFront distribution
- Select your distribution
- Create another record: → Record name: www → Same setting as above
- Verify DNS Propagation → Wait 5-60 minutes for DNS changes → Test: nslookup YourDomainName.com
- Test Your Website
- Test URLs YourDomainName.com and www.YourDomainName.com → Both should show your website with valid SSL
- Verify SSL: Check for padlock icon in browser, certificate should show as valid
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YourDomainName.com/*" } ] }
Congratulations
Now you should have a highly avaiable, reliable, and scalable website in AWS!
Considerations
- Performance Optimization
- Enable compression in CloudFront: Make files smaller and faster to transport
- Set appropriate cache headers: Control how long files are stored locally.
- Use CloudFront cache behaviors for different file types: Custom caching rules for different kinds of files.
- Troubleshooting
- Certificate validation fails: Check DNS records in Route 53
- 403 errors: Check S3 bucket policy and CloudFront OAC settings
- Domain not resolving: Wait for DNS propagation (up to 48 hours)
- Mixed content errors: Ensure all resources use HTTPS
- Cost
- Domain registration: $12-50+ per year depending on TLD
- S3 storage: ~$0.023 per GB per month
- CloudFront: ~$0.085 per GB for first 10TB
- Route 53 hosted zone: $0.50 per month
- ACM certificate: Free!