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

More Decks by Serverless Operations

Other Decks in Technology


  1. 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.
  2. Agenda • Front-end development trends (traditional - 2022 present) •

    AWS services for web hosting • Serverless Web Hosting Strategy
  3. Early days of web application Required web server provisioning Stateful

    server-side template engine Client-side JS was
 not a mainstay
  4. 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
  5. 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
  6. 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
  7. 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
  8. Conventional architectures for web hosting Public subnet VPC Instances Application

 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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