Using AWS Lambda + API Gateway from Javascript

If you’ve been working with AWS for a while, you’ll know that Lambda functions is where it’s at. Lambda is AWS’ server-less offering, allowing you to run code in the cloud without having to worry about infrastructure.

Lambda is really powerful. The real advantage is with the complete integration in AWS IAM. Once you’re familiar with how policies work, the ability to lock the process down to the least privileges required becomes a breeze.

Let’s run through an example. In this use case, we’ll create a simple HTML page, that will generate a random message that is retrieved via API Gateway from a Lambda function written in Python.

Create a Lambda function

• If you haven’t done so yet, log onto the AWS Console.
• You may want to switch to your favourite region.
• Open the Lamba interface (you can just search for Lambda)
• Click on the button “Create Function”
• Select the following options
  • We will Author from Scratch
  • Function name : simpleMessage
  • Runtime : Python 3.8 (if there’s a later version, that may likely work as well)
  • For the purpose of this example, we’ll let Lambda create the role for us.
• Click Create Function

The core function will be created, with the associated role. There’s still no code in the function, so it’s pretty useless at the moment. Scroll down in the console, and you should see the block where the source code can be edited. Open the python script in a separate tab, and copy the source code into the lambda function, overwriting everything that is in there. When you’re done, hit the Save button.

Test the function

Let’s test it to make sure the Lambda actually works correctly. Click the Test button. If you haven’t created a test event yet, do so now. Give the test event a name, and click create. Once it has been created, you can select the test event in the dropdown, and click “Test”

Did you see the message : “Execution result: succeeded” ? If so, Congratulations! The code executed fine. You can open the details to see the result, and it should look similar to this :

{
    "statusCode": 200,
    "body": "{\"message\": \"A sloth explodes your homie\"}",
    "headers": {
        "Access-Control-Allow-Origin": "*"
    }
}

Create the API

So on it’s own, this Lambda function will just sit there until you explicitly invoke it. We will now create the API Gateway. The API Gateway is an interface front-end, that allows Lambda functions to be called from external sources.

Scroll down on the Lambda function, and you should see a screen where you can click “Add Trigger”. Click on Add Trigger, and select API Gateway.

• Select Create an API
• For API Type, select REST API
• For Security, select Open
  • Do note that Open means that ANYONE can call the API. It is not advised to operate in this mode on a production system.
• Click Add

The API will now be created. When it’s done, you should see the endpoint URL on the same screen. It should look similar to this.

https://gd19ykrcka.execute-api.ap-southeast-2.amazonaws.com/default/simpleMessage

You should be able to click on your link. If everything worked correctly, you should be able to see a message in your browser.

Include the API on a web page

Now that the API has been created, you can invoke it from a web page. Use the index.html page from the repo. Update the api variable and replace the contents with the URL from your REST API.

Save the file to your drive, and open it through your browser. If it all works ok, you should see a message being called through JavaScript, invoking the API Gateway, and executing your Lambda function.

What’s next?

The code works. It does the job, although it is quite basic. The CORS features are loosely disabled in the Lambda function (you will notice the CORS headers are sent through the header function within Lambda). You may decide not to do it this way, and control CORS through the API Gateway instead, with stricter control.

In an upcoming blog post, I will show you how you can create a user registration page with Cognito, and control access to API Gateway for authenticated users.

Don’t forget to delete the API Gateway, and the Lambda function when you’re done, to avoid unnecessary charges on your account.

Let me know if you succeeded with the example. I’d love to hear what you’ve been able to achieve with server-less in AWS.