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

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

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

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

• 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

• 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?!

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

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

9 The Azure Cloud continuum PaaS IaaS On-Premises Serverless

• 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

• 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

• 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

• 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

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

• 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

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

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

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

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

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