DEV Community: Yafet Getahun

Easily Host Your Static Website on Amazon S3 for Free

Yafet Getahun — Sat, 11 Nov 2023 06:40:14 +0000

I recently hosted my first static website on Amazon S3 and was pleasantly surprised to find that it is completely free if you sign up for an AWS account. The free tier for the first 12 months offers up to 5GB of storage, and even beyond that, the costs are minimal. In this blog post, I will guide you through the simple steps to set up a static website on Amazon S3.

For more information on the amazon free tier I have attached the link here

Step 1: Create an AWS Account

To get started, you'll need to have an AWS account. Once you've signed up, access the AWS Management Console and navigate to the Storage section. Click on Amazon S3 to proceed.

Step 2: Create a Bucket

On the Amazon S3 page, you will see an orange button that says "Create Bucket." Click on it to create a new bucket.

Choose a unique name for your bucket, as it needs to be globally unique. If the name is already taken, you will need to select a different one.

Step 3: Enable Public Access

In the bucket settings page, scroll down until you find the "Block all public access (bucket setting)" section. It is essential to uncheck the "Block all public access" option to ensure that your static website is accessible. If you leave that option checked, all public access to the bucket will be blocked, including access to the static website files. By unchecking the option, you give permissions to allow public access to your S3 bucket. You can then configure the bucket to enable static website hosting and set up the required permissions and policies to allow users to access and view your website's content.

Step 4: Configure Static Website Hosting

Now, leave the rest of the settings as they are and click on "Create Bucket" to complete the process. After successfully creating the bucket, click on "Properties" and scroll down to the bottom of the page.

Locate the "Static Website Hosting" section and click on "Edit" to enable it.

In the "Index document" field, enter "index.html," and in the "Error document" field, enter "error.html." Save the changes.

Step 5: Obtain the Website Endpoint

Return to the "Properties" section and scroll down to the "Static Web Hosting" section. Copy the endpoint provided, which represents the URL for your static website.

But after you open it in a new tab you will see the page saying access is denied so that needs to be updated. So return to your console and under the bucket you created click on permission.

In the permission page scroll down and you will see bucket policy. The use of a bucket policy when hosting a static website on Amazon S3 (Simple Storage Service) is to grant public access permissions to the bucket and its objects. By default, S3 buckets are private, meaning only the bucket owner has access to the bucket and its contents.

To host a static website on S3, you need to make the objects within the bucket publicly accessible. Instead of manually changing permissions for each object, you can use a bucket policy to define the access permissions at the bucket level. The bucket policy allows you to specify who can access the bucket and what actions they can perform.

On the bucket policy click on edit.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

Use this code for your bucket policy. This policy allows anyone (represented by the wildcard "") to perform a "GetObject" action, which grants read access, on any object within the bucket. The "Resource" field specifies the ARN (Amazon Resource Name) of the objects in your bucket. This allows everyone to read/view everything in the bucket. Be sure to update the *Bucket-Name** (enter the the globally unique bucket name you used in step two). After you paste this json code scroll down and click on save changes.
For more information on bucket policy you can check out this link

Step 6: Upload Your HTML Files

Your S3 bucket is now ready to host your static website. Upload your HTML files to the bucket using the appropriate file upload option. Navigate back to Object and you will find the upload option there.

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Index Page</title>
  </head>
  <body>
    <h1>Welcome to My Simple Index Page</h1>
    <p>This is a basic HTML file that serves as an index page for a website.</p>
  </body>
</html>

You can create your first static website using the provided sample HTML. Simply copy and paste the HTML code into your notepad and save it as "index.html". Afterward, you can upload it to an S3 server to host your website. Remember, this is just an example, and feel free to use your own HTML code to experiment. Follow these steps to get started with your first static website. Feel free to customize the HTML code or use your own HTML files. Remember, you can also upload CSS files, images, and videos to enhance your website hosted on Amazon S3.
If you want to learn the basics of HTML, you can check the link I provided to gain a basic understanding. click here

Step 7: Access Your Static Website

Please return to the previously opened tab that showed "access denied" and reload it once more. Your static website should now be up and running, displaying the content you uploaded to the S3 bucket.

Conclusion:

Hosting a static website on Amazon S3 is a cost-effective and straightforward solution. With a few easy steps, you can create your S3 bucket, configure the necessary settings, and start hosting your website. The free tier offered by Amazon S3 allows you to take advantage of the flexibility and scalability of cloud storage without incurring any expenses. Not only does this enable individuals to showcase their personal projects or portfolios, but it also empowers businesses to establish a professional online presence without the burden of significant hosting costs. Moreover, with the secure and reliable infrastructure of Amazon S3, website owners can ensure constant availability and seamless user experiences. Therefore, by leveraging the benefits of hosting static websites on S3, individuals and organizations can effectively harness the power of the cloud to publish and share their online content without breaking the bank. So, take advantage of this opportunity and enjoy the benefits of hosting your static website on Amazon S3 for free.

