Serverless Web Hosting Strategy For Modern Front-end Application

Transcript

2. 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.
3. Agenda • Front-end development trends (traditional - 2022 present) • AWS services for web hosting • Serverless Web Hosting Strategy
4. Front-end development trends
 (traditional - 2022 present)
5. Early days of web application Required web server provisioning Stateful server-side template engine Client-side JS was
 not a mainstay
6. 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
7. 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
8. AWS services for web hosting
9. 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
10. 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
11. 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
12. Serverless Web Hosting Strategy
13. 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
14. 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
15. 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
16. 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
17. 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
18. • Unified full stack web app development solution • Front-end monitoring solutions We need: