Deploying an index.html file on an EC2 instance. and storing application data in DynamoDB via API Gateway.
Tags: dynamodb, lambda, api, ec2iam
Published: 2023-12-09 03:15:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imekl8nxff7rt13wobul.png)




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywuns1mc4cxz743g4oy6.png)

Project Objective:

Building an internal tool for a company to collect and manage employee information. The EC2 instance hosts an Employee Information Form (index.html) accessible within the company network. Employees fill out the form, providing details such as their name, age, designation, state, country, and gender.

When an employee submits the form, the data is sent to DynamoDB through API Gateway, utilizing AWS Lambda to process and store the information. This creates a seamless and secure way to gather and manage employee details centrally.

**Pre Requisites:**

1.DynamoDB
2.IAM Roles
3.Lambda Function
4.API Gateway
5.EC2 Instance.






**Creation of Dynamodb:**



1.In the aws console search for dynamodb then click on create table.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1f0o2opn72vet6c1snd.png)


2.Then enter name of the dyanmodb table name and partition key(anything) and sort key is optional then click on create table.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h15q724epn4798wruf79.png)

3.Then click on the table then click on aditional details then note down the ARN of the table, it is required for future reference.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy57ez4a30inczcybwfk.png)
4.Then we can click on explore table items and we can create items and we can check by clicking on the Run.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5islnr035t5ep71b33os.png)


 @@@@@


**2.Creation of IAM Roles:**



**Creating Policy for Lambda:**

1.In the aws console search for IAM then click on polocy then click on json then add the script given by below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4nl101kpx8tdvqp14u4.png)

```

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem"
            ],
            "Resource": "arn:aws:dynamodb:ap-south-1:YOUR_ACCOUNT_ID:table/dynamodb-name"
        }
    ]
}

```

**Note:** Here modify the region & accountID & dynamodb-name 


2.Then click on next then enter name of the policy then create the policy.


**Creating Lambda Role:**


1) In the aws console Search for IAM and navigate to Roles.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3hqlahhriuzfhxpgauh.png)
2)Click on create role.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktc9iszrg669l085t7pq.png)

3.Use case select the lambda why because we are assigning this role to lambda and hit on the next button.
4.Then we have to search for the policy what ever we created Then click on next.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8a6qji7hn7jjr5l79fz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxxa9z4nl3wvgrats7m0.png)

5.Then enter the name of the lambda function and and click on next then create the role.

@@@@@@



**3.Creation of Lambda Function:**

1)In the aws console search for lambda then click on create function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kactxdg3btmpkhs4h19t.png)

2)Then enter the name of the function then select runtime as python then click on existing role then select the existing role what ever we created earlier and click on create function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkukodge5ozpimnuckrj.png)

3)Then under the script we have to enter the script.

**Note: **in the script line No:10 we have to enter the name of the dynamodb table what ever we created earlier.

