Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serverless Web Hosting Strategy
For Modern Front-end Application

Serverless Web Hosting Strategy
For Modern Front-end Application

Serverless Operations

October 06, 2022
Tweet

More Decks by Serverless Operations

Other Decks in Technology

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