DEV Community: aswin raj

Build a Serverless Web Application using Generative AI

aswin raj — Tue, 25 Feb 2025 04:50:07 +0000

We are going to use AWS Amplify to build a serverless web application powered by Generative AI using Amazon Bedrock and the Claude 3 Sonnet foundation. Where user can enter a list of ingredients, and the application will generate delicious recipes based on the input ingredients. The application includes an HTML-based user interface for ingredient submission and a backend web app to request AI generated recipes.

APPLICATION ARCHITECTURE

IMPLEMENTATION

STEP 1: Create a new React application or you can use Vite to create a React application.

To create it you these command.
npm create vite@latest ai-recipe-generator -- --template react-ts -y
cd ai-recipe-generator
npm install
npm run dev

STEP 2: Initialize a GitHub repository name it as ai-recipe-generator and make the repository as public. Then push of the application to the repository(ai-recipe-generator) by using these commands.

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:/ai-recipe-generator.git
git branch -M main
git push -u origin main

STEP 3: Install the Amplify packages, go to the terminal and the run the command.
npm create amplify@latest -y

After installing amplify package push the changes to the GitHub repository by using
git add .
git commit -m 'installing amplify'
git push origin main

STEP 5: Deploy your app with AWS Amplify.

Go to AWS Amplify in the AWS console and press the create app in the top right corner.

Select GitHub and click Next.

Next, choose the repository and main branch you created earlier. Then select Next.

Leave the default build settings, and select Next.

Review the inputs selected, and choose Save and deploy.

AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com, and on every git push your deployment instance will update. It may take up to 5 minutes to deploy your app.
Once the build completes, select the Visit deployed URL button to see your web app up and running live.

STEP 6: Setup your Amplifu Auth
On your local machine, navigate to the ai-generated-recipes/amplify/auth/resource.ts file and update it with the following code. Then, save the file.

import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
loginWith: {
email: {
verificationEmailStyle: "CODE",
verificationEmailSubject: "Welcome to the AI-Powered Recipe Generator!",
verificationEmailBody: (createCode) =>
Use this code to confirm your account: ${createCode()},
},
},
});

STEP 7: Setup the Amazon Bedrock Model Access

Sign in to the AWS Management console in a new browser window, and open the AWS Amazon Bedrock console at https://console.aws.amazon.com/bedrock/. Verify that you are in the N. Virginia us-east-1 region, and choose Get started.
In the Foundation models section, choose the Claude model.
Scroll down to the Claude models section, and choose the Claude 3 Sonnet tab, and select Request model access.
In the Base models section, for Claude 3 Sonnet, choose Available to request, and select Request model access.
On the Edit model access page, choose Next.
On the Review and Submit page, choose Submit.

STEP 7: Create a Lambda function for handling requests.
On your local machine, navigate to the ai-recipe-generator/amplify/data folder, and create a file named bedrock.js.
Then, update the file with the following code:

export function request(ctx) {
const { ingredients = [] } = ctx.args;
const prompt = Suggest a recipe idea using these ingredients: ${ingredients.join(", ")}.;
return {
resourcePath: /model/anthropic.claude-3-sonnet-20240229-v1:0/invoke,
method: "POST",
params: {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
anthropic_version: "bedrock-2023-05-31",
max_tokens: 1000,
messages: [
{
role: "user",
content: [
{
type: "text",
text: \n\nHuman: ${prompt}\n\nAssistant:,
},
],
},
],
}),
},
};
}
export function response(ctx) {
const parsedBody = JSON.parse(ctx.result.body);
const res = {
body: parsedBody.content[0].text,
};
return res;
}

STEP 8: Add Amazon Bedrock as a data source.
Update the amplify/backend.ts file with the following code. Then, save the file.

import { defineBackend } from "@aws-amplify/backend";
import { data } from "./data/resource";
import { PolicyStatement } from "aws-cdk-lib/aws-iam";
import { auth } from "./auth/resource";
const backend = defineBackend({
auth,
data,
});
const bedrockDataSource =
backend.data.resources.graphqlApi.addHttpDataSource(
"bedrockDS",
"https://bedrock-runtime.us-east-1.amazonaws.com",
{
authorizationConfig: {
signingRegion: "us-east-1",
signingServiceName: "bedrock",
},
}
);
bedrockDataSource.grantPrincipal.addToPrincipalPolicy(
new PolicyStatement({
resources: [
"arn:aws:bedrock:us-east-1::foundation-model/anthropic.claude-3- sonnet-20240229-v1:0",
],
actions: ["bedrock:InvokeModel"],

})
);

