DEV Community

Khaja Sabik Ahmed
Khaja Sabik Ahmed

Posted on

Static Website Hosting with Amazon S3 and CloudFront

#cloudfront #staticwebsitehosting #awshostingsolutions #cloudcomputing

Introduction

Discover how to build a high-performance web hosting architecture with Amazon Web Services (AWS). This guide explores the integration of Amazon EC2, CloudFront, and S3, offering a robust and scalable solution for hosting websites. By using EC2 as the foundation for your static website, CloudFront for global content delivery, and S3 for secure multimedia storage, you'll achieve lightning-fast performance and seamless user experiences.

Image description

Optimize your website for security, scalability, and cost-efficiency with AWS's powerful tools. Enhance global reach, improve content accessibility, and deliver a captivating digital experience that resonates with users worldwide. Unlock the potential of AWS and elevate your web hosting to the next level.
Let's dive in and elevate your web presence to new heights.

Creating an S3 Bucket:

Objective: Create an S3 bucket with unique naming and configure it for hosting video content.

  1. Log in to your AWS Management Console and navigate to the S3 service.
  2. Click on "Create bucket" and enter a unique name for your bucket.
  3. AWS Region in US East (N. Virginia) us-east-1.
  4. Checked the option for "Allow all public access" to restrict public access by default.
  5. Create your bucket.

Architectural Diagram

  1. Upload your video content as S3 bucket objects.
  2. Open the bucket policy and configure specific permissions for website access only. 
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowMyWebsiteAccess",
            "Effect": "Deny",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringNotLike": {
                    "aws:Referer": [
                        "http://your-website-dns-name/",
                        "https://your-website-dns-name/"
                    ]}
            }
        }
Enter fullscreen mode Exit fullscreen mode

Setting Up EC2 Instance:

Objective: Host a static website on an EC2 instance and configure Apache server for content delivery.

  1. Log in to your AWS Management Console.
  2. Navigate to the EC2 dashboard.
  3. Click on "Launch Instance" to start the instance creation wizard.
  4. Choose your desired Amazon Machine Image (AMI), instance type, configuration, and storage options.
  5. Configure security groups to allow SSH (port 22) and HTTP (port 80) access if necessary.

Connect to the Instance:

Retrieve the public IP address or DNS name of your EC2 instance from the EC2 dashboard. Use SSH (Secure Shell) to connect to the instance. Configure Apache to serve content from the /var/www/html directory, which is the default document root.

ssh -i your-key.pem ec2-user@your-instance-public-ip
sudo yum update
sudo yum install -y httpd
sudo systemctl enable httpd
sudo systemctl start httpd
Enter fullscreen mode Exit fullscreen mode

Bucket Configuration

Bucket Configuration

Configure Apache to serve content from the /var/www/html directory, which is the default document root. Then, replace the apache default html file by a static web hosting site where your content is shown.

<!DOCTYPE html>
<html>
    <body style="text-align: center">
        <h1 style="color: green"> AWS S3 Bucket</h1>
             <p>Video on my Webpage</p>
         <video width="500px" height="500px" controls="controls">
        <source src="https://d2tt42f93n1936.cloudfront.net/Disney.mp4" />
       </video>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Image description

Modify Security Group Rules for EC2 Instance:

To enhance security and restrict access to your EC2 instance only to requests originating from CloudFront, you can adjust the inbound and outbound rules of the instance's security group.

  1. Log in to your AWS Management Console and navigate to the VPC dashboard.
  2. Click on "Prefix Lists" under the "Security" section.
  3. Identify the prefix list named amazonaws.global.cloudfront.origin-facing. This prefix list contains the IP ranges used by CloudFront to access your resources.
  4. Note the CIDR ranges listed within the prefix list.

Image description

  1. Now, navigate to the EC2 dashboard and select your EC2 instance.
  2. Click on the security group associated with your EC2 instance to modify its rules.
  3. Adjust the inbound rules to allow traffic on ports 80 (HTTP) and 443 (HTTPS) only from the CIDR ranges specified in the amazonaws.global.cloudfront.origin-facing prefix list. Example inbound rule: Type: HTTP (80) Source: Custom - Add the CIDR ranges from the CloudFront prefix list

Image description
By configuring the security group in this manner, you ensure that only requests originating from CloudFront's IP ranges are allowed access to your EC2 instance on ports 80 and 443. This helps to enhance the security posture of your infrastructure by restricting access to trusted sources.

Configuring CloudFront Distribution:

Objective: Distribute website content globally and enhance performance using CloudFront.

  1. Navigate to the CloudFront service in the AWS Management Console.
  2. Create a CloudFront distribution for your EC2 instance.
  3. Paste your EC2 public DNS in Origin domain, Protocol- HTTP only.
  4. Next, Cache key and origin requests create a cache policy with any name as you wish and rest of the things remain as default.
  5. In Web Application Firewall (WAF), select Do not enable security protections, leave the others things to remain the same.
  6. Hit Create Distribution to obtain the CloudFront distribution URL for your website. Wait couple of minutes to deploying all the thing in the distribution and after completing go to the Distribution domain name link. If you go through the Public EC2 DNS-http://ec2-18-234-1*-1*.compute-1.amazonaws.com/ then you will get an error message “This site can’t reached” Image description

If you use the CloudFront- https://d1ddraxwh8la3b.cloudfront.net link then only it will show you the website. This is the thing we have done in the security group.

Image description

Image description

Conclusion

Amazon Web Services (AWS) empowers you to build seamless, scalable, and secure web hosting architectures that captivate audiences worldwide. By leveraging Amazon EC2 for hosting, Amazon S3 for secure multimedia storage, and Amazon CloudFront for global content delivery, you can ensure fast, reliable, and engaging user experiences.

With AWS’s advanced capabilities in security, scalability, and performance optimization, you're equipped to protect your infrastructure, enhance accessibility, and connect meaningfully with your audience. Whether it's delivering dynamic web pages, engaging videos, or a flawless cloud hosting solution, AWS provides the tools to make your web presence stand out.

Embrace the full potential of AWS cloud hosting and take your digital footprint to the next level. The journey to innovation and excellence starts here—let your website shine and make a lasting global impact. Together, let's continue to innovate, excel, and build extraordinary web experiences.

Top comments (0)