No content

Serverless Web Hosting Strategy
 For Modern Front-end Application Takahiro Horike (He/Him) S E R V E R L E S S & C O N T A I N E R S B R E A K O U T CEO Serverless Operations, Inc.

Agenda • Front-end development trends (traditional - 2022 present) • AWS services for web hosting • Serverless Web Hosting Strategy

Front-end development trends
 (traditional - 2022 present)

Early days of web application Required web server provisioning Stateful server-side template engine Client-side JS was
 not a mainstay

Static Web Hosting SPA has changed front-end landscape Browser API Server Initial GET request AJAX / XHR / Fetch *Update UI Components SPA(Single Page Application) LifeCycle { “data”: “…” } index.htm l

Evolution never stops (present) Browser Server Server Side Rendering SSR /dashboard dashboaord.js /content content.js Browser Server (Build) Static Site Generation SSG CDN (Cache) /content content.js content.htm l *Generated at build time Fast, secure, scalable a.k.a “JAMstack” - JS, API, Markup Good for SEO performance Rescuing SPA’s disadvantages

AWS services for web hosting

The Well-Architected Framework Based on the Pillars of the AWS Well-Architected Framework 1. First delivery 2. High performance 3. Efficient infrastructure 4. Resilient 5. Secure

Key considerations to follow the Well-Architected Framework 1. Grasping the front-end design pattern (SPA, SSR, SSG, etc.) 2. CI/CD workflow & optimization that fits the design pattern 3. Leveraging managed service for efficient infrastructure Fast Delivery Resilient High performance Efficient infrastructure Secure

Conventional architectures for web hosting Public subnet VPC Instances Application Load 
 Balancer Availability Zone Availability Zone Public subnet Instances Auto Scaling group Public subnet VPC Availability Zone Private subnet NAT gateway Application Load 
 Balancer AWS Fargate reverse-proxy app-1 app-2 Amazon EC2 AWS Fargate SSR SSR

Serverless Web Hosting Strategy

AWS Cloud Basic Architectures with Serverless CloudFront S3 Bucket API Gateway Lambda Path /* Path /*.* AWS Cloud CloudFront S3 Bucket *Origin Access Identity SPA/SSG SSR

Client Now we have more abstract options AWS App Runner as fully-managed server hosting AWS Amplify Hosting for Less-configurations & All-in- one static hosting solution AWS Cloud Client AWS Cloud Amplify Hosting App Runner 👍 Static content hosting 👍 General purpose Server hosting

Build-in CI/CD and optimized workflows Client AWS Cloud Client AWS Cloud Amplify Hosting App Runner CodeCommit GitHub Developer Developer SSR (Node.js, Python) SPA,SSG • No need for network configurations • Built-in CI/CD workflow • Optimized for the latest front-end frameworks *Custom docker image is available via ECR 👍 Static content hosting 👍 General purpose Server hosting

Full-stack development environment AWS Amplify Studio (GA in Apr. 2022) • Define a data model • Figma design to React code • Bind the UI to data model • Deploy & Backend Management • GraphQL API with DynamoDB tables

Conclusion Newly released managed services as the latest front- end hosting solution Initiative for unified development experience
 (e.g. AWS Amplify Studio) Maximize your work efficiency by leveraging AWS’ serverless platforms

• Unified full stack web app development solution • Front-end monitoring solutions We need: