Skip to main content

Building a Serverless Application Using Step Functions, API Gateway, Lambda, and S3

Hands-On Lab

 

Photo of Adrian Cantrill

Adrian Cantrill

Training Architect

Length

01:15:00

Difficulty

Intermediate

In this AWS hands-on lab, we will create a fully working serverless reminder application using S3, Lambda, API Gateway, Step Functions, Simple Email Service, and Simple Notification Service. While the lab does use Python and JavaScript, you don't need to be able to code to understand and implement the solution. By the end of the lab, you will feel more comfortable architecting and implementing serverless solutions within AWS. All of the resources needed to complete this lab are available from this GitHub repo.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Building a Serverless Application Using Step Functions, API Gateway, Lambda, and S3

Introduction

In this AWS hands-on lab, we will create a fully working serverless reminder application using S3, Lambda, API Gateway, Step Functions, Simple Email Service, and Simple Notification Service.

Solution

Log in to the live AWS environment using the credentials provided. Make sure you're in the N. Virginia (us-east-1) region throughout the lab.

If you'd like to follow one of the optional steps below involving the Postman app, you can download the app here.

Create the email Lambda Function

  1. Navigate to Simple Email Service.
  2. Select Email Addresses in the left-hand menu.
  3. Click Verify a New Email Address.
  4. Enter a valid email address you have access to in the dialog, click Verify This Email Address, and then Close.
  5. Check your inbox, and click the link in the email to verify your email address.
  6. Refresh the Email Addresses page in the SES console, and make sure the verification state is verified.
  7. Navigate to Lambda.
  8. Click Create function.
  9. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Function name: email
    • Runtime: python 3.6 or python 3.7
  10. Expand Choose or create an execution role, and use the following settings:
    • Execution role: Use an existing role
    • Existing role: LambdaRuntimeRole
  11. Click Create function.
  12. On the email function page, scroll down to the Function code box.
  13. Replace all the code currently there with the email_reminder.py code, which you can find here.
  14. Change YOUR_SES_VERIFIED_EMAIL to the email address you verified earlier.
  15. Click Save.
  16. At the top of the page, copy the ARN for the function and paste it into a text file. We'll need it in a few minutes.

Create the sms Lambda Function

  1. Return to the Lambda Functions dashboard.
  2. Click Create function.
  3. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Function name: sms
    • Runtime: python 3.6 or python 3.7
  4. Expand Choose or create an execution role, and use the following settings:
    • Execution role: Use an existing role
    • Existing role: LambdaRuntimeRole
  5. Click Create function.
  6. On the sms function page, scroll down to the Function code box.
  7. Replace all the code currently there with the sms_reminder.py code, which you can find here.
  8. Click Save.
  9. At the top of the page, copy the ARN for the function and paste it into a text file. We'll need it in a few minutes.

Create a Step Functions State Machine

  1. Navigate to Step Functions.
  2. Delete any existing state machines.
  3. Note any functions that don't delete — you need to pick a unique name.
  4. Click Create state machine.
  5. Select Author with code snippets.
  6. For the name, enter reminder (ideally) or reminder- with a unique string on the end if it's already taken.
  7. Delete the existing snippet in the State machine definition box, and add in the contents of step-function-template.json, which you can find here.
    • You may see red error indicators — that's fine.
  8. Replace any occurrences of EMAIL_REMINDER_ARN with the ARN of the email Lambda function (which you copied a few minutes ago).
  9. Replace any occurrences of TEXT_REMINDER_ARN with the ARN of the sms Lambda function (which you also copied earlier).
  10. Click Refresh next to the diagram, and ensure it updates to include the flow of steps.
  11. Click Next.
  12. Select Choose an existing IAM role.
  13. Select I will use an existing role.
  14. Select RoleForStepFunction.
  15. Click Create state machine.
  16. On the reminder state machine page, copy its ARN (not the IAM role ARN) and paste it into a text file. We'll need it in a few minutes.

