Blog 4: Step-by-Step Implementation — Building a Server less Dynamic Image Gallery with AWS Lambda + API Gateway + S3

Introduction

In the previous blog, we discussed how using AWS Lambda and API Gateway can make your image gallery dynamic — automatically updating with new images uploaded to an S3 bucket. Now it’s time to put that theory into action.

In this post, we’ll walk through the complete hands-on implementation — from setting up IAM roles to configuring API Gateway and CORS — so you can deploy your own fully serverless, auto-updating image gallery.

Step 1: Set Up the S3 Bucket

1. Log in to your AWS Management Console and open the S3 service.
2. Click Create bucket and give it a unique name (e.g., college-gallery-images).
3. Choose your region and leave other defaults unless you need specific configurations.
4. Create a folder called /images/ inside the bucket and upload a few sample images organized by date:

/images/2025-08-29/img1.jpg
/images/2025-08-29/img2.jpg
/images/2025-08-30/img1.jpg

5. Go to Permissions → Bucket Policy and ensure your objects can be read:

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

Tip: Keep the bucket public only for demo purposes. For production, use signed URLs or CloudFront for controlled access.

Step 2: Create the Lambda Function

1. Open the Lambda service in AWS Console and click Create function.
2. Choose Author from scratch, name it listGalleryImages, and select Python 3.8 or 3.9 as the runtime.
3. Under Permissions, choose Create a new role with basic Lambda permissions.
4. Once created, add the environment variable:

Key: BUCKET_NAME

Value: college-gallery-images

5. Replace the default Lambda code with the following:

import boto3, os, json

s3 = boto3.client('s3')
BUCKET = os.environ['BUCKET_NAME']

def lambda_handler(event, context):
    date = event.get('queryStringParameters', {}).get('date', '')
    prefix = f"images/{date}/" if date else "images/"
    try:
        response = s3.list_objects_v2(Bucket=BUCKET, Prefix=prefix)
        image_urls = [
            f"https://{BUCKET}.s3.amazonaws.com/{obj['Key']}"
            for obj in response.get('Contents', [])
            if not obj['Key'].endswith('/')
        ]
        return {
            'statusCode': 200,
            'headers': {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            },
            'body': json.dumps({'images': image_urls})
        }
    except Exception as e:
        return {'statusCode': 500, 'body': json.dumps({'error': str(e)})}

6. Click Deploy to save your changes.

Step 3: Assign IAM Permissions to Lambda

Your Lambda function needs permission to access S3. Attach the following policy to its execution role:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:ListBucket"],
      "Resource": ["arn:aws:s3:::college-gallery-images"]
    },
    {
      "Effect": "Allow",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::college-gallery-images/*"]
    }
  ]
}

You can add it directly using the IAM Console → Roles → [Lambda Role] → Add permissions → Inline Policy.

Step 4: Configure API Gateway

1. Open API Gateway and choose Create API → HTTP API.
2. Click Add Integration → Lambda and select your listGalleryImages function.
3. Create a route:

Method: GET
Resource path: /images

• Resource path: /images

1. Deploy your API and note the invoke URL (e.g., [https://abc123.execute-api.us-east-1.amazonaws.com/images).](https://abc123.execute-api.us-east-1.amazonaws.com/images).)
2. Enable CORS for your route:

• Go to CORS settings and allow origins like * or your specific domain.
• Save and redeploy your API.