$30 off During Our Annual Pro Sale. View Details »

30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy

kensh
November 11, 2023

30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy

AWS クラウドでは Front-end をどのように捉えてサービスを展開しているのでしょうか? 特に開発者や事業者にとって UI/UX やエッジでのクラウド利用が以前にもまして重要になってきています。本セッションでは AWS での Front-end 技術をおさらいしつつ、最新の機能にも触れてご紹介したいと思います。

kensh

November 11, 2023
Tweet

More Decks by kensh

Other Decks in Technology

Transcript

  1. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    AWS の WEB Front-end Strategy
    30分で理解する
    Kensuke Shimokawa
    Snr. Serverless Specialist
    Amazon Web Services Japan
    M O V A B L E T Y P E D E V E L O P E R S & D E S I G N E R S C O N F E R E N C E

    View Slide

  2. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2
    Kensuke Shimokawa
    Amazon Web Services Japan
    Snr. Serverless Specialist
    Slides https://speakerdeck.com/_kensh
    Qiita https://qiita.com/_kensh
    本日の資料もspeakerdeckに共有されています

    View Slide

  3. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    アジェンダ
    • UI/UX
    • User Experience
    • Client-side Rendering (CSR)
    • Server-side Rendering (SSR)
    • Streaming HTML
    • まとめ
    3

    View Slide

  4. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    UI / UX
    4

    View Slide

  5. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 5
    UI
    (User Interface)
    UX
    (User Experience)

    View Slide

  6. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 6
    UI
    (User Interface)
    UX
    (User Experience)
    ウェブサイトやアプリにおける
    ボタンや画像など⽬に⾒えているすべての情報
    製品やサービスを利⽤する中で得られる
    ユーザ体験

    View Slide

  7. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    User Experience
    7

    View Slide

  8. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    ・なかなか表示されず真っ白な画面のまま
    ・ボタンをタップしても反応しない・・・
    ・初回ロードやページ遷移時にガタガタとコンテンツが読み込まれる
    ・ブラウザバックでスクロール位置が変わってしまった
    ウェブサイトにおけるユーザ体験の悪い例

    View Slide

  9. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Core Web Vitals
    ウェブサイトにおけるユーザ体験の指標
    TTFB Time To First Byte
    ブラウザが最初のバイトを
    受信するまでの時間
    FCP First Contentful Paint
    ブラウザが最初の要素を
    表示するまでの時間
    LCP Largest Contentful Paint
    ブラウザが最も大きい要素を
    表示するまでの時間
    TTI Time To Interactive
    ユーザの入力を即座に応答できる
    ようになるまでの時間
    CLS Cumulative Layout Shift
    ページレイアウトのズレを
    定量的に数値化
    FID First Input Delay
    ユーザが入力をしてから
    ブラウザが応答するまでの時間
    ※ 2024年に FID ではなく、INP (Interaction to Next Paint) を Core web vitals の metric にしようとする動きもあります。

    View Slide

  10. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    アプリケーションやビジネスの特性に応じて
    ユーザ体験・開発者体験を最適化するレンダリング手法を採用する
    Rendering Pattern
    https://web.dev/rendering-on-the-web/#rehydration-issues
    ・・・

    View Slide

  11. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Client-side Rendering
    (CSR)
    11

    View Slide

  12. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    最小限の HTML のみがサーバによって返却される
    ページを表示するロジック、データフェッチ、ルーティングは
    ブラウザで実行される JavaScript によって処理する
    Client-side Rendering (CSR)
    geeawa.io/blog/abc geeawa.io/blog/abc
    JS loads
    最小限の HTML

    View Slide

  13. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    アプリケーションシェルとなる HTML を取得
    Client-side Rendering (CSR) - Process
    GET /
    GET /bundle.js
    render (app)
    Network
    Requests
    Main
    Thread
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  14. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    部分的なコンテンツのみを表示(空白ページ or Loading Indicator)
    Client-side Rendering (CSR) - Process
    GET /
    GET /bundle.js
    render (app)
    Network
    Requests
    Main
    Thread
    FP
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  15. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    意味のあるコンテンツがレンダリングされる
    Client-side Rendering (CSR) - Process
    GET /
    GET /bundle.js
    render (app)
    Network
    Requests
    Main
    Thread
    FCP
    FP
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  16. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    ユーザのインタラクティブな操作に応答できる
    Client-side Rendering (CSR) - Process
    GET /
    GET /bundle.js
    render (app)
    Network
    Requests
    Main
    Thread
    FCP TTI
    FP
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  17. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    ページの表示までの時間は JavaScript のバンドルサイズに依存
    Client-side Rendering (CSR) - Process
    GET /
    GET /bundle.js
    render (app)
    Network
    Requests
    Main
    Thread
    FCP TTI
    FP
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  18. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Report: State of JavaScript Bytes
    2011 2017 2023
    ~ 100KB ~ 300KB ~ 500KB
    https://httparchive.org/reports/state-of-javascript
    Webページからリクエストされた JavaScript のサイズ(中央値)

    View Slide

  19. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Client-side Rendering (CSR) Architecture
    Amazon S3
    Amazon
    CloudFront
    Browser
    コンテンツ
    キャッシュ
    リクエスト
    HTML, CSS, JS
    Rendering
    OAC アクセス
    (Origin Access Control)
    API 実行
    データを取得
    Amazon API Gateway AWS Lambda
    or
    GitHub AWS CodeCommit AWS CodeBuild
    デプロイ
    ソース管理 ビルド

    View Slide

  20. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Cache-Control: max-age などのディレクティブヘッダにより
    ブラウザの Private Cache や CDN の Public Cache が利用できます
    Private Cache vs Public Cache
    (オリジンサーバ)
    Cache !!
    Cache !!
    Private Cache Public Cache
    キャッシュサイズに制限がある点には注意!
    Amazon S3
    Amazon CloudFront
    (CDN)
    ブラウザ
    オブジェクトメタデータの例
    Cache-Control: max-age=60(ブラウザ・CDN両方)
    Cache-Control: s-maxage=60 (CDNのみ)

    View Slide

  21. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    全てのコンテンツは CDN でキャッシュしつつ、
    ハッシュ付きファイルは、ブラウザのキャッシュも有効にする。
    Client Side Routing するアプリのキャッシュ戦略
    index.html には、ハッシュ付きの静的コンテンツのパスを記載する(Cache Busting)
    デプロイ時には、CDN にキャッシュしているファイルの invalidate (キャッシュのクリア)を行う。
    デプロイ毎にハッシュは変わるため、ブラウザキャッシュに Hit しない場合は CDN のコンテンツを参照することができる。


    デプロイ
    Cache !!
    Cache !!

    View Slide

  22. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 22
    Client Side Routing 実装時の注意点
    React Router などを使用して Client Side Routing の実装をした際に、
    /about などでブラウザのリロードをすると、403(access denied)となる
    Amazon CloudFront Amazon S3
    /about
    403 Error
    OAI アクセス
    (Origin Access Identiy)
    /
    200 OK
    /index.html
    (Default root object)
    カスタムエラーレスポンスで 403 Error だった場合は
    index.html を 200 OK で返却することもできるが、
    実はキャッシュ最適化の観点ではバッドプラクティス

    View Slide

  23. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 23
    CloudFront Functions による URL の書き換え
    CloudFront Functions でリクエスト URL を書き換えることで
    Edge Location のキャッシュヒット率を高める
    Amazon S3
    Viewer Request
    Viewer Response
    Origin Request
    Origin Response
    CloudFront
    Functions
    CloudFront Edge Location
    キャッシュ
    キャッシュがある
    CloudFront Regional Edge Location
    https://aws.amazon.com/jp/blogs/news/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/
    https://aws.amazon.com/jp/blogs/news/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-cloudfront-functions/
    キャッシュ
    Lambda
    @Edge
    キャッシュがない
    Lambda
    @Edge
    /about /index.html
    / /index.html
    /static/js/main.123.js /static/js/main.123.js
    Rewrite URL!!
    ※ Amplify の場合はマネージドで URL の書き換え機能があります

    View Slide

  24. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Client-side Rendering - まとめ
    ・アプリケーションシェルとなる /index.html に紐づく
    全ての Static Assets をクライアントにロードしてからレンダリング
    ・全ての Static Assets が読み込まれるまで表示できない。
    ・CDN, Browser におけるキャッシュも有効

    View Slide

  25. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Rendering
    (SSR)
    25

    View Slide

  26. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Rendering (SSR) 自体は、
    昔からあった技術なのになぜ再注目されている?

    View Slide

  27. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    ユーザ体験を向上するためには JavaScript が必要
    一方で、JavaScript のコード量が多くなるとユーザ体験が悪化
    ユーザ体験と JavaScript のジレンマ

    View Slide

  28. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Rendering (SSR)
    with Hydration

    View Slide

  29. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Typical client-side rendering with React

    View Slide

  30. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side rendering with React

    View Slide

  31. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Typical client-side hydration with React

    View Slide

  32. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    What is the Hydration?
    renderToString() hydrate(HTML)
    SSR された文字列 HTML をクライアントで
    イベントを受け取れるよう生きた仮想DOMとして再開させること
    HTML
    (String)
    イベントハンドラーの 「⽔」 で 「乾いた」 HTML に⽔を注ぐ

    View Slide

  33. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Rendering(SSR) Architecture
    AWS Lambda
    (Render)
    Amazon
    CloudFront
    Browser API Gateway
    (for SSR)
    https://github.com/aws-samples/react-ssr-lambda
    SSR
    (Server-side Render)
    Amazon
    DynamoDB
    基本的なサーバサイドレンダリングの構成
    Amazon
    Aurora
    or etc…

    View Slide

  34. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Rendering(SSR) Architecture
    AWS Lambda
    (Render)
    Amazon
    CloudFront
    Browser function URLs
    (for SSR)
    SSR
    (Server-side Render)
    Amazon
    DynamoDB
    基本的なサーバサイドレンダリングの構成
    Amazon
    Aurora
    or etc…
    https://github.com/aws-samples/react-ssr-lambda

    View Slide

  35. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    FCPは短縮できるが、TTI は何も変わらない
    むしろ、First Input Delay (FID) を誘発しやすくなることも
    SSR with Hydration - Process
    Network
    Requests
    Main
    Thread
    FID
    TTI
    GET /bundle.js
    Hydration
    GET /
    FCP
    サーバでのデータフェッチ
    レンダリング
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  36. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    ・サーバでデータフェッチが完了しないと、HTMLが返却できない
    ・全ての JavaScript がロードされるまで Hydration が始まらない
    ・Hydration が終了するまで interactive にならない
    SSR with Hydration の課題

    View Slide

  37. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Streaming HTML
    37

    View Slide

  38. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server
    ユーザがクリックした箇所やビューポートを優先して Stream で返却
    サーバサイドでデータフェッチが終わった部分から順番に表示できる
    Streaming HTML

    View Slide

  39. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服
    Streaming HTML - Process
    GET /
    GET /bundle.js
    Network
    Requests
    Main
    Thread
    FCP TTI
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  40. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服
    Streaming HTML - Process
    GET /
    GET
    /bundle.js
    Network
    Requests
    Main
    Thread
    FCP TTI
    必要に応じて
    Stream 読み込み
    First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング
    First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング
    Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング

    View Slide

  41. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    AWS Lambda Response Streaming
    レスポンスデータが利用可能になった時点で返却することで TTFB を改善する
    最大 20MB のレスポンスペイロードをサポート
    Response streaming
    Next.js の Streaming HTML も動作します

    View Slide

  42. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Server-side Response Streaming
    AWS Lambda
    (Render)
    Amazon
    CloudFront
    Browser function URLs
    (for SSR)
    SSR
    (Server-side Render)
    Amazon
    DynamoDB
    基本的なサーバサイドレンダリングの構成
    Amazon
    Aurora
    or etc…
    https://github.com/aws-samples/react-ssr-lambda
    Stream
    response
    Stream
    response

    View Slide

  43. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Response streaming
    Demo
    Next.js の Streaming HTML を
    AWS Lambda Response Streaming で
    https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/nextjs-response-streaming
    Header など、すぐに表示できるものは即座に返却しつつ
    動的なコンテンツはサーバサイドで準備できてから順次返却する

    View Slide

  44. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    まとめ
    44

    View Slide

  45. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    まとめ
    • 様々なフロントエンドのレンダリング手法を理解する
    • CSR, SSR など
    • ユーザ体験(UX)を最適化するための手段として把握する
    • Streaming HTML
    • on AWS での実装ポイントを知る
    • CDN としての Amazon CloudFront / Cache
    • サーバーサイド処理のための AWS Lambda と function URLs
    • 徐々に画面を描画するための AWS Lambda Response Streaming
    45

    View Slide

  46. WEB FRONT-END STRATEGY
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Thank you!
    © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Slides https://speakerdeck.com/_kensh
    Qiita https://qiita.com/_kensh
    “ Ask The Speaker “

    View Slide