How to Build a Serverless App with S3 and Lambda Function

Serverless App with S3 and Lambda Function

What is Serverless?

Serverless is a native architecture of the cloud that allows you to shift more of your operational and functional responsibilities to AWS, increasing your agility and innovation. AWS Serverless gives you features to build and run applications with use of services without thinking about servers.

Service we are going to use from AWS to build a serverless application.

  • API Gateway— Your S3 application will make an API call when a form is submitted and when this API call is made to API Gateway, it will trigger a Lambda function which is associated with particular API gateway.
  • Lambda—  Lambda function can do whatever you want but here it’s simply sends the data from the form to an email address using AWS Simple Email Service (SES)
  • Simple Storage Service (S3) —  where you can host static website which includes HTML files and assets like CSS, Javascripts and Images.

 S3 and Lambda Function

Create API Gateway

Step 1: Create your API endpoint for application

Open API Gateway service and click Create New API button

S3 and Lambada Configuration

Step 2: Select Actions -> Create Method : For creating method like POST/PUT/GET

S3 and Lambada Configuration

Step 3: Select “POST” as method type

S3 and Lambada Configuration

Step 4: Select Lambda Function which you want to assign

S3 and Lambada Configuration

Step 5: Give permissions to API Gateway to invoke Lambda Function

S3 and Lambada Configuration

Step 6: Click Actions->Deploy API

S3 and Lambada Configuration

Step 7: Select New Stage and name your stage

S3 and Lambada Configuration

Step 8: Now you have your endpoint URL which we will use as api url to call any method in serverless application.

S3 and Lambada Configuration

Step 9: Don’t forgot to enable CORS. If you do not do this then you will face CORS headers error in api call.

S3 and Lambada Configuration

In this section, we built the API that will allow your formerly static S3 website to call Lambda functions. Now we will create Lambda Function, which will be used by API gateway.

It’s Lambda Time

Step 1:  Create a Lambda Function, select hello-world template for basic example.

S3 and Lambada Configuration

 

Step 2:  Give any name to your lambda function for your application.

In this step, you need to choose/create a role with the necessary Lambda permissions to access S3, API Gateway, and SES and other services of AWS.

S3 and Lambada Configuration

Step 3: This is sample of Lambda code. No need to edits.

S3 and Lambada Configuration

Step 4: Create your new Lambda function by clicking on “Create Function” button.

S3 and Lambada ConfigurationStep 5:  Delete existing code and replace with below example code.

S3 and Lambada Configuration

var AWS = require(‘aws-sdk’);
var ses = new AWS.SES();var RECEIVERS = [‘you@example.com‘];
var SENDER = ‘you@example.com‘; // ensure ‘sender email’ is verified in your Amazon SESexports.handler = (event, context, callback) => {
console.log(‘Received event:’, event);
sendEmail(event, function (err, data) {
var response = {
“isBase64Encoded”: false,
“headers”: { ‘Content-Type': ‘application/json’, ‘Access-Control-Allow-Origin': ‘http://www.example.com’ },
“statusCode”: 200,
“body”: “{\”result\”: \”Success.\”}”
};
callback(err, response);
});
};function sendEmail (event, done) {
var data = JSON.parse(event.body);

var params = {
Destination: {
ToAddresses: RECEIVERS
},
Message: {
Body: {
Text: {
Data: ‘Name: ‘ + data.name + ‘\nEmail: ‘ + data.email + ‘\nMessage: ‘ + data.message,
Charset: ‘UTF-8′
}
},
Subject: {
Data: ‘Contact Form inquiry: ‘ + data.name,
Charset: ‘UTF-8′
}
},
Source: SENDER
}
ses.sendEmail(params, done);
*Replace email and domain fields accordingly.

Step 6: Now that your Lambda function is done, it needs a trigger.

S3 and Lambada Configuration

Step 7: Click on  “Configuration Required” and  select the API from earlier.

S3 and Lambada Configuration

Step 8: Select your latest deployment stage and click “Add”.

S3 and Lambada Configuration

Step 9: Save your changes and move on to S3!

S3 and Lambada Configuration

It’s S3 Time!

Now we need to update your S3 website to add it’s new dynamic functionality.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js“></script>
<script type=”text/javascript”>
$(document).ready(function() {                      $(“#submit”).click(function(e) {
e.preventDefault();
var name = $(“#name”).val(),
email = $(“#email”).val(),
message = $(“#message”).val();
$.ajax({
type: “POST”,
url: ‘https://xxxxxxxx.execute-apiurl.us-east-1.amazonaws.com/Done‘,                     contentType: ‘application/json’,
data: JSON.stringify({
‘name': name,
‘email': email,
‘message': message
}),
success: function(res){
$(‘#form-response’).html(‘<div>Welcome to the queue! Your path will begin shortly…</div>’);},
error: function(){
$(‘#form-response’).html(‘<div>Something went wrong… We are working on it!</div>’);                     }}); }) });
</script>

<!–THIS IS WHERE DATA IS PULLED FROM S3 TO API TO LAMBDA TO SES–><div>
<input type=”text” id=”name” >
<label for=”name” class=”control-label”>Name</label>
</div>
<div>
<input type=”text” id=”email” >
<label for=”email” class=”control-label”>Email address</label> </div>
<div >
<textarea id=”message” name=”message” rows=”3″ placeholder=”Message”></textarea>
</div>
<div id=”form-response”></div>
<button id=”submit” type=”submit” style=”background-color:#28547C;”>Request Demo</button>

Replace the url parameter with your API Gateway endpoint.

If you use this example code, you can get form submissions sent from your S3 application to the email address you specify. You can use this blog details as a base and extend it to make an awesome serverless app with S3 and Lambda as per your requirement.

 

 

The following two tabs change content below.
Jigar Oza

Jigar Oza

Sr. Software Developer(Open-Source) at Dev Information Technology Ltd.
I am a senior software developer at DEV IT since last 3 years. I am passionate for learning latest & innovative technologies and make work easier and better. I am fond of coding, debugging and refactoring.
Jigar Oza

Latest posts by Jigar Oza (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>