$30 off During Our Annual Pro Sale. View Details »

Hosting your SPA in Azure: So many choices, so few guidance. No longer!

Hosting your SPA in Azure: So many choices, so few guidance. No longer!

Der Betrieb von Single Page Applications (SPAs) gilt als einfach, ressourcenschonend, und frustfrei. Allerdings bieten öffentliche Cloudplattformen wie Microsoft Azure – eine Vielzahl an Betriebsmöglichkeiten für SPAs. Die Wahl zwischen Diensten wie Azure App Services, Azure Storage Account, Azure Static WebApps, Web Apps for Containers, oder Azure Kubernetes Service gestaltet sich in der Praxis jedoch nicht so einfach.

In diesem Workshop zeigt Azure MVP Thorsten Hans, wie Sie abhängig von konkreten Anforderungen die optimale Plattform für den Betrieb Ihrer SPA finden können. Finden Sie den Weg durch den Dschungel an Hosting-Optionen und erhalten Sie Antworten auf die wichtigsten Fragen, wenn es um den professionellen, sicheren, und skalierbaren Betrieb in der Cloud geht. Wie immer ist dieser Talk gespickt mit vielen Demos, Tipps und Tricks.

Thorsten Hans

March 23, 2022
Tweet

More Decks by Thorsten Hans

Other Decks in Technology

