Creating Your Own Serverless Reminder Service on AWS with Step Functions, API Gateway, Lambda, and S3

Hands-On Lab

 

Photo of Fernando Medina Corey

Fernando Medina Corey

Training Architect

Length

02:00:00

Difficulty

Intermediate

In this hands-on live AWS environment, you will interact with several AWS services including AWS Step Functions, API Gateway, AWS Lambda, and S3 to create a reminder service website. You will also integrate the SNS and SES services into your code (but don't worry — you don't need to know much about SES). By the end of this live AWS environment, you should feel comfortable developing applications that rely on multiple AWS services. This also provides you with an opportunity to prove your knowledge and skills integrating multiple AWS services.

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.

Creating Your Own Serverless Reminder Service on AWS with Step Functions, API Gateway, Lambda, and S3

Introduction

In this hands-on lab, we will interact with several AWS services, including AWS Step Functions, API Gateway, AWS Lambda, and S3 to create a reminder service website. We will also integrate the SNS and SES services into our code.

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.

Download the code you'll need later at the course GitHub. Each file will also be linked in its particular step in the guide.

You'll also need the Postman app for this lab, which you can download at getpostman.com.

Finally, make sure to download all the files (in their raw format) and the image you'll need for your static site.

Creating a State Machine

Note: When instead of creating state machines from scratch, you can use the hello world template as a place holder.

  1. In the AWS console, navigate to Step Functions.
  2. Click Get started.
  3. Select Author from scratch.
  4. In the Details section, give it a name of "reminder".
  5. For IAM role, select I will use an existing role.
  6. In the Existing IAM roles dropdown, make sure RoleForStepFunction is selected.
  7. Remove the current code in the State machine definition box.
  8. Copy the step-function-template.json code from GitHub and paste it into the State machine definition box.
  9. Click Create state machine.

Creating Your Lambda Functions and Updating the State Machine

Create First Lambda Function

  1. Navigate to Lambda.
  2. Click Create a function.
  3. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Name: email
    • Runtime: Python 3.6
    • Role: Choose an existing role
    • Existing role: LambdaRuntimeRole
  4. Click Create function.
  5. On the email page, scroll to the Function code section.
  6. Delete the existing code there, and enter the email_reminder.py code from GitHub.
  7. In the VERIFIED_EMAIL line, replace YOUR_SES_VERIFIED_EMAIL with your email address.
  8. Click Save.

Verify Your Email Address

  1. Open the Simple Email Service page in a new browser tab.
  2. Click Email Addresses in the left-hand menu.
  3. Click Verify a New Email Address.
  4. Enter your email address in the dialog, and click Verify This Email Address.
  5. Check your inbox for the verification email, and click the verification link.
  6. In the AWS console, refresh to see your email address is verified.
  7. Remember to only use this email address throughout the lab now that it's the only one that's verified.

Create Second Lambda Function

  1. Back in the Lambda function tab, click the Functions link at the top to go back one level.
  2. Click Create function.
  3. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Name: sms
    • Runtime: Python 3.6
    • Role: Choose an existing role
    • Existing role: LambdaRuntimeRole
  4. Click Create function.
  5. On the sms page, scroll to the Function code section.
  6. Delete the existing code there, and enter the sms_reminder.py code from GitHub.
  7. Click Save.

Create Third Lambda Function

  1. Click the Functions link at the top to go back one level.
  2. Click Create function.
  3. Make sure the Author from scratch option at the top is selected, and then use the following settings:
    • Name: api_handler
    • Runtime: Python 3.6
    • Role: Choose an existing role
    • Existing role: LambdaRuntimeRole
  4. Click Create function.
  5. On the api_handler page, scroll to the Function code section.
  6. Delete the existing code there, and enter the api_handler.py code from GitHub.
  7. Click Save.
  8. Open the Step Functions page in a new tab.
  9. Click to open the reminder state machine.
  10. Copy the ARN listed.
  11. Back in the api_handler Lambda function page, scroll to the Function code section.
  12. In the SFN_ARN line of the function code, paste in the state machine ARN.
  13. Click Save.

