This article is co-authored with @siosanac
Introducing Amazon Web Services Lambda
What is AWS Lambda? 🤔
- AWS Lambda is a serverless computing service made by Amazon Web Services (AWS). It lets you run code without managing the servers~! Lambda automatically scales depending on the number of incoming requests, and you pay only for the compute time used only.
How does it work? 💡
- AWS Lambda is a serverless, event-driven compute service that lets you run code in response to events without managing servers. You write single-purpose functions, upload them, and configure triggers.
Why use AWS Lambda?
- Now by now you’re still probably not convinced about how lambda can help you 😔. Here are the reasons why many developers chose to use Lamda for building modern cloud-based apps.
No Server Management!
- You don’t need to waste your time by maintaining, provisioning, or patching your servers. AWS handles all of the infrastructure’s scaling and availability.
Cost-Efficiency
- With this service, you only pay for what you use. That means there will be no charge when you don’t use the utilities. You can be charged for every millisecond of runtime. Lastly, if you need even more resources, Lambda can scale automatically if you want to.
Pricing for Lambda
Lambda has a free tier if you want to experiment with Lambda, it allows you to have 1 million requests per month and this will reset for the other month and then it gives you 400, 000 GB-seconds of computer time per month.
Now if you’re done with experimenting, and you want to get serious the request charge is $0.20 per 1 million requests, Computing charge is $0.0000166667 per GB-second. There’s also an option where you can “rent” a fixed amount of resources it’s called the Ephemeral Storage.
Creating an AWS Account
If you still do not have an Amazon Web Services account, go to this article for a step-by-step guide to start.
Creating a Lambda Function
Now let’s start on creating a Lambda Function! Navigate your AWS Console and search for Lambda in the search bar.
Next, click on the “Create Function” button.
After that, you can name your function anything you want. You can pick any language you prefer in the Runtime and set the Architecture as is, which is x86_64. Scroll down and let’s create our function.
Once you have created your function, this will look something like this.
Scroll down and you can see that there is a Code source. This is where you will put your code snippet and perform operations for your website.
Default Code:
export const handler = async (event) => {
// TODO implement
const response = {
statusCode: 200,
body: JSON.stringify('Hello from Lambda!'),
};
return response;
};
This is still incomplete, for this lambda function to do anything, you must add a trigger first.
Adding a Trigger
Scroll back up and press the add trigger button. For the trigger configuration, select the API Gateway and create a new API. Make sure that it is an HTTP API and configure the security to be open. For now, let the additional settings be on default and add your trigger.
Once you have created your function, this will look something like this.
Once you have added your trigger, scroll down and on the left-hand side, click Trigger, and you should see that you have an API endpoint with a corresponding URL.
If you go to that URL, you might see something like this.
You can see the “Hello from Lambda!” printed out on your page. This is essentially a static website at its simplest level. What is important here is that we have created a trigger for the API gateway so that our Lambda function is exposed to the Internet. Lambda functions can't be called directly via HTTP. API Gateway gives you a RESTful or HTTP endpoint to trigger your Lambda.
Remember:
API Gateway acts like a "bridge"
- Static Website: Your frontend, hosted on S3 or other static hosting
- API Gateway: The public HTTP endpoint your website can call
- Lambda Function: The backend logic, triggered when API Gateway receives a request
Now let’s create our static website with HTML and CSS.
Building the HTML and CSS of the Static Website
Go back to your Lambda Function.
On the bottom left of your browser, click on Code so that you can modify the default code given.
Replace the default code with this code snippet:
export const handler = async (event) => {
const html = `
Writers of This Article
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
background-color: #1e1e1e;
color: #d4d4d4;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
}
h1 {
color: #0f0;
font-size: 2rem;
margin-bottom: 2rem;
border-bottom: 2px solid #3c3c3c;
padding-bottom: 0.5rem;
text-align: center;
}
.cards-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
width: 100%;
max-width: 1200px;
}
.terminal-loader {
border: 0.1em solid #333;
background-color: #1a1a1a;
color: #0f0;
font-family: "Courier New", Courier, monospace;
font-size: 1em;
padding: 1.5em 1em;
width: 100%;
max-width: 30em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.terminal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1.5em;
background-color: #333;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 0 0.4em;
box-sizing: border-box;
}
.terminal-controls {
float: right;
}
.control {
display: inline-block;
width: 0.6em;
height: 0.6em;
margin-left: 0.4em;
border-radius: 50%;
background-color: #777;
}
.control.close { background-color: #e33; }
.control.minimize { background-color: #ee0; }
.control.maximize { background-color: #0b0; }
.terminal-title {
float: left;
line-height: 1.5em;
color: #eee;
}
.text {
display: inline-block;
white-space: nowrap;
overflow: hidden;
border-right: 0.2em solid green;
animation:
typeAndDelete 4s steps(11) infinite,
blinkCursor 0.5s step-end infinite alternate;
margin-top: 1.5em;
}
.text-1 {
display: block;
white-space: normal;
margin-top: 0.5em;
color: #d4d4d4;
}
@keyframes blinkCursor {
50% {
border-right-color: transparent;
}
}
@keyframes typeAndDelete {
0%, 10% { width: 0; }
45%, 55% { width: 10em; }
90%, 100% { width: 0; }
}
@media (max-width: 768px) {
.text {
white-space: normal;
animation: none;
border-right: none;
}
.terminal-loader {
width: 100%;
}
}
Writers of This Article
Writer 1:
Cerdic Siosana...
Level: 2nd year BSCS
Hobbies: Writing, Coding, Gaming
Motto:
You lost at the moment
you decided to quit.
Writer 2:
Charisse Lorejo...
Level: 1st year BSCS
Hobbies: Drawing, Coding, Driving
Motto:
Yesterday is history,
tomorrow is a mystery,
but today is a gift.
That is why it is called the present.
- Master Oogway
`;
return {
statusCode: 200,
headers: {
'Content-Type': 'text/html',
},
body: html,
};
};
Enter fullscreen mode
Exit fullscreen mode
After that, deploy the changes. If you go back to the same URL and refresh the website. It should display our new and improved website.There you go! A step-by-step guide to creating a static website using AWS Lambda!
Conclusion
AWS Lambda is a great beginner tool for you to explore Amazon Web Services. There are a lot more that you can use AWS Lambda aside from creating a static website. Moreover, you can also explore other tools that AWS has to offer, like functions for you to run when a trigger is activated by other AWS services–NO SERVERS NEEDED and also technologies like Elastic Cloud Compute(EC2) for servers, Amazon Simple Storage Service (S3) for storage, and many more waiting for you to be discovered!
Sources
Serverless Computing - AWS Lambda
How to Make a Serverless Website with AWS Lambda (for free)
Beginners Guide To Building a Serverless Website with AWS Lambda and API Gateway
How to create a FREE AWS account and understand the Free Tier: A beginner's guide