STEP 9: Setup Amplify Data.

On your local machine, navigate to the ai-recipe-generator/amplify/data/resource.ts file, and update it with the following code. Then, save the file.

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
BedrockResponse: a.customType({
body: a.string(),
error: a.string(),
}),

askBedrock: a
.query()
.arguments({ ingredients: a.string().array() })
.returns(a.ref("BedrockResponse"))
.authorization((allow) => [allow.authenticated()])
.handler(
a.handler.custom({ entry: "./bedrock.js", dataSource: "bedrockDS" })
),
});

export type Schema = ClientSchema;

export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: "apiKey",
apiKeyAuthorizationMode: {
expiresInDays: 30,
},
},
});

Open a new terminal window, navigate to your apps project folder (ai-recipe-generator), and run the following command to deploy cloud resources into an isolated development space so you can iterate fast.

npx ampx sandbox

Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message and the amplify_outputs.json file will be generated and added to your project.

STEP 10: Install the Amplify libraries
Open a new terminal window, navigate to your projects root folder (ai-recipe-generator), and run the following command to install the libraries.

npm install aws-amplify @aws-amplify/ui-react

STEP 11: Style the App UI.
On your local machine, navigate to the ai-recipe-generator/src/index.css file, and update it with the following code to center the App UI. Then, save the file.

:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color: rgba(255, 255, 255, 0.87);

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

max-width: 1280px;
margin: 0 auto;
padding: 2rem;

}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

.box:nth-child(3n + 1) {
grid-column: 1;
}
.box:nth-child(3n + 2) {
grid-column: 2;
}
.box:nth-child(3n + 3) {
grid-column: 3;
}

Update the src/App.css file with the following code to style the ingredients form. Then, save the file.

.app-container {
margin: 0 auto;
padding: 20px;
text-align: center;
}
.header-container {
padding-bottom: 2.5rem;
margin: auto;
text-align: center;
align-items: center;
max-width: 48rem;

}
.main-header {
font-size: 2.25rem;
font-weight: bold;
color: #1a202c;
}
.main-header .highlight {
color: #2563eb;
}
@media (min-width: 640px) {
.main-header {
font-size: 3.75rem;
}
}

STEP 12: Implement the UI.

On your local machine, navigate to the ai-recipe-generator/src/main.tsx file, and update it with the following code. Then, save the file.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Authenticator } from "@aws-amplify/ui-react";
ReactDOM.createRoot(document.getElementById("root")!).render(
React.StrictMode
Authenticator
App
/Authenticator
/React.StrictMode
);

Open the ai-recipe-generator/src/App.tsx file, and update it with the following code. Then, save the file.

import { FormEvent, useState } from "react";
import { Loader, Placeholder } from "@aws-amplify/ui-react";
import "./App.css";
import { Amplify } from "aws-amplify";
import { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
import outputs from "../amplify_outputs.json";

import "@aws-amplify/ui-react/styles.css";

Amplify.configure(outputs);

const amplifyClient = generateClient({
authMode: "userPool",
});

function App() {
const [result, setResult] = useState("");
const [loading, setLoading] = useState(false);

{result}

)}
);
}

export default App;

Open a new terminal window, navigate to your projects root directory (ai-recipe-generator), and run the following command to launch the app:

npm run dev

Select the Local host link to open the Vite + React application.
Choose the Create Account tab, and use the authentication flow to create a new user by entering your email address and a password. Then, choose Create Account.
You will get a verification code sent to your email. Enter the verification code to log in to the app.
When signed in, you can start inputting ingredients and generating recipes.
In the open terminal window, run the following command to push the changes to GitHub:

git add .
git commit -m 'connect to bedrock'
git push origin main

Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at https://console.aws.amazon.com/amplify/apps.
AWS Amplify automatically builds your source code and deployed your app at https://...amplifyapp.com, and on every git push your deployment instance will update. Select the Visit deployed URL button to see your web app up and running live.

STEP 12: Clean up all resources.

Introduction and Creation of 3-Tier Architecture by using AWS

aswin raj — Fri, 24 Jan 2025 05:26:08 +0000

In modern cloud computing, building a robust and scalable architecture is key to ensuring seamless performance for web applications. The image above represents a classic 3-Tier Architecture on AWS, designed to deliver high availability, security, and fault tolerance.

Components that are used:

1. Internet Gateway

