DEV Community

Cover image for Serverless Technology: Static to Dynamic
Charbel El Kahwaji
Charbel El Kahwaji

Posted on

Serverless Technology: Static to Dynamic

In today's fast-paced digital era, companies require websites that have not only an attractive UI but also functionality and dynamism. A static website could be decent at first, but it may become restrictive in no time. This is where serverless technology comes into power.

So what is Serverless? Simply, it's a computing model that operates on the cloud. At its core, servers are operating obviously, but it's called "Serverless" because you do not have to worry about provisioning, maintaining, or giving whatever attention that's required to get a server up and running.

In other terms, you can develop and execute apps without having to arrange or supervise servers. Smooth scaling of the infrastructure is to be expected as this approach will handle big loads of traffic effortlessly.

Image description

The AWS architecture illustrated in the image above shows an example of serverless technology that I applied to turn a static website into a dynamic one. It involves integrating Amazon CloudFront, AWS Lambda, and Amazon API Gateway to back up the hosting features on Amazon S3.

Why was this solution required? The website was purely static, and as mentioned previously, it can become extremely limiting. We needed to create a careers page where anonymous users/visitors could apply for jobs. Note that we did not have a Sign-Up/Sign-In feature as it was not a requirement for a commercial static website.

Upon visiting the careers page on our website, Amazon CloudFront receives a request from an unauthenticated user. It will then proceed to serve the HTML, CSS, and JavaScript files from S3 to our user, but this time granting him extra abilities, as we have assigned him a temporary role, allowing him to put objects inside an S3 bucket and execute an API call by invocation. All this via the Amazon Cognito for unauthenticated identities. We need these permissions for steps 2 and 3.

Image description
This is how we're now tracking our anonymous users.

The form on our careers page requires the applicant to fill in text inputs for information like name, phone number, email, and a file input to upload their resume. The second the user clicks on submit, step 2 will be initiated, which is to upload the file to a secure and private s3 dedicated to all the resumes, and then retrieve the key of this file on upload success. The anonymous user has been granted the ability to put Objects in the s3 thanks to the role we assigned to him the moment he landed on the page.

After we retrieve the key, we assemble our data in a JSON object and proceed to step 3 where we invoke our lambda expecting this object, through the API gateway, protected by AWS WAF rate-based rule.
The lambda then proceeds to dispatch an email message to the recruitment team via SES, the email contains info about the user, what job he applied to, and the link to his resume.
The link to the resume is through the S3 bucket of the resumes, frontend by another Cloudfront and another Route 53.

Here's a resume: By leveraging this serverless approach, the fully static website became dynamic - and that's just one of many potential applications. The possibilities are unlimited.

here are several advantages that come with utilizing serverless approaches:

  1. Cost reduction through pay-as-you-go
  2. Increased scalability that adjusts automatically to meet demand.
  3. Deployed globally for improved performance with low latency.

So in general, Serverless technology did help transform static sites into dynamic ones all while enhancing their functionality, and performance and remaining cost-effective.

If you're interested in knowing how you can automate the deployment of a static website, you can read more about it here.

Top comments (0)