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.

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. Azure Pricing calculator https://azure.microsoft.com/en-us/pricing/calculator/
8. • Introduction • Azure Services Landscape • Hosting Guidance • Conclusion Talking Points - What we will cover today
9. 9 The Azure Cloud continuum PaaS IaaS On-Premises Serverless
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
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
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
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
14. Hosting SPAs in Azure - Azure Storage Accounts - Azure App Services - Azure Static Web Apps Demo
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
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
17. • Introduction • Azure Services Landscape • Hosting Guidance • Conclusion Talking Points - What we will cover today
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
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
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
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
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
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
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
25. What we will cover today • Introduction • Azure Services Landscape • Hosting Guidance • Conclusion Talking Points
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
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
28. 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 thns.io/slides