AWS Classroom Series – 10/Dec/2021 – Direct DevOps from Quality Thought

Static Website Hosting with S3

We can use S3 bucket to host static website (HTML,CSS, JavaScript)
Lets create an S3 bucket with some domain name convention and make the objects of the S3 bucket public
Now lets upload some videos and audio files

We need to create some html files

index.html => home page

<!DOCTYPE html>
<html>
<head>
    <title>QT Static Website Hosting demo</title>
</head>
<body>
    <h1> Music Files </h1>
    <div>
        <audio controls>
            <source src="file_example_MP3_1MG.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <br/>
    <div>
        <audio controls>
            <source src="sample-15s.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <br/>
    <div>
        <audio controls>
            <source src="sample-6s.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <br/>
    <h1> Video Files </h1>
    <div>
        <video width="320" height="240" controls>
            <source src="one.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <br/>
    <div>
        <video width="320" height="240" controls>
            <source src="two.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <br/>
    <div>
        <video width="320" height="240" controls>
            <source src="three.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <br/>
</body>
</html>

error.html => error page

<html>
<head>
    <title>QT Static Website Hosting demo</title>
</head>
<body>
    <h2> Error Occured </h2>
</body>
</html>

The contents of s3 bucket
Now Navigate to properties of s3 bucket and edit the static website hosting
Now access the url from any browser

AWS Cloudfront

This is the AWS Service which can help in creating content delivery networks where your actual content might be in s3 bucket of some region, When we create a cloud fron distribution, the data can be cached across all the Edge/POP locations of AWS
Creating a cloud front distribution for s3 bucket contents
Refer Here for testing the html pages
Now if you do random experiments with the html pages you will find out cloudfront distribution has less latency.