```

# import the JSON utility package
import json
#import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime
# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('dynamodb-table-name')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())
# define the handler function that the Lambda service will use an entry point
def lambda_handler(event, context):
    print(event)
    age=str(event['age'])
    response = table.put_item(
        Item={
            'Name': event['name'],
            'Age':age,
            'Gender':event['gender'],
            'Designation':event['designation'],
            'State':event['state'],
            'Country':event['country']

            })
# return a properly formatted JSON object
    return {
    'body': json.dumps('Data inserted in DB succesfully')
    }

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9b0c3toysso4zucn301.png)

4)After entering the script we have to click on deploy.
5)Next we have to click on test button.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gmt6sz3ceqgp3rexhuc.png)

6)We have to enter the script like this for adding this data to dynamodb and also in the event section we have to provide any name and click on save then test the lambda function is updating the dat in the dynamodb or not.
7)After that we can check the update in the dynamodb by clicking on the text button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnweuxjpdisg5ajf1kvx.png)

8)Finally connectivity between lambda and dynamodb is working fine.


@@@@@@@@@@@@


**4.Creation of API Gateway:**

I.In the aws console search for api and click on api gateway



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iulwv3evg2ochbxmcukv.png)
II.Click on create api

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jwgdtbazapn7wts2sro.png)


III.Click on Build in the rest api section.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qkqgw2vt05svh267rm9.png)

IV.Enter the name of the api then click on create button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2woadf945vv6n9nooif9.png)
V.Click on create method.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gid67qoc15w6iry5lnng.png)
VI.Choose post option and arn and type as lambda and function also then click on create.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05oa6dd00uqja4rj2mi2.png)
VII.Then click on enable cors.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irq2ho57rrzp8xe3xvfl.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9247ycez564hp1z1moe4.png)
VIII.Then click on deploy api
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lovtepjmjk3ux7qf2tp1.png)
IX.Then enter name of the deploy and choose new stage then click on deploy.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k3wc1xq2k5eotnz2a2z.png)


X.After creating deploy we will get url we have to save that for feture reference.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tbamjfrl3ijgw2aqqck.png)
XI.Then we can check the connectivity between api and lambda.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4y5skkp4jw08jj5vd16.png)

XII.For that we have to click on method we created post method earlier then we have to click on test then we have to add the script in json format same like how we enter in the labda test section  ofter that we can see the updates reflection in the dynamodb it is updated or not.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtz95ilnxc4dr6vd742g.png)


**5.Creating EC2 instance:**


a)In the aws console search for ec2 then click on create ec2 instance.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfcke6ywdyj5wcwcdzhu.png)

b)Enter the name and under the user data add the bwlow script for installing httpd.

c)Ofter creating the ec2 instance under the /var/www/html/index.html file will be there.
d)We have to remove the existing data and add the script below.

```

<!DOCTYPE html>
<html>
<head>
  <title>Candidate Information Form</title>
</head>
<body style="background-color: #3498db;">
  <h1 style="text-align: center; color: #fff;">Candidate Information</h1>
  <div style="max-width: 400px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
    <form id="candidateForm">
      <label for="name" style="display: block; margin-bottom: 8px; color: #555;">Name:</label>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #e8f0fe;">

      <label for="age" style="display: block; margin-bottom: 8px; color: #555;">Age:</label>
      <input type="number" id="age" name="age" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #f9e8e8;">

      <label for="designation" style="display: block; margin-bottom: 8px; color: #555;">Designation:</label>
      <input type="text" id="designation" name="designation" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #f3f3d9;">

      <label for="state" style="display: block; margin-bottom: 8px; color: #555;">State:</label>
      <input type="text" id="state" name="state" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #e6f6f0;">

      <label for="country" style="display: block; margin-bottom: 8px; color: #555;">Country:</label>
      <input type="text" id="country" name="country" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #fde8e6;">

      <label for="gender" style="display: block; margin-bottom: 8px; color: #555;">Gender:</label>
      <select id="gender" name="gender" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #f9ebca;">
        <option value="" disabled selected>Select gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>

      <input type="submit" value="Submit" style="background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;">
    </form>
  </div>

  <script>
    // Replace 'YOUR_DYNAMODB_API_URL' with the API endpoint to interact with your DynamoDB backend.
    const DYNAMODB_API_URL = 'https://34laurmeo9.execute-api.ap-south-1.amazonaws.com/production';

    document.getElementById('candidateForm').addEventListener('submit', function (event) {
      event.preventDefault();

      const formElements = event.target.elements;

      const candidateData = {
        name: formElements.name.value,
        age: formElements.age.value,
        designation: formElements.designation.value,
        state: formElements.state.value,
        country: formElements.country.value,
        gender: formElements.gender.value,
      };

      // Sending the candidateData to your DynamoDB backend using a fetch API request.
      fetch(DYNAMODB_API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(candidateData),
      })
        .then((response) => {
          if (response.ok) {
            // Show the success popup if the data is successfully stored in DynamoDB.
            alert('Successfully submitted!');
            // Reset the form after successful submission.
            document.getElementById('candidateForm').reset();
          } else {
            // Show an error popup if there was an issue with storing the data.
            alert('Submission failed. Please try again later.');
          }
        })
        .catch((error) => {
          console.error('Error:', error);
          // Show an error popup if there was an issue with the API request.
          alert('Submission failed. Please try again later.');
        });
    });
  </script>
