Serverless for Front-end SPA

Presentation at Serverless Meetup Tokyo #7
https://serverless.connpass.com/event/76227/

Server-side rendering
https://speakerdeck.com/boiyaa/serverless-for-front-end-server-side-rendering

日本語
https://speakerdeck.com/boiyaa/hurontoendofalsesabaresu-spabian

Transcript

1. S e r v e r l e s s f o r F ro n t - e n d S i n g l e P a g e A p p l i c a t i o n 2 0 1 8 . 2 . 2 2 S e r v e r l e s s M e e t u p To k y o # 7
2. P ro f i l e • Front-end engineer at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. I am not familiar with infrastructure. But I would like to deliver front-end apps reliably.
4. Infrastructure Requirements It can route all requests to one HTML file. ʴ Ops (availability, security, etc) are managed. S PA U n f a m i l i a r w i t h o p s
5. O p t i o n s I t r i e d • Amazon CloudFront + Amazon S3 • Google App Engine • Firebase Hosting
7. 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 S3 Bucket 2. Create CloudFront OAI 3. Configure Bucket Policy 4. Configure CloudFront Distribution 5. Create CloudFront Distribution ෳ ࡶ C o m p l i c a t e d
8. bucket-policy.json { "Statement": [ { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [OAI_ID]" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::[BUCKET_NAME]/*" }, { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [OAI_ID]" }, "Action": "s3:ListBucket", "Resource": "arn:aws:s3:::[BUCKET_NAME]" } ] } distribution.json { "Comment": "", "Origins": { "Items": [ { "S3OriginConfig": { "OriginAccessIdentity": "origin-access-identity/cloudfront/[OAI_ID]" }, "Id": "origin", "DomainName": "[BUCKET_NAME].s3.amazonaws.com" } ], "Quantity": 1 }, "DefaultRootObject": "index.html", "PriceClass": "PriceClass_All", "Enabled": true, "DefaultCacheBehavior": { "TrustedSigners": { "Enabled": false, "Quantity": 0 }, "TargetOriginId": "origin", "ViewerProtocolPolicy": "allow-all", "ForwardedValues": { "Cookies": { "Forward": "none" }, "QueryString": false }, "MinTTL": 0, "Compress": true }, "CallerReference": "distribution-[BUCKET_NAME]", "CustomErrorResponses": { "Items": [ { "ErrorCode": 404, "ResponsePagePath": "/index.html", "ResponseCode": "200" } ], "Quantity": 1 } }
9. D e p l o y m e n t $ aws s3 sync build s3://[BUCKET_NAME] upload: build/index.html to s3://BUCKET_NAME/index.html upload: build/184e3117cf2cd3fa28a1f654dc5d4785.js to s3:// BUCKET_NAME/184e3117cf2cd3fa28a1f654dc5d4785.js Add the following option not to cache in development --cache-control "no-store, no-cache”
10. Pros • Flexible CDN cache control. • Flexible access control with AWS WAF. Cons • The procedure is complicated. • It takes time to understand configurations. • Should use SAM or Terraform.
12. 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 new project 2. Switch the project 3. Create App Engine 4. Create app.yaml for static website
13. runtime: php55 handlers: - url: /(.*\.(js|css|jpg|png|ico|svg))$ static_files: build/\1 upload: build/(.*\.(js|css|jpg|png|ico|svg))$ - url: /.* static_files: build/index.html upload: build/index.html skip_files: - ^(?!.*build).*$
14. D e p l o y m e n t $ gcloud app deploy Services to deploy: descriptor: […] source: […] target project: [PROJECT_NAME] target service: [default] target version: [20180222t003136] target url: [https://PROJECT_NAME.appspot.com] Do you want to continue (Y/n)? D o n o t f o rg e t p ro j e c t - s w i t c h i n g
15. Pros • Flexible routing configuration. • IP-address-based access control. • Configuring custom domain is also easy and cert is full-managed. • The latency between US and Tokyo is low. Cons • No CDN. • Cannot manage with tools such as Terraform.
17. 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
18. $ firebase init ? Which Firebase CLI features do you want to setup… ̋ Database: Deploy Firebase Realtime Database Rules ̋ Firestore: Deploy rules and create indexes for Firestore ̋ Functions: Configure and deploy Cloud Functions ›‒ Hosting: Configure and deploy Firebase Hosting sites ̋ Storage: Deploy Cloud Storage security rules ? Select a default Firebase project for this directory: [don't setup a default project] › [create a new project] ? What do you want to use as your public directory? public ? Configure as a single-page app (rewrite all urls to /index.html)? Yes A u t o c o n f i g u r a t i o n f o r S PA
19. σ ϓ ϩ Π $ firebase deploy === Deploying to ‘PROJECT_NAME'... i deploying hosting i hosting: preparing build directory for upload... ✔ hosting: 2 files uploaded successfully ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/ PROJECT_NAME/overview Hosting URL: https://PROJECT_NAME.firebaseapp.com E a s y
20. 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 • Necessary to visit web console in construction procedure. • No access control system. • Cannot manage with tools such as Terraform.
21. C o n c l u s i o n s • I prefer Firebase. • CloudFront + S3 in the case of managing with CloudFormation or Terraform • App Engine if backend is on App Engine Standard • Next theme is serverless server-side rendering.
22. https://github.com/boiyaa/frontend-serverless-patterns