Save 37% off PRO during our Black Friday Sale! »

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 Talk 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.

6848c06ef647ab606c668cc5264c0fc9?s=128

Thorsten Hans

October 06, 2021
Tweet

Transcript

  1. Hosting your SPA in Azure Thorsten Hans @ThorstenHans Consultant So

    many choices, so few guidance. No longer!
  2. Consultant @ Thinktecture #Azure #Kubernetes #CloudNative #Terraform thorsten.hans@thinktecture.com thinktecture.com thorsten-hans.com

    @ThorstenHans Thorsten Hans
  3. • Introduction • Azure Services Landscape • Hosting Guidance •

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

    Conclusion Talking Points - What we will cover today
  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
  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?!
  7. • Introduction • Azure Services Landscape • Hosting Guidance •

    Conclusion Talking Points - What we will cover today
  8. 8 § We can choose from a continuum § VM

    ➔ Containers ➔ Orchestrators ➔ PaaS ➔ Serverless Azure Services Landscape – The Cloud continuum PaaS IaaS On-Premises Serverless
  9. • Azure App Services • Azure Container Instances • Azure

    Kubernetes Service • Azure Storage Accounts • Azure Static Web Apps • Azure Web App for Containers Azure Services Landscape – Which services are available
  10. • Platform as a Service (PaaS) • Azure Static Web

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

    for Containers • Azure Container Instances • SPA distributable • Azure Storage Accounts • Azure App Services • Azure Static Web Apps Azure Services Landscape – Divided by deployment model
  12. • 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
  13. SPAs in Azure - Azure Storage Accounts - Azure App

    Services - Azure Static Web Apps Demo
  14. • A Container Registry is required for all deployment options

    • 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 Leverage Containers – How to run containerized SPAs in Azure
  15. SPAs in Azure - Azure Container Registry - Containerize your

    SPA - Azure Container Instances - Azure Web App for Containers - Azure Kubernetes Service Demo
  16. • Introduction • Azure Services Landscape • Hosting Guidance •

    Conclusion Talking Points - What we will cover today
  17. • Overall application infrastructure • SPAs are typically interacting with

    some kind of backend services (APIs) • How / where are they hosted? • Are there an existing Kubernetes, App Service deployments in Azure? Hosting Guidance – Key metrics & characteristics for finding the best service
  18. • Hosting your SPA using existing or same services will

    • Minimize operational requirements (homogenous infrastructure) • Increase cost efficiency • 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
  19. • Usage environment • 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 many environments Hosting Guidance – Key metrics & characteristics for finding the best service
  20. • Regional availability • Does it matter where your SPA

    is deployed (thinking of cloud regions)? • Azure Static Web Apps is currently available in five regions • Currently not available in Germany at all • Obviously, you can have multiple deployments around the globe to • Reduce latency for your users • Meet regulatory compliance • Consider looking at Azure Traffic Manager / Azure Front Door Hosting Guidance – Key metrics & characteristics for finding the best service
  21. • 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
  22. • Service capabilities • SSL Certificates can be added to

    every service • 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
  23. • Vendor Lock-In • Do you want to minimize vendor

    lock-in and stay flexible? • Deploy your SPA using container technologies • Containerizing a SPA using NGINX is well documented • Distribute your containers using a private Docker Registry Hosting Guidance – Key metrics & characteristics for finding the best service
  24. What we will cover today • Introduction • Azure Services

    Landscape • Hosting Guidance • Conclusion Talking Points
  25. We saw a ton of Azure services, but what are

    the key take-aways for you as frontend dev? • Simple • Azure Static Web Apps (SWA) -> netlify competition with strong integration capabilities • Agnostic • Use Containers to reduce vendor lock-in Conclusion – Hosting SPAs in Azure
  26. We 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
  27. further Questions?!?! Thorsten Hans @ThorstenHans Consultant Don’t be afraid. Shoot

    your question now in person, or later at thorsten.hans@thinktecture.com or @ThorstenHans