Post-processing

The final Lambda function in the photo processing pipeline is triggered when the final image is rendered and saved into the S3 finalbucket. It will save the photo object information into the DynamoDB table and send a message to the IoT topic so the frontend application is notified.

Inside this section

You will build this Lambda function in the console to complete the final step of the photo processing workflow.

After you will test with the sample image, and then perform a test from the frontend application with your own photo.

Creating the Lambda function

  1. Create a function that:
  • theme-park-photos-postprocess for Function name
  • Node.js 14.x as Runtime.
  • Choose the Existing role as the one that is beginning with theme-park-backend-ThemeParkLambdaRole*.
  1. + Add S3 as a trigger:
  • Select the bucket name beginning with theme-park-backend-finalbucket.
  • For Event Type select All object create events.
  • Check the Recursive invocation acknowledgement, and select Add.

  1. Back in the Lambda function page, select the Code tab to view the Code source card.

  2. Go back to your browser tab with Cloud9 running. If you need to re-launch Cloud9, from the AWS Management Console, select Services then select Cloud9 under Developer Tools. Make sure your region is correct.

Copy the code from 3-postprocess/app.js onto the clipboard and paste into the index.js tab in the Lambda function, overwriting the existing content:

  1. Select Deploy in the Function Code panel to save the changes and deploy the function.

Adding environment variables

This function uses two environment variables:

  • IOT_DATA_ENDPOINT: the IoT endpoint hostname.
  • DDB_TABLE_NAME: the DynamoDB table name used by the application.

In this section, you will retrieve and configure these Environment Variables for the function.

Step-by-step instructions

  1. Go back to your browser tab with Cloud9 running. If you need to re-launch Cloud9, from the AWS Management Console, select Services then select Cloud9 under Developer Tools. Make sure your region is correct.

  2. In the terminal enter the following command to retrieve the value for IOT_DATA_ENDPOINT:

aws iot describe-endpoint --endpoint-type iot:Data-ATS
  1. Next, enter the following command to retrieve the value for DDB_TABLE_NAME:
aws dynamodb list-tables | grep backend

  1. Go back to the browser tab with the theme-park-photos-postprocess Lambda function open. Select the Configuration tab, then select Environment variables from the menu. Choose Edit.

  2. Enter the two environment variables names along with the values you retrieved in Cloud9 (without quotes):

Module 2 - Environment vars

  1. Choose Save to save these changes.

Update the frontend

In this section, you will update the frontend with the API endpoint where it can request photo uploads. You will then commit the change to CodeCommit, which will cause the frontend to be republished.

Step-by-step instructions

  1. Go back to your browser tab with Cloud9 running. If you need to re-launch Cloud9, from the AWS Management Console, select Services then select Cloud9 under Developer Tools. Make sure your region is correct.

  2. In the terminal, run this command to show the uploads API from when the backend was deployed in module 1:

aws cloudformation describe-stacks --stack-name theme-park-backend --query "Stacks[0].Outputs[?OutputKey=='UploadApi'].OutputValue" --output text
  1. Copy the output URL to the clipboard:

Module 3 - Output

  1. In the Cloud9 terminal, in the left directory panel navigate to theme-park-frontend/src.

  2. Locate the config.js file and double-click to open in the editor.

This file contains a JSON configuration for the frontend. The file is separated into modules that correspond with the modules in this workshop.

  1. In the MODULE 3 section, between the single quote marks '', update the photoUploadURL with the API Endpoint URL in the clipboard.

  2. Save the file.

Module 3 - Output

Push to CodeCommit and deploy via Amplify

  1. In the Cloud9 terminal, change to the front-end directory with the following command:
cd ~/environment/theme-park-frontend/
  1. Commit to CodeCommit by executing the following commands:
git commit -am "Module 3 - Photo compositing"
git push

  1. After the commit is completed, go to the Amplify Console.

  2. In the All apps section, click theme-park-frontend. You will see a new build has automatically started as a result of the new commit in the underlying code repo. This build will take a few minutes until the Verify stage is complete

  3. Open the published application URL in a browser.

  4. Click on one of the ride profiles to open the ride description page. You can see a new button has appeared - “Add ride photo”.