Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serverless for Front-end SPA

F425aff2e1f934fc1e5fa95b1f933068?s=47 boiyama
February 22, 2018

Serverless for Front-end SPA



February 22, 2018


  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
  6. None
  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.
  11. None
  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.
  16. None
  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

  23. None