Architectural Design for an E-Commerce Portal in Africa on AWS

Yafet Getahun — Sun, 05 Nov 2023 12:32:18 +0000

The case I am trying to solve is as follows: An e-commerce business has contacted you to draw up an architectural design for their new portal for their customers in Africa. They want to ensure their application has a very low-latency and can also store their user relational information securely and also able to be retrieved fast. The portal is expected to store some pictures for products. The business also wants to ensure their application is fault tolerant and highly available. Although they are low on budget, they also want to ensure their application is highly secured both at rest and in transit, and from unauthorized access. You should also factor in monitoring and logging of your application.

For an ecommerce business that has a customer in Africa, I would recommend using the AWS Africa (Cape Town) region to minimize latency. Latency is the delay in the transmission of data, and lower latency means faster response time for the application. This can greatly improve the user experience, especially because an ecommerce business will use some financial transaction. So the closer the AWS region is to the customers, the lower the network latency. To ensure fault tolerance and high availability, I suggest setting up a Virtual Private Cloud (VPC) within that region, utilizing multiple availability zones. In this case, I have used two availability zones in the region. A virtual private cloud allows you to have complete control over the network configuration. You can define your own IP address range, subnets, routing tables, and network gateways, which enables you to design the network infrastructure specifically tailored to your e-commerce solution's requirement. Hosting an e-commerce solution involves handling sensitive customer data such as payment information, personal details, and order history. By setting up VPC, the e-commerce infrastructure can be isolated from other networks and be protected from potential security breaches and attacks.

Within availability zones, I would create private and public subnets. The private subnet would contain an Amazon Elastic Compute Cloud (EC2)instance to host the portal application. To enhance security, I assigned a security group to this instance, acting as a virtual firewall. Only traffic allowed by the security group rules will reach the instance.

To enable instances in the private subnet to send outbound traffic to the internet while preventing incoming connections from the internet, I employed a NAT Gateway in the public subnet. This NAT Gateway connects with the route table and the Application Load Balancer to improve the scalability and availability of the portal.

To handle fluctuations in traffic demand, I utilized Amazon EC2 Auto Scaling at no additional cost. This allows the EC2 instance to scale up or down based on traffic demand. This can insure that the e-commerce application becomes available, even during high traffic periods or sudden spikes in demand. The auto scaling group will automatically add more EC2 instances to handle the increased load and remove them when the demand decreases. This helps prevent overloading of resources and ensures a seamless shopping experience for customers. The EC2 instance is connected to the load balancer.

To enable internet access, I integrated an Internet Gateway (IG) into the architecture. I chose Amazon Aurora MySQL as the storage solution for the e-commerce portal's relational data due to its fully managed service. Additionally, I utilized Amazon Simple Storage Service (S3) to store product images and other static content. To ensure disaster recovery, I replicated the content stored in S3.

To improve portal performance, I employed Amazon CloudFront, a global Content Delivery Network (CDN), to cache and deliver images and static content close to the African users. This results in faster load times for products pages, images, and other assets leading to a better experience and increased customer satisfaction. Aiming for high security both at rest and in transit, I utilized AWS Key Management Service (KMS) for encryption. I also implemented AWS Web Application Firewall (WAF) to protect the application against common web exploits and security threats.

For monitoring and logging purposes, I relied on Amazon CloudWatch to monitor system performance and set up alarms for specific metrics. Cloudwatch collects and analyzes logs, providing businesses with insights on system level events, issues and errors. This helps identify and troubleshoot any problems in the e-commerce infrastructure quickly, ensuring smooth operations and minimizing downtime. Additionally, I used AWS CloudTrail to record API calls and track user activity for auditing and compliance reasons. This helps in detecting and investigating any unauthorized access attempts, potential security breaches, or suspicious activities related to the e-commerce infrastructure. It provides detailed information about the API calls, including the source IP address, identity of the caller, and time of the request, helping to enhance security measures.

To optimize costs, I recommend utilizing Reserved instances as they provide significant discounts over on-demand pricing. By committing to a one or three year term, the business can save up to 75% on the EC2 compute cost.

AWS offers a wide range of services and features, each with its own pricing structure. So what I would recommend is using the AWS price calculator, as the business effectively plan and budget the cost it encounters. It can help estimate the expenses associated with the different services and features, allowing to allocate resources accordingly and avoid unexpected overages.