Serverless Single Page Apps on Azure

017286889e25c87cb44b20ceca2d1d79?s=47 Daron Yondem
February 19, 2019

Serverless Single Page Apps on Azure

This is a presentation introducing Azure Storage and Azure Functions as a SPA hosting environment. When you add some CDN and API Management onto the stack it is just beautiful and still all serverless and on the consumption plan (no pay for no use).

017286889e25c87cb44b20ceca2d1d79?s=128

Daron Yondem

February 19, 2019
Tweet

Transcript

  1. Serverless Single Page Apps on Azure Daron Yöndem http://daron.me @daronyondem

  2. Hosting something in Azure? • Virtual Machine • Kubernetes (AKS)

    • Docker / Containers (ACI) • App Service Plans • Cloud Services • Anything else left out there?
  3. What you really need for a SPA? • Static file

    hosting • Maybe some APIs?
  4. What you really need for a SPA? • Static file

    hosting > Azure Storage • Maybe some APIs? > Serverless Sauce (Azure Functions)
  5. Let’s get some storage! DEMO

  6. None
  7. None
  8. None
  9. None
  10. Storage Account Limits

  11. What about getting some CDN Magic? DEMO

  12. What about adding a CDN?

  13. Don’t forget to change to origin!

  14. None
  15. Getting a custom domain

  16. None
  17. After the domain name is validated, it can take up

    to 6-8 hours for the custom domain HTTPS feature to be activated.
  18. Premium for more! • HTTP to HTTPS redirection • Analytics

    • URL Rewrite • And some more goodies
  19. So far…. • Hosting for our static files • CDN

    in front of it • HTTPS Enabled
  20. API for the Contact Form • Will use SendGrid to

    send e-mail. • Need an endpoint to pass contact form content. • Need it to be protected against abuse.
  21. Setting up the Contact Form DEMO

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. Homework for you! • What if someone abused our mailing

    endpoint? • Use Azure API Management Consumption Plan for Request Throttling!
  31. Resources • Storage Account Limits: https://drn.fyi/2NbC7Um • Increasing Storage Account

    Limits: https://drn.fyi/2NdO8Zp • Custom Domain Mapping for CDN: https://drn.fyi/2GQ1D0c Advanced request throttling with Azure API Management: https://drn.fyi/2Xbphdr
  32. Thanks http://daron.me | @daronyondem Download slides here; http://daron.me/decks Sample code

    here; https://drn.fyi/2XbzK8D