Purpose: Facilitates communication between the internet and resources within the Virtual Private Cloud (VPC).
Functionality:Allows public-facing components (e.g., web servers) to receive and send traffic from/to the internet.
Acts as an entry point for incoming traffic and an exit point for outgoing traffic.

2. Elastic Load Balancer (ELB):

Purpose: Distributes incoming traffic across multiple Amazon EC2 instances in the web tier.
Types Used Here: Application Load Balancer or Classic Load Balancer (based on the traffic type).
Functionality:Enhances application availability and fault tolerance by balancing load across multiple instances in different Availability Zones (AZs).
Automatically adjusts to traffic changes and ensures no single instance is overloaded.

3. Amazon EC2 Instances:

Purpose: Provide compute power for running applications in both the web tier and the app tier.
Functionality:Web Tier: Hosts web servers that handle HTTP/HTTPS traffic and serve user-facing content.
App Tier: Processes application logic securely, isolated from the public internet.
Deployment: In the Web Tier, instances are deployed in public subnets for internet-facing access.
In the App Tier, instances are deployed in private subnets for security and internal communication.

4. Amazon Aurora:

Purpose: Managed relational database engine designed for high performance and scalability.

Key Features:

Primary DB: Handles write operations and provides a highly secure environment for storing application data.
Read Replica: Optimizes performance by offloading read-heavy workloads, ensuring scalability and reduced latency.
Automatic failover and self-healing capabilities enhance reliability.

5. Subnets:

Public Subnet:

Contains the resources in the Web Tier.
Associated with the Internet Gateway for direct internet access.

Private Subnet:

Hosts resources in the App Tier and Database Tier.
Isolated from direct internet access, ensuring data and application logic are secure.

6. Virtual Private Cloud (VPC):

Purpose: Provides an isolated and secure network environment for resources.

Functionality:

Allows segmentation of tiers (Web, App, Database) into subnets.
Ensures communication between resources is secure and tightly controlled.

7. Availability Zones (AZs):

Purpose: Geographically distinct data centers that ensure high availability and fault tolerance.

Usage:

Resources are distributed across two AZs, minimizing downtime in case of hardware failures or natural disasters.

Architecture Flow

Internet Gateway receives traffic from the internet.
Traffic is directed to the Elastic Load Balancer (ELB), which distributes requests to Amazon EC2 instances in the Web Tier.
Web Tier EC2 instances forward application logic processing to the App Tier EC2 instances hosted in private subnets.
The App Tier interacts with the Database Tier (Amazon Aurora) for data storage and retrieval.
Aurora Read Replica handles read-heavy workloads to improve scalability and reduce latency.

Implementation:

Go to the github and download the aws-three-tier-architecture-workshop code from that.

After downloading go to the AWS console and create a S3 bucket.

Then create a IAM role by giving the policies,

AmazonS3ReadOnlyAccess
AmazonSSMManagedInstanceCore

After creating IAM role go to the VPC and create one.

Then create 6 subnets, 3 subnets for availability zone 1, and 3 subnets for availability zone 2.

Both availability zones have one public subnet and two private subnets.

Create Internet Gateway

Create two NAT Gateway because there are two Availability zones and connect both NAT Gateway with the public subnets.

After creating NAT Gateway create public Route Tables and connect it with the internet gateway.

After connecting the internet gateway with the route table for the AZs1 then connect the public subnet with the route table.

Then again create a route table for the private subnets for the AZs1
and connect both the internet gateway and the private subnet.

After completing that go to the security group and create six security groups

EC2 + S3 + IAM

aswin raj — Thu, 23 Jan 2025 10:52:58 +0000

Step 1: Launch a EC2 instance in your console.

Click Launch instance.

Step 2: Give a instance name to your instance.

Step 3: Select t2.micro instance type.

Step 4: Create a new key pair for your instance.

Click Launch instance.

Step 4: After creating your instance click your instance and go to the security and change your inbound rules for your instance.

Change the custom ip to my ip address.

And click save rules.

Step 5: Go to the putty app, if you are not downloaded then download it.

If your key pair is .ppm file then change it to private key with the help of puttygen.
After converting it go to the putty and enter the host ip address. And then go to the "SSH" which is in the category then click "Auth" in that click "Credentials". In that enter your private key file for authentication. And then click open.

Step 6: Your Terminal gets opened in that just create a file and add some contents in it.

Command to create a file

cat < "file_name.txt"

To view the content in the file

cat "file_name.txt"

Step 7: Go to the AWS console and then go to the IAM->Roles. Create a role with "S3fullAccess" policy.

