Hello Cloud Enthusiasts!
In my last article, I covered hosting static websites on AWS with S3. However, the long and insecure bucket website endpoint can be a hassle. In this article, I'll show you how to enhance your setup using S3, CloudFront, Route53, and ACM. Get ready for a secure, fast, and globally available website with a custom domain and minimal latency.
Benefits of using cloudfront,route53,
Hosting a static website using Amazon S3, CloudFront, Route 53, and ACM offers a range of benefits. Firstly, Amazon S3 ensures scalability and high availability with its vast storage capacity and reliable infrastructure. CloudFront's global content delivery network (CDN) reduces latency and improves user experience by caching content at edge locations worldwide.
Cost-effectiveness is another advantage, as you only pay for the resources you use with Amazon S3's pay-as-you-go pricing model. Security is ensured through ACM's provision of SSL/TLS certificates for HTTPS communication, enhancing trust and data protection.
Performance is Optimized with CloudFront's CDN, which accelerates content delivery by serving cached content from edge locations. Route 53 simplifies DNS management and seamlessly integrates with other AWS services, streamlining deployment and management processes.
In summary, this combination of AWS services provides a reliable, scalable, and cost-effective solution for hosting static websites with enhanced security, performance, and simplified management.
Exploration of AWS Services Employed in Operations
1 Amazon S3: Amazon S3(simple storage service) is a virtual storage unit provided by Amazon, allowing users to easily store and organize digital files in 'buckets' and 'objects.' Files can be uploaded and accessed from anywhere with an internet connection. S3 ensures reliability by storing data in multiple locations and offers optional encryption for added security. In essence, it's a simple, reliable, and convenient solution for storing and accessing digital files.
2 CloudFront: Amazon CloudFront is a content delivery network (CDN) service by AWS that speeds up the delivery of web content to users globally. It stores content in multiple edge locations worldwide, reducing latency and improving performance. CloudFront also offers security features like custom SSL certificates and DDoS protection, enhancing reliability and security for websites.
3 Route53: Route 53 is a scalable and highly available Domain Name System (DNS) web service provided by Amazon Web Services (AWS). Route 53 also domain registration services and advanced routing features, such as health checks, latency-based routing, and traffic flow management, to ensure reliable and fast delivery of web content. In essence, it acts as the traffic cop of the internet, directing users to the correct destination with speed and precision.
4 Amazon Certificate Manager (ACM): ACM is like a digital bouncer that ensures your website or app talks securely with users. It hands out special certificates that encrypt data as it travels between them, keeping everything safe and private. Plus, it takes care of renewing these certificates automatically, so you don't have to worry about security lapses. It's like having a friendly security guard for your online space, making sure everything stays safe and sound.
Unlock the Secrets to Hosting Your Website: Secure, Reliable, and Lightning-Fast - Follow These Simple Steps!
1 Set Up an S3 Bucket for Hosting
Search for the S3 service on the AWS console.
On the S3 dashboard, click “create bucket”
Choose a One-of-a-Kind Name for Your Bucket: Remember, S3 Bucket Names Must Be Globally Unique. Next, Pick the Region Where You Want Your Bucket Hosted.
Scroll Down and Click on 'ACLs (Access Control Lists) Enabled': This Option Allows You to Define Access to the Bucket Using Access Control Lists."
At the Moment, Make Sure to Disable 'Block all Public Access'. This Setting Enables Access to Your Bucket's Contents by the Public.
Kindly Note that I've unchecked this option temporarily for testing purposes, to ensure our website can be accessed when hosted on S3. However, we'll promptly re-enable it once we confirm functionality. Leaving 'Block all public access' unchecked exposes our website content and data to potential hackers and malicious entities, making it insecure. Leave all other settings at their defaults and proceed by clicking 'Create Bucket'.
Now, click on the bucket name from the list of buckets and click upload.
Next, click on 'Add Files' or 'Add Folders' to upload the HTML, CSS, and JavaScript files of your website.
After you've finished adding your website files and folders, simply click 'Upload.
Configure S3 Bucket Permissions for Website Access: Navigate to the Permissions tab in your S3 bucket, click on 'Edit Permissions', and paste the following JSON configuration:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::396529431040:distribution/E2TM1KE84PM7EN"
}
}
}
]
}
**JSON stands for JavaScript Object Notation, and it's a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In the context of configuring permissions for an S3 bucket, JSON configuration refers to a set of rules or policies written in JSON format that specify who can access the contents of the bucket and what actions they are allowed to perform.
For example, a JSON configuration for S3 bucket permissions might specify that certain users or groups are allowed to read objects from the bucket but not delete them, while other users or groups have full control over all objects in the bucket.
**
This policy authorizes CloudFront to distribute objects (website contents) from the specified S3 bucket (Resource: arn:aws:s3:::YOUR_BUCKET_NAME/*) to edge locations. Replace 'YOUR_BUCKET_NAME' in the configuration with your actual bucket name and save the changes.
Next, navigate to the 'Properties' tab, scroll down to 'Static Hosting', and click to enable it. By default, it is disabled. Under 'Index Document', specify the index document of your website (e.g., index.html). Optionally, if your website has an error page (e.g., a 404 error page), you can enter it under 'Error Document - Optional'."
Congratulations! Your website has been successfully hosted on S3. To access it, scroll down and find the 'Bucket website endpoint.' Copy this endpoint and paste it into your web browser to gain full access to our website.
If you scroll to the triangle icon next to the website endpoint URL, you'll notice that it's not secured. To enhance security, we'll use CloudFront to securely serve website contents to users and ACM to add an extra layer of security using TLS (Transport Layer Security) certificates.
Next, click on the 'Permission' tab and check the 'Block all public access' option. Save your changes, and then proceed with the steps below.
2 Set Up Route 53 for DNS Management
Before configuring Route53 for DNS management, you'll need to purchase a custom domain name from a domain registrar. You can buy a domain name from popular registrars like Namecheap or GoDaddy.
Next, navigate to the AWS Console and search for Route 53. Click on Route 53, then select 'Hosted Zones' and proceed to create a new hosted zone.
Next, enter the name of the custom domain you purchased from Namecheap or GoDaddy. After that, scroll down and click on 'Create Hosted Zone'.
f you navigate to your domain name under 'Hosted Zone Names' and scroll down to the 'Records' tab, you'll find two records listed: NS (Name Server) and SOA (Start of Authority).
After copying the NS (Name Servers) records, go to your domain registrar (such as Namecheap or GoDaddy). In the Domain List, locate your domain name, click on 'Manage', and then paste the NS records copied under 'Custom DNS'. Accept the changes and proceed to the next step.
3 Create a SSL/TLS Certificate for CloudFront
In the AWS console, search for 'AWS Certificate Manager' (ACM), then click on 'Certificate Manager.
Once in ACM, select 'Request a certificate'. Enter your custom domain name (e.g., tomihub.com) in the provided field. Choose DNS validation as the preferred method, then proceed by clicking on 'Request'
Click on 'View Certificate', then select the certificate ID and click on 'Create records in Route 53'. After that, click on 'Create records' and wait for the status to change from 'pending validation' to 'issued'."
Go back to Route53, refresh the page, you should see a new CNAME record and you are done with ACM.
4 Set Up CloudFront Distributions for Website Delivery"
In the AWS console, navigate to CloudFront. On the CloudFront dashboard, click on 'Create Distribution', then select your S3 origin domain in the 'Origin Domain' field.
Under Origin Access, choose 'Origin Access Identity (recommended)'. Select the S3 bucket under Origin Access Identity. Click 'Copy Policy'; you will need to update the S3 bucket policy using the copied policy.
Scroll down and ensure the viewer protocol policy is set to 'HTTP and HTTPS'. For allowed HTTP methods, choose 'GET' and 'HEAD'. For Cache Key and Origin Requests, select 'Cache policy and origin request policy (recommended)'. Under Origin Request Policy (Optional), choose 'AllViewer'."
. Navigate to your S3 bucket, replace the bucket policy with the policy copied during Cloudfront configuration.
. To securely access your website, navigate back to CloudFront. Go to the 'General' section of your distribution dashboard and copy the CloudFront 'Distribution domain name.' Then, paste it into your web browser.
The 'Distribution domain name' provided by CloudFront may be too long and difficult for clients or users to remember. This leads us to the final step: *'Configuring Route 53 for DNS Management'."
*
5 Configuring Route53 for DNS Management
To create a record in the Route 53 dashboard, navigate to the hosted zone, find your domain name, and then click on 'Create Record'.
To enable the alias option, select the record type, choose your CloudFront 'Distribution domain name' in the 'Route traffic to' field, select the simple routing policy, and finally, click on 'Create Records'.
After creating your records, click on “View status” to determine when your domain name is ready for use in accessing your website.
If the status shows as 'INSYNC', it means you can now access your website using your custom domain.
Type your custom domain into your browser to access your website, now fully secured, fast, and reliable.
Congratulations on successfully hosting your static website on AWS in just 5 steps!
Amazon S3, CloudFront, ACM, and Route53 together provide a powerful solution for Hosting, Caching, and DNS management, ensuring a reliable and cost-effective hosting experience on AWS.
Thank you for following this guide until the end, and here’s to many more successful hosting endeavors!
Cheers!
Top comments (0)