How To: CloudFront & WAF with API Gateway (4 Min) | AWS HTTP API With Lambda

In this tutorial, you'll learn how to attach/setup CloudFront and WAF to HTTP API Gateway and Lambda in AWS.

—
Facebook:   / gokcedbsql  
—
Video Transcript
—
Hi guys, this is Abhi from Gokcedb. In this video, you're going to learn how to attach a CloudFront distribution and a web application firewall to your API gateway in AWS. Let's start by searching for lambda on the AWS console then click on create function and give your function a name. I'm going to select python for runtime then hit create a function in the code source section.

I'm going to copy and paste pre-written python code on line 2. I'm checking to see if the fname key exists in query string parameters if it does then I'm printing the hello first name followed by the event. If does not then I'm just saying hello followed by the event.

Click on deploy the hit the test button. Give your test event a name then click on save. Click on test again to test your lambda function and verify if it's working as expected.

Go back to the AWS console and this time search for the API gateway. Click on create API then hit build in the HTTPI API section. Give your API a name then click on add integration and select Lamba from the drop-down.

Search for the lambda function that we just created then hit next. For the route method, I'm going to select get and leave everything else to default. Click on the invoke URL and add your resource path at the end of it.

If I add the fname query string parameter, I should see the first name after hello. This confirms that our lambda function is getting invoked as expected. Let's go back to the AWS console and search for CloudFront.

Click on create distribution and copy and paste the API gateway's invoke URL to the origin domain text box. For protocol, I'm going to select HTTPS only, and for SSL, I'm going to select TLS version 1.2. I'm going to leave most of the remaining settings to default then hit create a distribution.

Wait a few minutes for the deploying message to go away then copy and paste the distribution domain URL into a browser window. Add your resource path at the end of the URL to confirm that your lambda function is getting invoked. Looks like our query string parameters are not being passed from the API gateway to the CloudFront distribution URL.

To fix that, go back to the CloudFront window and click on behaviors. Select the default behavior then click on edit. Scroll down to cache key and origin requests and select legacy cache settings.

Select all from the query string drop down then hit save. Click on the General tab then wait for the deploying message to go away. Refresh your URL query string parameters to confirm whether our change worked as expected or not.

Let's go back to the AWS console and search for WAF. Click on create webacl then select CloudFront distributions. Give your web ACL a name then click on add AWS resources.

Select the CloudFront distribution that we just created then hit next. From the add rules drop-down, I'm going to add some managed rule groups. After selecting the rule groups of your choosing, click on add rules button.

I'm going to leave all the other settings to default then hit the create web ACL button. Click on the name of the ACL that we just created then navigate to the associated AWS resources tab. Here, make sure you're connected to the right CloudFront distribution.

You can also refresh your CloudFront window and confirm that the waf link appears in the settings section as well. There you have it. Make sure you like, subscribe, and turn on the notification bell.

Until next time.

def lambda_handler(event, context):
if 'queryStringParameters' in event.keys() and 'fname' in event['queryStringParameters'].keys():
html_output = f"Hello {event['queryStringParameters']['fname']}!" \
f"Here's your event: {event}"
else:
html_output = f"Hello!" \
f"Here's your event: {event}"

return {
"statusCode": 200,
"body": html_output,
"headers": {
'Content-Type': 'text/html',
}
}