Serverless for Front-end Server-Side Rendering

Presentation at MANABIYA LT

SPA
https://speakerdeck.com/boiyaa/serverless-for-front-end-spa

日本語
https://speakerdeck.com/boiyaa/serverless-server-side-rendering-ja

Transcript

1. 2 0 1 8 . 3 . 2 4 M A N A B I YA S e r v e r l e s s f o r F ro n t - e n d S e r v e r- S i d e R e n d e r i n g
2. P ro f i l e • Front-end engineer at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. M o t i v a t i o n I need to consider about measuring SEO. I would like to know easy ways of server-side rendering and hosting that any low-skilled engineers such as me can do.
4. I n f r a s t r u c t u re re q u i re m e n t s f o r S S R In short, wherever Express can be run. I would like to use serverless platform because I do not want to consider about availability.
5. O p t i o n s I t r i e d • AWS stack: Lambda + API Gateway + Cloudfront • Firebase stack: Functions + Hosting
6. I n a d d i t i o n Framework for server-rendered React applications. Server-side rendering React components containing data fetching is bother. This framework makes it easier.
8. P ro c e d u re o f b u i l d i n g i n f r a s t r u c t u re 1. Create a S3 Bucket 2. Create an IAM Role for Lambda 3. Create a Lambda function 4. Create an API as a web site endpoint 5. Add a proxy resource to root resource 6. Add ANY method to the resources 7. Deploy the API 8. Add permission to the Lambda function 9. Create CloudFront Distribution 10. Create a function for Next.js app
9. L a m b d a - E x p re s s i n t e g t a t i o n E x p re s s - N e x t i n t e g t a t i o n
10. P ro c e d u re o f d e p l o y m e n t 1. Build Next.js app 2. Zip the app 3. Upload it to S3 4. Update function code from S3
11. Pros • Flexible CDN cache control. • Flexible access control with AWS WAF. Cons • It takes a few seconds each time cold start due to FaaS • The procedure is complicated. • It takes time to understand configurations. • Should use SAM or Terraform.
13. P ro c e d u re o f b u i l d i n g i n f r a s t r u c t u re 1. Create Firebase configuration file 2. Create a new project 3. Associate the project 4. Create a function for Next.js app
14. F u n c t i o n s - N e x t i n t e g t a t i o n F i re b a s e F u n c t i o n s H T T P t r i g g e r s u p p o r t s E x p re s s a p p
15. P ro c e d u re o f d e p l o y m e n t 1. Build Next.js app 2. Deploy to Firebase
16. Pros • Pretty easy. • Easy GUI and CLI. • Easy CDN cache control and immediate provisioning. • Configuring custom domain is also easy and cert is full-managed. Cons • It takes a few seconds each time cold start due to FaaS • Necessary to visit web console in construction procedure. • No access control system.
17. C o n c l u s i o n s • I love Firebase. • The cases that AWS stack has meaning: • Fetch data from backend built on AWS. • Need to manage with CloudFormation or Terraform. • Need to have ACL on platform side. • Google App Engine Node.js standard environment is in Early Access Program. This might resolve cold start problem.
18. E x a m p l e s h t t p s : / / g i t h u b . c o m / b o i y a a / f ro n t e n d - s e r v e r l e s s - p a t t e r n s
19. T h a n k y o u