https://github.com/julien-muke/search-engine-website-using-aws
Learn how to build a basic search engine in AWS. In this lab, we will be using Amplify, DynamoDB, API Gateway, and Lambda. We also will utilize Python, HTML, lambda_handler, and much more.
https://github.com/julien-muke/search-engine-website-using-aws
amazon-api-gateway amazon-dynamodb aws-amplify aws-lambda
Last synced: 11 months ago
JSON representation
Learn how to build a basic search engine in AWS. In this lab, we will be using Amplify, DynamoDB, API Gateway, and Lambda. We also will utilize Python, HTML, lambda_handler, and much more.
- Host: GitHub
- URL: https://github.com/julien-muke/search-engine-website-using-aws
- Owner: julien-muke
- Created: 2023-12-30T15:20:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T07:37:48.000Z (over 2 years ago)
- Last Synced: 2025-07-19T16:30:06.633Z (11 months ago)
- Topics: amazon-api-gateway, amazon-dynamodb, aws-amplify, aws-lambda
- Homepage:
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#  Create a basic Search Engine website using AWS
## 📄 Introduction
In this lab we will create a Gaming Search Engine (with a database of 5 games) from scratch in the AWS console using services/components like DynamoDB, Amplify, and API Gateway. Our Website will be hosted on a static HTML website. The HTML website will be powered by Amplify and will function from the API we create in API Gateway.
## 📐 Architecture Design
As shown on the architecture diagram below: the users is going to log on to the AWS amplify and Amplify is going to hold our static website this is actually going to be the user interface and input a seach, once we search it's going to call on Amazon API Gateway, then it's going to call on AWS Lambda which is going to ask for permission in order to access Amazon DynamoDB which has the information that we're searching for in the AWS Amplify static website.
## ➡️ Step 1 - Create DynamoDB table
👉 Create DynamoDB table
1. Go to the DynamoDB console
2. Click "Create Table"
3. Name the table `GamingSearchEngine` and name the partition key as `Name of Game`. Keep everything else default
4. Click Create table at the bottom of the screen (may take a few minutes to create)
👉 Populate DynamoDB table
Click the check box for the newly created database, click "Actions" dropdown menu, then click "Explore items"
2. Click "Create item" button
3. Fill out the Attribute value as shown in the screenshot below. To add the Category and ESRB Rating Attribute, click "Add new attribute" and select "String"
4. Repeat step for all 5 games shown below
| Name of Game | Category | ESRB Rating |
|--------------|----------|------------|
| Grand Theft Auto V | Open World - Shooter | Mature - 17+ |
| Fortnite | Battle Royal Game | Teen - 13+ |
| God of War | Action-Adventure | Mature - 17+ |
| Call of Duty Warzone | First-Person Shooter | Mature - 17+ |
| Minecraft | Survival Game | Everyone - 10+ |
Note: You can duplicate an item to help expedite the process - shown in screenshot below
5. Once complete, the items in your table should look like what's shown below
## ➡️ Step 2 - Create Lambda IAM Role
Create the execution role that gives your function permission to access AWS resources. Before you can apply your Lambda Policy to a Lambda function, you have to create the policy in your own account and then apply it to an IAM role.
To create an IAM policy:
1. Navigate to the IAM console and choose Policies in the navigation pane. Choose Create policy.
2. Because I have already written the policy in JSON, you don’t need to use the Visual Editor, so you can choose the JSON tab and paste the content of the JSON policy document shown earlier in this post (remember to replace the placeholder account ID with your own account ID). Choose Review policy.
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"logs:CreateLogStream",
"dynamodb:PutItem",
"dynamodb:DeleteItem",
"dynamodb:GetItem",
"dynamodb:Scan",
"dynamodb:Query",
"dynamodb:UpdateItem",
"logs:PutLogEvents",
"logs:CreateLogGroup"
],
"Resource": "*"
}
]
}
```
3. Name the policy `lambda-apigateway-dynamodb-policy` and give it a description that will help you remember the policy’s purpose. You also can view a summary of the policy’s permissions. Choose Create policy.
You have created the IAM policy that you will apply to the Lambda function.
👉 Attach the IAM policy to an IAM role
To apply `lambda-apigateway-dynamodb-policy` to a Lambda function, you first have to attach the policy to an IAM role.
1. To create a new role and attach `lambda-apigateway-dynamodb-policy` to the role:
Navigate to the IAM console and choose Roles in the navigation pane. Choose Create role.
2. Choose AWS service and then choose Lambda. Choose Next: Permissions.
3. On the Attach permissions policies page, type `lambda-apigateway-dynamodb-policy` in the Search box. Choose `lambda-apigateway-dynamodb-policy` from the list of returned search results, and then choose Next: Review.
4. On the Review page, type `lambda-apigateway-dynamodb-role` in the Role name box and an appropriate description, and then choose Create role.
You have attached the policy you created earlier to a new IAM role, which in turn can be used by a Lambda function.
## ➡️ Step 3 - Create Lambda Function
To create the function
1. Go to the Lambda console
2. Click "Create function" in AWS Lambda Console
3. Select "Author from scratch". Use name `GamingSearchEngine` , select Python 3.8 as Runtime. Under Permissions, select "Use an existing role", and select `lambda-apigateway-dynamodb-role` that we created, from the drop down
4. Click "Create function"
5. Replace the existing sample code with the following code snippet and click "Deploy"
👉 Python CRUD Operation Code
```python
import boto3
import json
def lambda_handler(event, context):
# Create a DynamoDB client
dynamodb = boto3.resource('dynamodb')
# Retrieve the partition key value from the event
partition_key_value = event['Name of Game']
# Get the DynamoDB table
table = dynamodb.Table('GamingSearchEngine')
# Call the get_item operation
response = table.get_item(
Key={
'Name of Game': partition_key_value
}
)
# Process the response
if 'Item' in response:
item = response['Item']
# Do something with the item
item_data = json.loads(json.dumps(item))
# Convert item to JSON-compatible format
return {
'statusCode': 200,
'body': item_data
}
else:
return {
'statusCode': 404,
'body': 'Item not found'
}
```
## ➡️ Step 4 - Test Lambda Function
Let's test our newly created function. Testing this function will make sure we will receive gaming information back when we search for the game.
Get Information for Minecraft Game
1. Click the arrow on the "Test" button and click "Configure test events"
2. Name the event "Test" then Paste the following JSON into the event. Afterwards, click "Save" to create.
```json
{
"Name of Game" : "Minecraft"
}
```
3. Click "Test", and it will execute the test event. You should see the output in the console
## ➡️ Step 5 - Create API and Deploy API
To create the API
1. Go to API Gateway console
2. Click "Create API"
3. Scroll down to REST API and click "Build"
4. Make sure to select "New API" and Give the API name as `GamingSearchEngine`, keep everything as is, click "Create API"
5. Each API is collection of resources and methods that are integrated with backend HTTP endpoints, Lambda functions, or other AWS services. Typically, API resources are organized in a resource tree according to the application logic. At this time you only have the root resource, but let's add a resource next
Click on slash `/`, then click Create method"
6. Select "POST" in the dropdown and click the check button
7. Keep the integration type as Lambda Function. Make sure the Region is the same as your Lambda Function and DynamoDB (It should be because of the default settings).
8. In Lambda Function text bar type in `GamingSearchEngine` and select that lambda function we created in the previous step. Click "Create method.
9. Click Enable CORS.
10. Make sure `POST` is checked under "Methods" then click "Save"
11. Click the "Deploy API" button.
12. Click deployment stage, select "New Stage", Stage name `dev` then click "Deploy"
13. Keep your Invoke URL handy. We will use this in the next step.
## ➡️ Step 6 - Update the HTML Code and Save It
1. Copy the HTML code shown below
```html
Gaming Search Engine
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}
#container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 32px;
text-align: center;
margin: 0;
}
form {
text-align: center;
margin-top: 40px;
}
input[type="text"] {
width: 400px;
height: 36px;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #FFA500;
border: none;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
pre {
margin-top: 40px;
background-color: #f2f2f2;
padding: 20px;
white-space: pre-wrap;
word-wrap: break-word;
}
Gaming Search Engine
const form = document.getElementById('apiForm');
const responsePre = document.getElementById('response');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
fetch(form.action, {
method: form.method,
body: JSON.stringify(Object.fromEntries(formData)),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
responsePre.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
responsePre.textContent = 'An error occurred: ' + error.message;
});
});
```
2. Paste it to Notepad (for windows), TextEdit (for apple), or a source code editor like Visual Studio Code (download the software from a Google Search)
3. Update the "INVOKE URL" in the code with your REST API Invoke URL from API Gateway in the previous step.
Insert your Invoke URL here. Keep the quotations around your link as well.
4. Save the file as `index` of html type. Thus, you may have to save it as `index.html`.
5. Turn the file into a "compressed (zipped) folder". Again, keep the name as `index`
## ➡️ Step 7 - Create Website using Amplify
1. Go to the AWS Amplify console
2. Click "GET STARTED" and then click get started for "Host your web app" under "Amplify Hosting"
3. Click "Deploy without Git provider" option then click "Continue"
4. Name the app `GamingSearchEngine`, Name the environment `dev`, then drag and drop the zipped `index` file that was saved in the previous step. Then click "Save and deploy".
5. Once deployed, click the domain URL. You should be directed to the website we created via the HTML code.
Deployement Successufully Completed - 🌐 LIVE HTML Website
## ➡️ Step 8 - Test the Webpage
Type in "Call of Duty Warzone" and you should receive a response back. Feel free to test the other game names as well (Must type the names of them exactly how they are in DynamoDB - Yes, Case Sensitive).
## 💰 Cost
All services used are eligible for the AWS Free Tier. However, charges will incur at some point so it's recommended that you shut down resources after completing this tutorial.
## 🧹 Clean Up
🗑️ Delete the Web Hosting App - Amplify Console
🗑️ Delete the REST API - API Gateway Console
🗑️ Delete the Lambda Function - Lambda Console
🗑️ Delete the Database - DynamoDB Console