Serverless on AWS
A 'simple' React Web Application making use of three AWS services
Spencer Carver
June 21, 2018
Before We Start...
- Amazon loves to get people hooked on their ecosystem. They publish a wide variety of tutorials and examples that cover a much large range of features than what you're about to get
- Example: https://aws.amazon.com/blogs/mobile/react-serverless-starter-application-with-one-click-aws-deployment-and-hosting/
Today
- Much smaller version of the same thing that I basically hacked together in 2 days after realizing the project I wanted to do wouldn't be ready in the time
- Takes advantages of the following AWS Services:
- S3
- Lambda (potentially unnecessary for very simple site)
- API Gateway
[Aside] Paradar
A quick aside into the project I was planning to build as a serverless web app
Public API:
https://data.cityofnewyork.us/City-Government/NYC-Permitted-Event-Information/tvpp-9vvx
... And now back to our regularly scheduled program
Outline
- Making the App
- Local Development (Build The App)
- S3 (Host the Assets)
- Lambda (Setup the Template)
- API Gateway (Configure the Router)
- Running Example
- Conclusion
- Cost
- Application
Local Build
- Create your project - https://github.com/facebook/create-react-app
- Build locally to get your asset files
- create-react-app doesn't do anything with server rendering, so your actual HTML will be very minimal (set this aside):
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>AWS Serverless Demo</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
<script type="text/javascript" src="{ !!! S3 URL TO BE DETERMINED !!! }">
</script>
</body>
</html>S3
- Upload Required assets via S3 Console
- Make sure to set permissions to Public!
- Paste the file Link back into the template HTML
Lambda
API Gateway (1/3)
API Gateway (2/3)
API Gateway (3/3)
- And then Publish!
Example
EC2
-
Hourly prices range from $0.011/hour to $0.27/hour ($94/year to $2367/year)
- Leaving an EC2 instance running with no node active on it cost me $44.14 / month
Serverless
- Lambda is free up to 1 million executions a month, $0.20 per 1 million requests after
-
S3 is $0.023 / GB
-
Our bundle is 2mb
-
- API Gateway is $3.50 / million requests, plus data transfer
- Total is expected to run me about $1.35/month
Cost*
* I didn't space this out enough to get anything other than an estimate for the Serverless solution
Application
- Good for an entirely client-side app (Reg Front-End)
- API Gateway allows a variety of configurations on a per-endpoint and per-call-type basis
- Swagger.io common format can be shared between other applications with relative ease
- Can even write static responses directly into config
- Can't server-side render anything too complicated
- Lots of moving parts when things are split across hosting services, difficult to maintain (maybe cli tools work better for this, I haven't tried)