Transcript

  1. Hosting your SPA in Azure
    Thorsten Hans
    @ThorstenHans
    Consultant
    So many choices, so few guidance. No longer!

    View Slide

  2. Consultant @ Thinktecture
    #Azure #Kubernetes
    #CloudNative #Terraform
    [email protected]
    thinktecture.com
    thorsten-hans.com
    @ThorstenHans
    Thorsten Hans

    View Slide

  3. • Introduction
    • Azure Services Landscape
    • Hosting Guidance
    • Conclusion
    Talking Points - What we will cover today

    View Slide

  4. • Introduction
    • Azure Services Landscape
    • Hosting Guidance
    • Conclusion
    Talking Points - What we will cover today

    View Slide

  5. • Hosting Single Page Applications (SPAs) is easy! 🎉
    • SPAs are served using static files / dynamic content is consumed via APIs
    • Azure offers many services to host your SPAs
    • There is no complete guidance on when to use which service 😵💫
    • Hosting SPAs using IaaS offerings not in the scope of this talk
    Introduction

    View Slide

  6. • Let’s do a quick intro to Azure – if there are attendees that are new to Azure
    • Azure currently offers more than 280 services
    • There are global and regional services
    • There are preview services
    • There are different editions for every service
    • In Azure, we call them SKUs
    • TBH: Price predictions are HARD! 😵💫 (applies for every big cloud platform)
    Introduction – Azure?!

    View Slide

  7. Azure Pricing calculator
    https://azure.microsoft.com/en-us/pricing/calculator/

    View Slide

  8. • Introduction
    • Azure Services Landscape
    • Hosting Guidance
    • Conclusion
    Talking Points - What we will cover today

    View Slide

  9. 9
    The Azure Cloud continuum
    PaaS
    IaaS
    On-Premises Serverless

    View Slide

  10. • Azure App Services
    • Azure Container Instances
    • Azure Kubernetes Service
    • Azure Storage Accounts
    • Azure Static Web Apps
    • Azure Web App for Containers
    • Azure Container Apps
    Azure Services Landscape – Which services are available for hosting SPAs

    View Slide

  11. • Platform as a Service (PaaS)
    • Azure App Services
    • Azure Kubernetes Service
    • Azure Web App for Containers
    • Almost Software as a Service (SaaS) 🙃
    • Azure Static Web Apps
    • Azure Storage Accounts
    • Serverless
    • Azure Container Instances
    • Azure Container Apps
    Azure Services Landscape – Services divided by their hosting model

    View Slide

  12. • Containers 🐳
    • Azure Kubernetes Service
    • Azure Web App for Containers
    • Azure Container Instances
    • Azure Container Apps
    • SPA distributable 📦
    • Azure Storage Accounts
    • Azure App Services
    • Azure Static Web Apps
    Azure Services Landscape – Services divided by deployment model

    View Slide

  13. • Azure Storage Account
    • xCopy Deployment
    • Azure Static Web Apps
    • “Managed” build process
    • Azure App Service
    • Linux based webserver (PM2)
    • pm2 serve /home/site/wwwroot --no-daemon --spa
    SPA distributable – How to run your SPA on PaaS

    View Slide

  14. Hosting SPAs in Azure
    - Azure Storage Accounts
    - Azure App Services
    - Azure Static Web Apps
    Demo

    View Slide

  15. • Azure Kubernetes Service
    • Leveraging Managed Kubernetes – use (kubectl) to deploy
    • Azure Web App for Containers
    • PaaS – use Azure CLI (or Portal) to deploy
    • Azure Container Instances
    • Serverless approach – use Azure CLI (or Portal) to deploy
    • Azure Container Apps
    • Serverless approach – use Azure CLI & Project Bicep to deploy
    Leverage Containers – How to run containerized SPAs in Azure
    A
    container registry is
    required
    for all
    deploym
    ent options

    View Slide

  16. Hosting containerized SPAs in Azure
    - Azure Container Registry
    - Containerize your SPA
    - Azure Container Instances
    - Azure Web App for Containers
    - Azure Kubernetes Service
    - Azure Container Apps
    Demo

    View Slide

  17. • Introduction
    • Azure Services Landscape
    • Hosting Guidance
    • Conclusion
    Talking Points - What we will cover today

    View Slide

  18. • Overall application infrastructure
    • SPAs are typically interacting with some kind of backend-services (APIs)
    • How / where are those backend(s) hosted?
    • Are there existing Kubernetes or App Service deployments in Azure?
    Hosting Guidance – Key metrics & characteristics for identifying the best service

    View Slide

  19. • Hosting your SPA using existing services or same type of service will
    • Minimize operational requirements (homogenous infrastructure)
    • Increase cost efficiency (FinOps)
    • Hosting SPAs does not require loads of compute
    • adding it to existing services is often possible
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  20. • Hosting (environment) purposes
    • Is your SPA only used in inner-loop?
    • Azure Container Instances is great for short-time, test deployments
    • Do you have to deal with multiple environments (development, staging, prod)
    • Azure App Services, AKS and Azure Static Web Apps can handle multiple
    environments with ease
    • Rent a single service instances -> run multiple environments
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  21. • Regional availability
    • Does it matter where your SPA is deployed (think of cloud regions | regulatory
    compliance)?
    • Azure Static Web Apps is currently available in five regions
    • Currently not available in Germany at all
    • You can do multi-regional deployments in Azure to reduce latency and meet regulatory
    compliance
    • Take a look at Azure Traffic Manager / Azure Front Door
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  22. • Service capabilities
    • Do you want to use CDN?
    • Azure CDN can be added to all hosting options except Azure Static Web Apps
    (which already comes with CDN out of the box)
    • Do you need full control over CDN?
    • CDN for Azure Static Web Apps is fully managed – but does not allow further
    configurations
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  23. • Service capabilities
    • You can upload custom SSL certificates to Azure App Services, Web Apps for
    Containers, Azure Kubernetes
    • You can’t directly add custom SSL certs to Azure Storage Account, Azure
    Container Instances and preview services like Azure Static Web Apps & Azure
    Container Apps
    • Azure Static Web Apps is best for you, if you don’t want to care about SSL certificate
    management (acquisition and rotation)
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  24. • The “vendor lock-in”
    • Has your organization not yet decided which cloud platform they will use?
    • Does risk-management require a multi-cloud deployment?
    • Containerize your SPA
    • Containerizing SPAs using NGINX is well documented and battle-tested
    • Distribute your containers using a private container registry
    • You can download images stored in Azure Container Registry from everywhere
    Hosting Guidance – Key metrics & characteristics for finding the best service

    View Slide

  25. What we will cover today
    • Introduction
    • Azure Services Landscape
    • Hosting Guidance
    • Conclusion
    Talking Points

    View Slide

  26. You saw a ton of Azure services, but what are the key take-aways for you as
    frontend dev?
    • Simple
    • Use Azure Static Web Apps
    • Agnostic
    • Use containers
    Conclusion – Hosting SPAs in Azure

    View Slide

  27. You saw a ton of Azure services, but what are the key take-aways for you as
    frontend dev?
    • Context
    • What’s already there? What knowledge is in your team / company?
    Conclusion – Hosting SPAs in Azure

    View Slide

  28. further questions?!?!
    Thorsten Hans
    @ThorstenHans
    Consultant
    Don’t be afraid.
    Shoot your question now in person, or later at
    [email protected] or @ThorstenHans
    thns.io/slides

    View Slide