Create the api_handler Lambda Function

  1. Return to the Lambda Functions dashboard.
  2. Click Create function.
  3. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Function name: api_handler
    • Runtime: python 3.6 or python 3.7
  4. Expand Choose or create an execution role, and use the following settings:
    • Execution role: Use an existing role
    • Existing role: LambdaRuntimeRole
  5. Click Create function.
  6. On the api_handler function page, scroll down to the Function code box.
  7. Replace all the code currently there with the api_handler.py code, which you can find here.
  8. At the top of the code, replace STEP_FUNCTION_ARN with the ARN of the state machine (which you just copied).
  9. Click Save.

Configure API Gateway and Create an API Endpoint

  1. Navigate to API Gateway.
  2. Click Get Started.
  3. Select REST and New API, and set the following values:
    • API name: reminders
    • Endpoint Type: regional
  4. Click Create API.
  5. On the Resources page, click Actions and select Create Resource from the dropdown.
  6. Give it a Resource Name of reminders.
  7. Check the Enable API Gateway CORS box.
  8. Click Create Resource.
  9. Make sure you have the /reminders resource selected, click Actions, and select Create Method.
  10. In the Options dropdown, select POST and then click the checkmark.
  11. In the /reminders - POST - Setup window, set the following values:
    • Integration type: Lambda Function
    • Use Lambda Proxy integration: Check
    • Lambda Region: us-east-1
    • Lambda Function: api_handler
    • Use Default Timeout: Check
  12. Click Save.
  13. Click Actions and select Deploy API.
  14. In the Deploy API dialog, set the following values:
    • Deployment stage: New stage
    • Stage name: prod
    • Stage description: prod
  15. Click Deploy.
  16. You can ignore any errors involving WAF. They don't impact the lab.
  17. Copy the invoke URL, as we will need this in a few minutes.

Create the S3 Website

Optional: Test the API

  1. Download and install Postman.
  2. At the top of the Postman app, create a new tab by clicking the + symbol.
  3. Change the dropdown to POST.
  4. Paste in the invoke URL from the previous task, and append /reminders at the end.
  5. Click Body.
  6. Select raw.
  7. Change the Text dropdown to JSON.
  8. Paste in the JSON from sfn_input.json (found here), and change the email address to your email address and the phone number to your phone number.
  9. Click Send.
  10. It should generate a success 200 code, and you should get an email and an SMS. If so, you are good to continue.

Locate the static_website Folder

  1. Navigate to the static_website folder on GitHub.
  2. Download the contents of the folder.
  3. On your local machine, open formlogic.js.
  4. Replace the YOUR_API_ENDPOINT_URL placeholder with the invoke URL for the prod API with /reminders appended.

Configure the Static Website

  1. In the AWS console, navigate to S3.
  2. Click Create bucket.
  3. The bucket name will need to be unique, and ensure the region is US East (N. Virginia).
  4. Click Next.
  5. Click Next again.
  6. Ensure all checkmarks are not selected on the block public access screen. This includes individual ones and any group check mark.
  7. Click Next and then Create bucket.
  8. Open the bucket.
  9. Click Upload, select the objects from the static_website folder, and click Next.
  10. Change the Manage public permissions dropdown to Grant public read access to this object(s).
  11. Click Next, Next again, and Upload.
    • If you get any errors here, verify the files are public by clicking one, selecting Permissions, and ensuring public access is set so everyone has read object permissions.
  12. Head back to your bucket, and click the Properties tab.
  13. Click the Static website hosting card.
  14. Select Use this bucket to host a website.
  15. Enter index.html in the index document box.
  16. Enter error.html in the error document box.
  17. Click Save.
  18. Browse to the Static Website Hosting Endpoint for the bucket (the link is on the Static website hosting option screen), which should result in our serverless application.
  19. Test it out by entering information into the site (including the email address and phone number you entered in earlier steps).

Conclusion

Congratulations on completing this hands-on lab!