📜Serverless Magic: Build a Daily Quote Generator on AWS (Part 2)

#webdev #cloud #aws #awschallenge

🌐 1. Hosting Frontend on S3

Now that our backend is done, let's deploy our simple HTML/CSS/JS frontend to Amazon S3 to make our Daily Quote Generator accessible to everyone!

Step 1: Prepare Your Website Files

You'll need three simple files for your frontend. Make sure they are in a frontend folder as per our project structure.

Check my repo for links

Step 2: Upload to S3

If you've already created and hosted an S3 bucket in previous blogs, repeat the same:(check my other blogs)
Upload your 3 files to the Objects tab
Make sure Block Public Access is disabled and static hosting is enabled.

Step 3: Configure IAM Bucket Policy for Public Access

Even with "Block Public Access" unchecked, your bucket needs an IAM Bucket Policy to explicitly allow public read access to your website files. This policy acts as an access control list at the bucket level, defining who can access what resources.

In your S3 bucket, go to the "Permissions" tab.
Scroll down to "Bucket policy" and click "Edit".
Paste the following JSON policy. REMEMBER to replace YOUR_BUCKET_NAME with your actual S3 bucket name!

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

Step 3: Accessing our Webapge Live

Copy the URL from properties tab of S3 bucket and paste it in Browser.
Image 1:
Image 2:
Image 3:

📊 2. Monitoring with AWS CloudWatch

Accessing Lambda Logs in CloudWatch
Go to the AWS Lambda Console.
Click on your QuoteFetcherFunction.
Go to the "Monitor" tab.
Click on "View CloudWatch logs". This will take you directly to the log group for your function.