Author: Yue Chang (lamplighter.planet@gmail.com)

No server is easier to manage than no server.

In this article, we’ll introduce the overall concept of serverless framework in different parts, Frontend, Backend, Authentication, and Infrastructure.

Frontend (UI)

serverless instruction (1).png

First, we need an implemented frontend source code (I prefer using React). And we put the compiled static files into S3 which can store files. After doing this, the site is already public online but the url is not our domain.

Then we introduce Route 53 and CloudFront to configure the domain then it can redirect user to correct place.

A Real Example: Bunny Bill

The url with custom domain hosted by Route 53: https://bunnybill.celestialstudio.net/

The url generated by CloudFront: https://d3l8fh3s2ajw1f.cloudfront.net/

The url generated by S3: http://spica-prod.s3-website-ap-southeast-1.amazonaws.com

You would notice that the links above are all the same. Yes, they are the same. Route 53 redirects user to CloudFront, and CloudFront redirects user to S3 static page.

Cost (per month)

Route 53

$0.5 per hosted zone

CloudFront

Free:

First 1 TB of data transfer out