Update the State Machine

  1. On the reminder state machine page, click Edit.
  2. In the EmailReminder section of the state machine definition code, click EMAIL_REMINDER_ARN and select the email ARN listed in the dropdown.
  3. In the TextReminder section, click TEXT_REMINDER_ARN and select the sms ARN listed in the dropdown.
  4. In the BothReminders section of the code, click EMAIL_REMINDER_ARN and select the email ARN listed in the dropdown.
  5. In the BothReminders section of the code, click TEXT_REMINDER_ARN and select the sms ARN listed in the dropdown.
  6. Click Save.

Creating Your API Gateway API and Testing with Postman

Create and Deploy API Gateway API

  1. Navigate to API Gateway.
  2. Click Get Started.
  3. Select New API.
  4. Give it an API name of "reminders".
  5. Click Create API.
  6. On the Resources page, click Actions and select Create Resource from the dropdown.
  7. Give it a Resource Name of "reminders".
  8. Check the Enable API Gateway CORS box.
  9. Click Create Resource.
  10. Make sure you have the /reminders resource selected, click Actions, and select Create Method.
  11. In the Options dropdown, select POST and then click the checkmark.
  12. In the 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
  13. Click Save.
  14. Click Actions and select Deploy API.
  15. In the Deploy API dialog, set the following values:
    • Deployment stage: [New Stage]
    • Stage name: prod
    • Stage description: prod
  16. Click Deploy.

Test with Postman

  1. On the prod Stage Editor page, copy the invoke URL listed. (NOTE: Paste it into a text file, as we'll need it for both this part of the lab and a later step as well).
  2. Open the Postman app.
  3. Paste the invoke URL in the box at the top, adding /reminders at the end.
  4. Click the GET method dropdown by the URL, and select POST.
  5. In the Body section, select raw.
  6. Click Text and select JSON (application/json).
  7. Enter the sfn_input.json code from GitHub.
    • Replace the email address with your verified email address.
    • Replace the phone number with your mobile phone number, including the country code.
  8. Click Send.
  9. Check your inbox and your mobile phone, where you should receive the message.

Deploying Your Static Site to S3

Create S3 Bucket and Upload Files for Static Site

  1. Navigate to S3.
  2. Click + Create bucket.
  3. On the Name and region screen, give your bucket a unique name (e.g., "cda-test-2018-static-site-" with a series of random numbers at the end, like "8675309"). Click Next.
  4. Leave the Configure options screen settings, and click Next.
  5. On the Set permissions screen, uncheck the two boxes that state: Manage public access control lists (ACLs) for this bucket and Manage public bucket policies for this bucket. Click Next.
  6. Click Create bucket.
  7. In the Overview tab, and click Upload.
  8. Click Add files to upload a file. Click Upload.
  9. Upload the four files (but not the image) you downloaded earlier.
  10. Leave all the settings as-is, and click Upload.
  11. Click +Create folder.
  12. Name it images, and click Save.
  13. Open the folder, and click Upload.
  14. Click Add files and upload the image you downloaded earlier.
  15. Leave all the settings as-is, and click Upload.

Configure Static Site

  1. In the Properties tab for the bucket, select the Static website hosting card.
  2. Select Use this bucket to host a website, and set the following values:
    • Index document: index.html
    • Error document: error.html
  3. Click Save.
  4. Select the Static website hosting card again.
  5. Open the new endpoint URL listed in a new browser tab. It will currently display a 403 error.
  6. Back in the Overview tab for the bucket, select everything in the bucket.
  7. Click More and select Make public.
  8. In the dialog, click Make public.
  9. Refresh the static site browser tab, which should now display the static site.
  10. Enter some information into the Required sections part of the site, and attempt to send an email to yourself.
  11. It will result in an error. Let's fix it.

Edit the Site's JavaScript File to Include the API Gateway URL

  1. Open the formlogic.js file in a text editor.
  2. In the API_ENDPOINT line, replace YOUR_API_ENDPOINT_URL with the prod stage invoke URL you saved in a text file in an earlier step, and add /reminders to the end.
  3. On the S3 bucket page, delete the formlogic.js file.
  4. Re-upload the formlogic.js file.
  5. Leave all the settings as-is, and click Upload.
  6. Select the newly uploaded file, click More, and select Make public.
  7. In the dialog, click Make public.

Test the Static Site

  1. Refresh the static site.
  2. Enter information into the Required sections, and attempt to send an email to yourself.
  3. Now, it should be successful.
  4. Check your inbox, where you should see the message you sent through the static site.

Conclusion

Congratulations on completing this hands-on lab!