Step 8: Go to EC2 instance and click actions and then click security and go the modify IAM role and change the IAM role.

Step 7: Go to the terminal, we need to put the created file in the AWS S3 so enter the command

aws s3 cp "file_name.txt s3://"bucket_name"

If there is no bucket in the S3 then create it by using the command.

aws s3 mb s3://"bucket_name"

After creating it upload the created file in the bucket by using the command.

aws s3 cp "file_name.txt s3://"bucket_name"

After uploading the files go check your AWS console to verify it.

Completing every steps delete or terminate everything that you have created(EC2, S3, IAM).

Hosting a Static Website by using S3 and CloudFront

aswin raj — Thu, 23 Jan 2025 09:04:24 +0000

Steps to Host Static Website and deploying a react file in it.

Step 1: Download the node.js from the official website. If it is preinstalled check that if it is there or not.

Commands to check:

node -v
npm -v

Step 2: Create a React file using the command "npm create vite@latest".

Step 3: After creating the file run the commmad

cd "file_name"
npm install _
_npm run dev

After running these code there will be a url run that in the local machine.You will get the output

Step 4: Create a S3 Bucket in the AWS
Step 4.1: Go to S3
Step 4.2: Click Create Bucket
Step 4.3: Give a unique name to your bucket and block public access settings for the bucket and enable the bucket versioning

Step 4.4: Create a policy for your bucket

Step 4.5: Add the files and the folders in the bucket

Step 5: Go to the CloudFront and create a distribution and place the origin.

Step 6: Copy the domain name and run it you will get the web application which you created

Link: http://714022202009-aswin.s3-website.ap-south-1.amazonaws.com

Distribution Domain Name: https://d3fwz77yejliam.cloudfront.net

After completing everything delete both the S3 and the cloudfront

Amazon CloudFormation

aswin raj — Wed, 22 Jan 2025 17:32:01 +0000

1.Service Overview:

Amazon CloudFormation

Logo:

One-Line Description:

Automate and Manage AWS Infrastructure with Code.

2.Key Features:

Infrastructure as Code (IaC): Use JSON or YAML templates to define and provision AWS resources automatically.
Automation: CloudFormation can automate the provisioning of application resources, allowing users to build and rebuild applications without manual actions.
Stack Management: Organize resources as a single unit (stack) for creation, updates, and deletions.

Technical Specifications:

Template Format: JSON and YAML.
Resource Coverage: Over 200 AWS services supported, including EC2, RDS, S3, and Lambda.

3.Use Cases:

Real-Life Applications:

Web Application Deployment: Automate provisioning of web servers, databases, and load balancers.
Multi-Region Disaster Recovery: Simplify replication of critical infrastructure across AWS regions.
DevOps Automation: Integrate with CI/CD pipelines for continuous deployment.

4.Pricing Model:

Pricing Overview:

Amazon CloudFormation is a free service. You only pay for the AWS resources created or modified using your CloudFormation templates.

Examples of Costs:

EC2 instances, storage volumes, and RDS databases are billed based on their respective usage.

5.Comparison with Similar Services:

AWS CloudFormation is an Infrastructure as Code (IaC) service that manages AWS resources. Similar services include Terraform, Azure Resource Manager (ARM), and Ansible.

Terraform:

Support:

Terraform supports multi-cloud environments, including AWS, Azure, and Google Cloud.

Syntax:

Terraform has a user-friendly syntax that uses HashiCorp Configuration Language (HCL) or JSON.

Azure Resource Manager (ARM):

Purpose: ARM templates manage infrastructure as code for Azure, similar to CloudFormation templates for AWS.
Format: ARM templates use JSON format.

Ansible:

Configuration drift:

Ansible can identify and fix configuration drift in infrastructure resources.

Playbooks:

Users can run Ansible playbooks regularly to ensure the required infrastructure state is maintained.

6.Benefits and Challenges:

Advantages:

Automates infrastructure provisioning and reduces manual errors.
Deep integration with AWS services ensures consistent and optimized resource creation.
Drift detection ensures operational stability by identifying mismatches in deployed resources.
No additional cost for using the service.

Limitations or Challenges:

Steeper learning curve for writing JSON/YAML templates.
Limited portability to non-AWS platforms compared to tools like Terraform.

7.Real World or Case Study:

Case Study: Coca-Cola

Coca-Cola uses Amazon CloudFormation to deploy and manage telemetry systems for its global vending machines.

Impact:

Automated deployment reduced manual setup times.
Scalable infrastructure ensured rapid expansion to new regions.