Hacktitude - AWS Serverless Microfrontend Solution using CloudFront/S3 and Edge Lambda

[Sankalpa Fernando]

Hello Everyone,

I would love to share my progress with the project so far. As suggested by the Mentors I was asked to refer the AWS documentation. I referred to the documentation and YouTube throughout the past week. I got some basic ideas about the following topics.

-- AWS Serverless

-- S3 Buckets 

-- AWS API Gateway

-- AWS Lambda functions

-- AWS DynamoDB

-- AWS CloudFront

-- Edge Services

I started building a RESTful API with Node and Express JS as a practice project and to solidify the API concepts. That's all I have to share for now. Thank you.

[Mahesh Samarasinghe]

This is very good Sankalpa. 

Next, there are several things you need to do.

Create 3 separate landing pages using basic HTML/CSS, Angular and React. You don't have to worry about the content and aesthetics of these landing pages.

Refer to AWS CloudFormation and check how to write a cloud formation script to create an S3 bucket with it, make it public and enable versioning for the S3 bucket.

Meanwhile, refer to micro frontend concept as well.

[Sankalpa Fernando]

Hi Mahesh, I have created the pages. Here's the PR. I would love to know if there are any mistakes. FYI: I have created an AWS Educate account as well to learn more about CloudFront, S3 and lambda. Waiting for further instructions Thank you. 

[Sankalpa Fernando]

UPDATE: I created an S3 bucket using the CloudFormation template. 

Here's a snippet, 

[Sankalpa Fernando]

Hello Everyone,

This is my latest update on the project. I had two calls with my mentors in the past week. As suggested by them I started to learn about serverless concepts with AWS. I created a simple web page to understand serverless concepts. There are two versions of the website where users can switch between them without reloading or changing the URL. All this with a simple button click. Here is the link to the website.

I used two S3 buckets to host my two websites. (version 1 and version 2).

I used the CloudFront and Lambda@edge to achieve the above functionality.

I think I gained so much knowledge on CDNs, Lambda functions, Lambda@edge and CloudFormations scripts through this.

I think my next task would be to build such a simple website using a CloudFormation template.

Resources:

[1] https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-s3.html#scenario-s3-bucket

[2] https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-cloudfront.html

[3] AWS reInvent 2019, https://www.youtube.com/watch?v=9IYpGTS7Jy0

[4] Serving Multiple Websites with AWS CloudFront & Lambda at Edge, https://www.youtube.com/watch?v=Cz0unTbOfgo&t=1s

[Sankalpa Fernando]

[UPDATE] I created a part of the solution using a cloudFormation template. Need to attach a lambda function also. template used can be found here, 

[Sankalpa Fernando]

I was able to attach the lambda function to it. Still have to write the function to take external S3 bucket links.

https://github.com/0sf/aws-cloudformation-templates/tree/master/aws-sample-website-template/phase2

[Sankalpa Fernando]

Hello Everyone,

Posting an update. After a call with my mentors, I was able to sort out some of the problems I had with the template.

--> Attaching cloudfront trigger with cloudformation script

--> hosting lambda function inside an S3 bucket

--> Make template more readable.

I think I was able to solve some of those problems. link is here for the template.

Right now I have to provide the Lambda code bucket name and update the s3 bucket values for the variable inside the function manually. Also, cloudfront distribution's origin is not the static endpoint of s3 bucket. Hope to solve these problems soon.

[Sankalpa Fernando]

Hello Everyone, 

Posting the last update. 

The template creates basic resources with some permission to run it. However, the lambda function doesn't behave as expected. The template can be found in the following repos.

https://github.com/0sf/aws-cloudformation-templates/blob/master/aws-severless-microfrontend/template.md

https://github.com/99xt-incubator/AWS-Serverless-Microfrontend-Solution

And I have updated with this repo my approach phase by phase. 

Thank you very much for this opportunity.