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

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

8 § We can choose from a continuum § VM ➔ Containers ➔ Orchestrators ➔ PaaS ➔ Serverless Azure Services Landscape – The 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 Services Landscape – Which services are available

• 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

• 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

• 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

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

• 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

SPAs in Azure - Azure Container Registry - Containerize your SPA - Azure Container Instances - Azure Web App for Containers - Azure Kubernetes Service 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 they hosted? • Are there an existing Kubernetes, App Service deployments in Azure? Hosting Guidance – Key metrics & characteristics for finding the best service

• 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

• 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

• 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

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

• 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

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

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

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

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