Serverless Web Hosting Strategy For Modern Front-end Application

Transcript

1. View Slide

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.
   

   View Slide

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

   View Slide

4. Front-end development trends

   (traditional - 2022 present)
   

   View Slide

5. Early days of web application
   Required web server
   provisioning
   Stateful server-side
   template engine
   Client-side JS was

   not a mainstay
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. AWS services for web hosting
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Serverless Web Hosting Strategy
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide