fix app and add a lambda to list uploaded images

Author: thrau

README.md

@@ -56,7 +56,6 @@ pip install -r requirements-dev.txt
 Start LocalStack Pro with the appropriate CORS configuration for the S3 Website:
 
 ```bash
-export EXTRA_CORS_ALLOWED_ORIGINS=webapp.s3-website.localhost.localstack.cloud:4566
 LOCALSTACK_API_KEY=... localstack start
 ```
 
@@ -96,13 +95,12 @@ awslocal sns subscribe \
     --notification-endpoint my-email@example.com
 ```
 
-`awslocal sns list-topics | jq -r '.Topics[] | select(.TopicArn|test("failed-resize-topic")).TopicArn'`
-
-
 ### Create the lambdas
 
 #### S3 pre-signed POST URL generator
 
+This Lambda is responsible for generating pre-signed POST URLs to upload files to an S3 bucket.
+
 ```bash
 (cd lambdas/presign; rm -f lambda.zip; zip lambda.zip handler.py)
 awslocal lambda create-function \
@@ -111,7 +109,8 @@ awslocal lambda create-function \
     --timeout 10 \
     --zip-file fileb://lambdas/presign/lambda.zip \
     --handler handler.handler \
-    --role arn:aws:iam::000000000000:role/lambda-role
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
 ```
 
 Create the function URL:
@@ -124,6 +123,29 @@ awslocal lambda create-function-url-config \
 
 Copy the `FunctionUrl` from the response, you will need it later to make the app work.
 
+### Image lister lambda
+
+The `list` Lambda is very similar:
+
+```bash
+(cd lambdas/list; rm -f lambda.zip; zip lambda.zip handler.py)
+awslocal lambda create-function \
+    --function-name list \
+    --handler handler.handler \
+    --zip-file fileb://lambdas/list/lambda.zip \
+    --runtime python3.9 \
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
+```
+
+Create the function URL:
+
+```bash
+awslocal lambda create-function-url-config \
+    --function-name list \
+    --auth-type NONE
+```
+
 ### Resizer Lambda
 
 ```bash
@@ -143,7 +165,8 @@ awslocal lambda create-function \
     --zip-file fileb://lambdas/resize/lambda.zip \
     --handler handler.handler \
     --dead-letter-config TargetArn=arn:aws:sns:us-east-1:000000000000:failed-resize-topic \
-    --role arn:aws:iam::000000000000:role/lambda-role
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
 ```
 
 ### Connect the S3 bucket to the resizer lambda
@@ -167,13 +190,24 @@ awslocal s3 website s3://webapp --index-document index.html
 Once deployed, visit http://webapp.s3-website.localhost.localstack.cloud:4566
 
 Paste the Function URL of the presign Lambda you created earlier into the form field.
-If you use LocalStack's v2 Lambda provider then you can also get the URL by running:
 ```bash
 awslocal lambda list-function-url-configs --function-name presign
+awslocal lambda list-function-url-configs --function-name list
 ```
 
 After uploading a file, you can download the resized file from the `localstack-thumbnails-app-resized` bucket.
 
+### Testing failures
+
+If the `resize` Lambda fails, an SNS message is sent to a topic that an SES subscription listens to.
+An email is then sent with the raw failure message.
+In a real scenario you'd probably have another lambda sitting here, but it's just for demo purposes.
+Since there's no real email server involved, you can use the [SES developer endpoint](https://docs.localstack.cloud/user-guide/aws/ses/) to list messages that were sent via SES:
+
+curl -s http://localhost.localstack.cloud:4566/_aws/ses
+
+An alternative is to use a service like MailHog or smtp4dev, and start LocalStack using `SMTP_HOST=host.docker.internal:1025` pointing to the mock SMTP server.
+
 ## Run integration tests
 
 Once all resource are created on LocalStack, you can run the automated integration tests.

bin/deploy.sh

@@ -19,12 +19,27 @@ awslocal lambda create-function \
     --timeout 10 \
     --zip-file fileb://lambdas/presign/lambda.zip \
     --handler handler.handler \
-    --role arn:aws:iam::000000000000:role/lambda-role
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
 
 awslocal lambda create-function-url-config \
     --function-name presign \
     --auth-type NONE
 
+(cd lambdas/list; rm -f lambda.zip; zip lambda.zip handler.py)
+awslocal lambda create-function \
+    --function-name list \
+    --runtime python3.9 \
+    --timeout 10 \
+    --zip-file fileb://lambdas/list/lambda.zip \
+    --handler handler.handler \
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
+
+awslocal lambda create-function-url-config \
+    --function-name list \
+    --auth-type NONE
+
 (
     cd lambdas/resize
     rm -rf package lambda.zip
@@ -41,7 +56,8 @@ awslocal lambda create-function \
     --zip-file fileb://lambdas/resize/lambda.zip \
     --handler handler.handler \
     --dead-letter-config TargetArn=arn:aws:sns:us-east-1:000000000000:failed-resize-topic \
-    --role arn:aws:iam::000000000000:role/lambda-role
+    --role arn:aws:iam::000000000000:role/lambda-role \
+    --environment Variables="{STAGE=local}"
 
 awslocal s3api put-bucket-notification-configuration \
     --bucket localstack-thumbnails-app-images \

lambdas/list/handler.py

@@ -0,0 +1,68 @@
+import os
+import typing
+
+import boto3
+
+if typing.TYPE_CHECKING:
+    from mypy_boto3_s3 import S3Client
+    from mypy_boto3_ssm import SSMClient
+
+# used to make sure that S3 generates pre-signed URLs that have the localstack URL in them
+endpoint_url = None
+if os.getenv("STAGE") == "local":
+    endpoint_url = "https://localhost.localstack.cloud:4566"
+
+s3: "S3Client" = boto3.client("s3", endpoint_url=endpoint_url)
+ssm: "SSMClient" = boto3.client("ssm", endpoint_url=endpoint_url)
+
+
+def get_bucket_name_images() -> str:
+    parameter = ssm.get_parameter(Name="/localstack-thumbnail-app/buckets/images")
+    return parameter["Parameter"]["Value"]
+
+
+def get_bucket_name_resized() -> str:
+    parameter = ssm.get_parameter(Name="/localstack-thumbnail-app/buckets/resized")
+    return parameter["Parameter"]["Value"]
+
+
+def handler(event, context):
+    images_bucket = get_bucket_name_images()
+    images = s3.list_objects(Bucket=images_bucket)
+
+    result = {}
+    # collect the original images
+    for obj in images["Contents"]:
+        result[obj["Key"]] = {
+            "Name": obj["Key"],
+            "Timestamp": obj["LastModified"].isoformat(),
+            "Original": {
+                "Size": obj["Size"],
+                "URL": s3.generate_presigned_url(
+                    ClientMethod="get_object",
+                    Params={"Bucket": images_bucket, "Key": obj["Key"]},
+                    ExpiresIn=3600,
+                ),
+            },
+        }
+
+    # collect the associated resized images
+    resized_bucket = get_bucket_name_resized()
+    images = s3.list_objects(Bucket=resized_bucket)
+    for obj in images["Contents"]:
+        if obj["Key"] not in result:
+            continue
+        result[obj["Key"]]["Resized"] = {
+            "Size": obj["Size"],
+            "URL": s3.generate_presigned_url(
+                ClientMethod="get_object",
+                Params={"Bucket": resized_bucket, "Key": obj["Key"]},
+                ExpiresIn=3600,
+            ),
+        }
+
+    return list(sorted(result.values(), key=lambda k: k["Timestamp"], reverse=True))
+
+
+if __name__ == "__main__":
+    print(handler(None, None))

lambdas/presign/handler.py

@@ -1,4 +1,5 @@
 import json
+import os
 import typing
 
 import boto3
@@ -8,8 +9,13 @@
     from mypy_boto3_s3 import S3Client
     from mypy_boto3_ssm import SSMClient
 
-s3: "S3Client" = boto3.client("s3")
-ssm: "SSMClient" = boto3.client("ssm")
+# used to make sure that S3 generates pre-signed URLs that have the localstack URL in them
+endpoint_url = None
+if os.getenv("STAGE") == "local":
+    endpoint_url = "https://localhost.localstack.cloud:4566"
+
+s3: "S3Client" = boto3.client("s3", endpoint_url=endpoint_url)
+ssm: "SSMClient" = boto3.client("ssm", endpoint_url=endpoint_url)
 
 
 def get_bucket_name() -> str:

lambdas/resize/handler.py

@@ -1,4 +1,5 @@
 # adapted from https://docs.aws.amazon.com/lambda/latest/dg/with-s3-tutorial.html
+import os
 import typing
 import uuid
 from urllib.parse import unquote_plus
@@ -10,8 +11,15 @@
     from mypy_boto3_s3 import S3Client
     from mypy_boto3_ssm import SSMClient
 
-s3: "S3Client" = boto3.client("s3")
-ssm: "SSMClient" = boto3.client("ssm")
+MAX_DIMENSIONS = 400, 400
+"""The max width and height to scale the image to."""
+
+endpoint_url = None
+if os.getenv("STAGE") == "local":
+    endpoint_url = "https://localhost.localstack.cloud:4566"
+
+s3: "S3Client" = boto3.client("s3", endpoint_url=endpoint_url)
+ssm: "SSMClient" = boto3.client("ssm", endpoint_url=endpoint_url)
 
 
 def get_bucket_name() -> str:
@@ -21,7 +29,16 @@ def get_bucket_name() -> str:
 
 def resize_image(image_path, resized_path):
     with Image.open(image_path) as image:
-        image.thumbnail(tuple(int(x / 2) for x in image.size))
+        # Calculate the thumbnail size
+        width, height = image.size
+        max_width, max_height = MAX_DIMENSIONS
+        if width > max_width or height > max_height:
+            ratio = max(width / max_width, height / max_height)
+            width = int(width / ratio)
+            height = int(height / ratio)
+        size = width, height
+        # Generate the resized image
+        image.thumbnail(size)
         image.save(resized_path)
 
 

tests/nyan-cat.png

@@ -10,6 +10,10 @@
     from mypy_boto3_s3 import S3Client
     from mypy_boto3_ssm import SSMClient
 
+os.environ["AWS_DEFAULT_REGION"] = "us-east-1"
+os.environ["AWS_ACCESS_KEY_ID"] = "test"
+os.environ["AWS_SECRET_ACCESS_KEY"] = "test"
+
 s3: "S3Client" = boto3.client(
     "s3", endpoint_url="http://localhost.localstack.cloud:4566"
 )

tests/test_integration.py

@@ -1,4 +1,43 @@
 (function ($) {
+    let functionUrlPresign = localStorage.getItem("functionUrlPresign");
+    if (functionUrlPresign) {
+        $("#functionUrlPresign").val(functionUrlPresign);
+    }
+
+    let functionUrlList = localStorage.getItem("functionUrlList");
+    if (functionUrlList) {
+        console.log("function url list is", functionUrlList);
+        $("#functionUrlList").val(functionUrlList);
+    }
+
+    let imageItemTemplate = Handlebars.compile($("#image-item-template").html());
+
+    $("#configForm").submit(function (event) {
+        if (event.preventDefault)
+            event.preventDefault();
+        else
+            event.returnValue = false;
+
+        event.preventDefault();
+
+        let action = $(this).find("button[type=submit]:focus").attr('name');
+
+        if (action == "save") {
+            localStorage.setItem("functionUrlPresign", $("#functionUrlPresign").val());
+            localStorage.setItem("functionUrlList", $("#functionUrlList").val());
+            alert("Configuration saved");
+        } else if (action == "clear") {
+            localStorage.removeItem("functionUrlPresign");
+            localStorage.removeItem("functionUrlList");
+            $("#functionUrlPresign").val("")
+            $("#functionUrlList").val("")
+            alert("Configuration cleared");
+        } else {
+            alert("Unknown action");
+        }
+
+    });
+
     $("#uploadForm").submit(function (event) {
         $("#uploadForm button").addClass('disabled');
 
@@ -10,12 +49,12 @@
         event.preventDefault();
 
         let fileName = $("#customFile").val().replace(/C:\\fakepath\\/i, '');
-        let presignerUrl = $("#presignerUrl").val();
+        let functionUrlPresign = $("#functionUrlPresign").val();
 
         // modify the original form
-        console.log(fileName, presignerUrl);
+        console.log(fileName, functionUrlPresign);
 
-        let urlToCall = presignerUrl + "/" + fileName
+        let urlToCall = functionUrlPresign + "/" + fileName
         console.log(urlToCall);
 
         let form = this;
@@ -43,8 +82,9 @@
                     contentType: false,
                     success: function () {
                         alert("success!");
+                        updateImageList();
                     },
-                    error: function() {
+                    error: function () {
                         alert("error! check the logs");
                     },
                     complete: function (event) {
@@ -60,4 +100,37 @@
             }
         });
     });
+
+    function updateImageList() {
+        let listUrl = $("#functionUrlList").val();
+        if (!listUrl) {
+            alert("Please set the function URL of the list Lambda");
+            return
+        }
+
+        $.ajax({
+            url: listUrl,
+            success: function (response) {
+                $('#imagesContainer').empty(); // Empty imagesContainer
+                response.forEach(function (item) {
+                    console.log(item);
+                    let cardHtml = imageItemTemplate(item);
+                    $("#imagesContainer").append(cardHtml);
+                });
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                console.log("Error:", textStatus, errorThrown);
+                alert("error! check the logs");
+            }
+        });
+    }
+
+    $("#updateImageListButton").click(function (event) {
+        updateImageList();
+    });
+
+    if (functionUrlList) {
+        updateImageList();
+    }
+
 })(jQuery);