Host a Static Website on AWS S3 and Monitor It 24x7 with Dynatrace Synthetic Monitoring

A static website is a site that delivers fixed content to every visitor, built using HTML, CSS, and JavaScript, without any server-side processing or database interaction.

Static Website Key Characteristics

1. Fixed Content: Every visitor sees the same content unless the developer manually updates the files.
2. No Server-Side Logic: Unlike dynamic sites, static websites don’t use server-side languages like PHP or Node.js.
3. No Database: All content is hardcoded into the HTML files—no real-time data fetching.
4. Fast Loading: Since pages are pre-rendered, they load quickly and are ideal for performance-focused projects

What is Synthetic Monitor (please refer link below)

https://www.veerpedia.com/2025/10/dynatrace-synthetic-monitor-migration.html

What is an AWS S3 bucket

An Amazon S3 (Simple Storage Service) bucket is a scalable, secure container used to store and organize data in the cloud. Each bucket holds objects like files, images, or videos, and can be configured with access controls, versioning, and lifecycle rules. 

Note: The real-time use case of S3 buckets is that Amazon Prime Video and Netflix are using Amazon S3 buckets to store and manage vast libraries of video content for their OTT platforms. S3 provides scalable, secure, and high-performance storage that supports their global streaming needs.

Procedure and Steps for Hosting a Static Website on AWS S3

Create the S3 Bucket and Configure Access

Step 1: Create the S3 Bucket

Start by logging into your AWS Management Console. From the search bar, locate S3 (Simple Storage Service) and click Create bucket. Bucket Name: Choose a globally unique name (e.g., ciphersaga). Please refer snapshots below 

💡 Pro Tip: If you're planning to use a custom domain like www.example.com, make sure your bucket name matches it exactly.

Not Mandatory - AWS Region: Select a region close to your target audience to reduce latency and improve load times. This bucket will act as the root container for your website files.

Step 2: Configure Public Access

• By default, S3 buckets block public access for security. Since you're hosting a public website:
• Scroll to Block Public Access settings.
• Uncheck Block all public access.
• Acknowledge the warning checkbox.
• Click Create bucket.

This step ensures your site can be accessed by anyone on the internet.

Upload Website Files and Enable Hosting

Step 3: Upload Website Files

• Once your bucket is created:
• Click the bucket name to open it.
• Navigate to the Objects tab and click Upload.
• Upload your website files: index.html, style.css, images, and optionally error.html.
• Note: Your homepage must be named index.html—this is the default file browsers look for. Please refer snapshot below for a better understanding

Step 4: Enable Static Website Hosting

• Now, let’s turn your bucket into a web host: Go to the Properties tab.
• Scroll to Static website hosting and click Edit.
• Choose Enable and select Host a static website.
• Enter: Index document: index.html
• Error document (optional): error.html
• Click Save changes. Please refer snapshots below

Important: Copy the Endpoint URL shown here. This is your live website link (e.g., http://my-bucket-name.s3-website-region.amazonaws.com).

Grant Public Read Permissions

Even though public access is unblocked, you still need to explicitly allow read permissions for your files.

Step 5: Add a Bucket Policy

• Go to the Permissions tab.
• Scroll to Bucket policy and click Edit.
• Paste the following JSON, replacing YOUR_BUCKET_NAME with your actual bucket name:

Copy below Json Code and paste it in bucket policy

{

    "Version": "2012-10-17",
    "Statement": [
        {

            "Sid": "PublicReadGetObject",

            "Effect": "Allow",

            "Principal": "*",

            "Action": "s3:GetObject",

            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}
      

Create a Synthetic Monitor in Dynatrace for 24x7 Monitoring

This is my Static Website that has been deployed into an AWS S3 bucket, and it is available to access with an endpoint: https://ciphersaga.s3.us-east-1.amazonaws.com/index.html

• Log in to your Dynatrace Environment
• Search for Synthetic or Synthetic Classic
• Create a Browser Clickpath Monitor, which will capture website UI images 
• Once you have created Browser Click Path Monitor, Dynatrace will monitor your static website 24x7 as per your frequency, eg, every 10 minutes, every 15 minutes
• Please refer image below for your understanding

You can see if there are any open issues as shown in the snapshot below.

If you want to know more information on the Synthetic monitor, please refer to the blog post in the You Might Like section. Please let me know if you have any doubts. In will answer in the comment section