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.

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