What i learned creating a serverless portfolio with nextjs, graphql and serverless framework
This blog post is about how to setup your new portfolio for 2018 on some of the latest technology in the javascript ecosystem paired with aws lambda. My high-level requirements for creating my new portfolio page were:
- easy + cheap to host
- react in the frontend
- server-side-rendering for better onpage SEO
- slick design
- graphql endpoint to provide an api for the features on the page
In the following sections i will talk about my learnings for cost, server side rendering with nextjs, graphql and serverless, the serverless framework in general and aws in general. You can find the final website here, and the source for it here if want to dive straight into the code.
Cost
First i considered to get a VPS server for $2.50 a month, after some more thinking i figured i would have to setup docker and a proper deployment workflow and keep the VPS secure plus it seemed overkill to just spin up an dedicated VPS for just a little dynamic nodejs portfolio site.
After some more digging i noticed that AWS offers 1 mio. free lambda requests for every aws user + 3.2 mio. seconds lambda compute time for 128 mb of ram even if you are not on free tier anymore. That seemed to good to be true…
Doing the calculation for my setup i end up with:
480,000 request for free assuming every call is done with 256 mb RAM and takes about 300ms
subtract 21600 * 2 requests for keeping the lambda hot (to avoid cold starts) (cronjob every 5mins)
— — — — — — — — — — — — — — — -
= 458,400 requests left for real users until i need to pay for the requests and compute time
Fixcosts per month => $0.50 route 53 / To store your zone info on AWS, they charge you $0.50 / month fixed
Flexible costs per month => depending on traffic, but roughly $0.16 per 10000 requests
Overall i think i’m getting away cheaper then $2.50 a month, which i would have payed if i would have picked for the VPS option.
Serverside rendering with nextjs
To make the fusion of aws lambda and nextjs work i used aws-serverless-express which is kind of a bridge between aws api-gatewate events and an nodejs express server.
A problem was that nextjs uses an async function to hook routes in the express server, after scanning the source code i noticed that routes used for production can actually be hooked sync. I forked nextjs and now it works like a charm.
Apart from the problem stated above is nextjs super straight forward to use. To change the asset prefix to another domain when i installed cloudfront as a CDN i just had to adjust the config slightly.
Serverless and graphql
To make your apollo graphql server is simple with the package apollo-server-lambda provided by apollo.
I didnt run into any trouble apart from CORS requests which where not properly set on OPTION requests, enabling the CORS again in the AWS console did the trick, see picture below:
Serverless framework in general
- easy to use, though you still need to setup some things like the route 53 zone, s3 buckets, cloudfront by hand as well, which is not perfect but acceptable for such a small project
- with the serverless-domain-manager plugin its super easy to map the api gateway urls to custom domains
- figuring out how much memory your lambda function needs is not that easy, the reporting in the logs is a bit off and you will likely end up over-provisioning
- the deploy is slow (5min +) if your project is big / has a lot of dependencies -> TODO: need to try the serverless-webpack plugin and see if things improve
AWS
- Billing reporting got over the years very good and its easy to spot what charges you may receive at the end of the month, the break down of the charges is also very clear
- You can also setup billing threshold notifications, to get notified if charges may get out of hand
- Its easy to setup Cloud-watch alerts for invocation thresholds of lambda functions which helps to get notified in case of crazy spikes or abuse
- Cold starts of lambda functions can be really slow (1 sec. +), better have a periodic cronjob which pings your functions to keep them hot and fast