</body>
</html>

```


e)Note: in the above script in the line 34 we have to modify the DYNAMO_DB_URL with the api url what ever we noted down earlier
f)Then access the application by using ec2 public ip in the chrome.
       #### THE END #####

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Same project but ui is body mass index calculator.
for this project also same steps like above project.



1.dynamodb Partition key should be 'First Name' and 'sort key' is optional.


lambda script:

```
# import the JSON utility package
import json
# import the Python math library
import math

#import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('DYNAMODB TABLE NAME')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

# define the handler function that the Lambda service will use an entry point
def lambda_handler(event, context):
    print(event)
    height=float(event['height'])/100
    weight=float(event['weight'])
    bmi=weight/height**2
# write result and time to the DynamoDB table using the object we instantiated and save response in a variable
#remember "First Name" and "Last Name" we have entered exactly same to partition key name and Sort key name in the DynamoDBtable.
    response = table.put_item(
        Item={
            'First Name': event['firstname'],
            'Last Name':event['lastname'],
            'Height':event['height'],
            'Weight':event['weight'],
            'BMI':str(bmi),
            'Recorded Time':now
            })

# return a properly formatted JSON object
    return {
    'statusCode': 200,
    'body': json.dumps('Your BMI is ' + str(bmi))
    }
```


index.html script:


```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Calculate Your BMI!</title>
    <!-- Styling for the client UI -->
    <style>
    h1 {
        color: #FFFFFF;
        font-family: system-ui;
		margin-left: 20px;
        }
	body {
        background-color: #4D8FB4;
        }
    label {
        color: #86C900;
        font-family: system-ui;
        font-size: 20px;
        margin-left: 20px;
		margin-top: 20px;
        }
     button {
        background-color: #86C232;
		border-color: #86C232;
		color: #FFFFFF;
        font-family: system-ui;
        font-size: 20px;
		font-weight: bold;
        margin-left: 30px;
		margin-top: 20px;
		width: 140px;
        }
	 input {
        color: #222629;
        font-family: system-ui;
        font-size: 20px;
        margin-left: 10px;
		margin-top: 20px;
		width: 100px;
        }
    </style>
    <script>
        // callAPI function that takes the base and exponent numbers as parameters
        var callAPI = (firstname,lastname,weight,height)=>{
            // instantiate a headers object
            var myHeaders = new Headers();
            // add content type header to object
            myHeaders.append("Content-Type", "application/json");
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({"firstname":firstname,"lastname":lastname,"weight":weight,"height":height});
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("YOUR API ENDPOINT", requestOptions)
            .then(response => response.text())
            .then(result => alert(JSON.parse(result).body))
            .catch(error => console.log('error', error));
        }
    </script>
</head>
<body>
    <h1>Get Your BMI...!</h1>
	<form>
        <label>First Name:</label>
        <input type="text" id="firstname">
        <label>Last Name:</label>
        <input type="text" id="lastname">
		<br>
	<label>Weight in Kg:</label>
        <input type="text" id="weight">
        <label>Height in cm:</label>
        <input type="text" id="height">
		<br>
        <!-- set button onClick method to call function we defined passing input values as parameters -->
        <button type="button" onclick="callAPI(document.getElementById('firstname').value,document.getElementById('lastname').value,document.getElementById('weight').value,document.getElementById('height').value)">Calculate and record</button>
    </form>
</body>
</html>
```

New Task:


**Deploying same html file in the aws amplify.**

Search AWS amplify. Click on get started.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1a9ifpw2tzhus9jl5h4.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9or2dqyi7dzxayz7jjb4.png)


Deploy without git provider.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acv8uh3rel0h3o2fr6j4.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyksa3f18c0265dr6bn6.png)

Drag and deploy the zip folder here. Save and deploy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cen2qbvxuqou2rb1aqp8.png)
Our application is successfully deployed. We are ready to go. Open the domain url. You will see the efforts paid off....

The Window is as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u10bmjs0xadxelgpztb0.png)
As soon as you hit the calculate and record button, you will get response in alert format as shown on the screen. Parallely the records will be stored in DynamoDB table as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns8gw3l2lons6dx0yxsj.png)