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

Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS

Jaga
August 10, 2021

Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS

2021/8/10開催、Startup.fm WSでアプリ開発に集中するためのインフラ選定、の資料です。
スタートアップのアプリ開発者の皆様は、人手がなく時間もない中でいかに開発効率を上げてビジネスに寄与するか、日々チャレンジされていると思います。昨今 AWS では、AWS Amplify や AWS App Runner のようなインフラ管理を最小化し、より開発に集中できるサービスが登場しています。本セッションでは、フロントエンドアプリのパターン (SPA、SSG、SSR*) や、バックエンド API のパターン (サーバレス、ウェブフレームワーク**)ごとに、AWS のサービスをどのように使い分けていけば良いかについてお話しします。

Jaga

August 10, 2021
Tweet

More Decks by Jaga

Other Decks in Technology

Transcript

  1. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ) 8 8 /2 0/
    A DC



    AWS Startup fm - C

    View full-size slide

  2. © 2021, Amazon Web Services, Inc. or its Affiliates.
    W
    • s r v qz h lj a W
    ) , fgmhe ( .C . . : 0
    • w b ) , fgmhe
    yu ) , fgmhe d S M
    • qs t o inpd cyu
    d S M
    • ) , 1 2 : 2 / :1 : 02 A 2 ) , 0 : A/8 08 . . 8./82 .:1 A/ 20
    0 .: 2 : .00 1.:02 C 2 ) , A 2 ) 22 2: . . 8./82 .
    ( .C . . : 0 . 22 2: ): 0 : : . : :08A121 : 1 0A 2:
    121 :8 . .: 2 . 2 A . 2 0 . 2 ) , 2 02 /. 21 : 02 . :
    : . : . A . 2 121 : 8 0 . 2 C 88 /2 /. 21 : A .0 A.8 A 2
    ) , 2 02 .:1 . . 2 2 . 2 121

    View full-size slide

  3. © 2021, Amazon Web Services, Inc. or its Affiliates.
    SbN .2. 2 2
    A A > : A A A
    C ) >
    :A A A >P p
    P A A >T u
    2 0 (
    8 1 88 0

    View full-size slide

  4. © 2021, Amazon Web Services, Inc. or its Affiliates.
    75BA@
    • WjlP:lQ+UM@:lQ2Ÿ•/HKmP5MY 5Ygè¹È
    • ´7lWf ðz!/%
    (5Ygè¹ìo¤
    • AWS Amplify + AWS App Runner DmVHˉ/¤

    View full-size slide

  5. © 2021, Amazon Web Services, Inc. or its Affiliates.
    :&*
    +(
    • Amplify Hosting App Runner v2µÑ/
    • «IMFelÃp– Amplify Hosting App Runner 2Ò(
    /
    E
    • SPASSRSSG ØÂ Pros/Cons +v
    • Amplify CLILibrariesAdmin UI ×

    View full-size slide

  6. © 2021, Amazon Web Services, Inc. or its Affiliates.
    :
    1. 34
    2. . 5 4
    . 3
    . 3

    View full-size slide

  7. © 2021, Amazon Web Services, Inc. or its Affiliates.
    1. 4
    2. . 5 4
    . 3
    . 3

    View full-size slide

  8. © 2021, Amazon Web Services, Inc. or its Affiliates.
    qr ugs Pei
    VGTH œç¼Å/è¹gJmH2vñ
    CHP2ž
    ¾Ý ǘ¥é2


    HBmfVgN6
    Ÿx
    I>cgN6!/%

    ›Ý

    7lWfŸ•È
    Lm_n‹

    View full-size slide

  9. © 2021, Amazon Web Services, Inc. or its Affiliates.
    i f e



    View full-size slide

  10. © 2021, Amazon Web Services, Inc. or its Affiliates.
    y pv –

    • y U
    i
    uI
    • wl g
    I

    • OU
    uoF i Eu
    oF
    • qF uI
    RW I


    • S
    • qF u OU
    I P R
    pu I

    View full-size slide

  11. © 2021, Amazon Web Services, Inc. or its Affiliates.
    g v n qf



    ™Ï0/7lWf
    ¾Ý!§së

    View full-size slide

  12. © 2021, Amazon Web Services, Inc. or its Affiliates.
    qr ugs W R H n q
    AWS App Runner
    Amplify Hosting

    View full-size slide

  13. © 2021, Amazon Web Services, Inc. or its Affiliates.
    1. 34
    2. 5 .
    . 3
    . 3

    View full-size slide

  14. © 2021, Amazon Web Services, Inc. or its Affiliates.
    . .


    • SPA (Single Page Application)
    • SSR (Server Side Rendering)
    • SSG (Statice Site Generator)



    View full-size slide

  15. © 2021, Amazon Web Services, Inc. or its Affiliates.
    - SPA (Single Page Application)
    • jonT S ort )1 1 e
    • R Single Page e JavaScript e S
    e )1 1
    • l v HTML e P b
    .js
    .html
    .css
    Web Browser
    $&"&
    ),

    View full-size slide

  16. © 2021, Amazon Web Services, Inc. or its Affiliates.
    - SSG (Static Site Generator)
    • u S e NSHJ
    • L Mc orte b I
    • s pI Mcb u
    Web Browser
    $&"&
    ),

    View full-size slide

  17. © 2021, Amazon Web Services, Inc. or its Affiliates.
    - SSR (Server Side Rendering)
    • l v T )1 1
    e j t SPA aG e
    • jon I T
    • ( l v l v I
    Fte
    Web Browser
    $&"&
    ),

    View full-size slide

  18. © 2021, Amazon Web Services, Inc. or its Affiliates.
    - . .
    • j oT ( cH HT K y HR
    • s H H . D . : . D C : DA
    • jn ) C >A h aW J vH T
    T HTML cH HI L M S JII
    Web Browser

    View full-size slide

  19. © 2021, Amazon Web Services, Inc. or its Affiliates.
    a


    • .
    • .
    • iyx j
    . A .1
    Amplify Hosting
    AWS App Runner

    View full-size slide

  20. © 2021, Amazon Web Services, Inc. or its Affiliates.
    1. 34
    2. . 5 4
    5 . L 3
    . 3

    View full-size slide

  21. © 2021, Amazon Web Services, Inc. or its Affiliates.
    –jk niu qth m
    Web Browser
    $&"&
    ),
    Web Browser
    $&"&
    ),
    SPA
    SSG
    .js
    .html
    .css

    View full-size slide

  22. © 2021, Amazon Web Services, Inc. or its Affiliates.
    –jk niu qth m
    Web Browser
    $&"&
    ),
    Web Browser
    $&"&
    ),
    SPA
    SSG
    .js
    .html
    .css
    HTML, CSS, JavaScript
    5IMP îºäy

    View full-size slide

  23. © 2021, Amazon Web Services, Inc. or its Affiliates.
    –jk niu qth m
    • SPASSG -*89XWim_km@+
    SSR ,g@:HPš(ƒº)~µ2Ì
    1!
    • W47h2äy /Œ»0",
    ÔÀß²
    ™Ï
    HBmfVgN6
    Ÿx+
    • SPA + SSG !dmEm,-ˆ5IM
    Pá…0/‡&3
    • CDN>bMFc2/HBmfVg
    N62Ÿxsi7NlFg@:HP
    š¿†É

    View full-size slide

  24. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting
    !


    View full-size slide

  25. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify /
    Amplify CLI
    Web z u T j o g l tS
    L M T OSS H i H
    Amplify
    Web z u AWS L M T OSS t
    Amplify Hosting
    s egj cH H e u r o len
    mu el aL M T AWS cHre
    Amplify Admin UI
    Web z u T j o b l L M T
    GUI H

    View full-size slide

  26. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify /
    Amplify CLI
    Web z u T j o g l tS
    L M T OSS H i H
    Amplify
    Web z u AWS L M T OSS t
    Amplify Hosting
    s egj cH H e u r o len
    mu el aL M T AWS cHre
    Amplify Admin UI
    Web z u T j o b l L M T
    GUI H

    View full-size slide

  27. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting '

    View full-size slide

  28. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting ' (1) $+

    View full-size slide

  29. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting ' (1) $+

    View full-size slide

  30. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting ' (2) -!

    View full-size slide

  31. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting ' (3) 1

    View full-size slide

  32. © 2021, Amazon Web Services, Inc. or its Affiliates.
    #" (0
    JmHCmQ¦0/#ʃVhQ-OYj7'’Ì

    View full-size slide

  33. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting &,
    E2E NHP
    Webhook
    ¶Ž 
    Pull Request
    YiVcm
    ZmFM@ÙÖ
    aSKglA

    View full-size slide

  34. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2
    R y
    u g n d
    I G d

    View full-size slide

  35. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2 @ @ A
    / - /. /- - -
    @ I d R
    i q e u
    u R e @ 3
    @ Ft
    t @
    F P LWI
    @ I ORa i
    q m F

    View full-size slide

  36. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2 E xr m
    / - /. /- - / -

    View full-size slide

  37. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2 osl
    / - /. /- - /. / -
    R y
    2 2 B e U
    Fs m eH LWI

    View full-size slide

  38. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2 -
    / - /. /- - // -
    Web Browser
    1./4(
    *- Webhook

    " (#03+
    2

    View full-size slide

  39. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ( 2 tqu
    / - /. /- - .. . -
    / @ W oFs e
    u FrF e U i
    re I b TUG
    H P u u W
    u F Fm C
    / @ I Pd
    / @ d
    p F Ha

    View full-size slide

  40. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify /)
    %.*
    VhQ¥é
    $ 0.01/ 
    VhQ & OYj7
    [HN6lA
    HPimG 1GB .
    $0.023 / ¨
    [HN6lA,/äy
    1GB .
    $0.15
    —åÛæ
    ³£€·¬*
    VhQ¥é
    1000 
    HPimG
    5GB/¨
    [HN6lADmVH
    15GB/¨
    *940:812 6> AWS 940:87>;.5 7?/
    https://aws.amazon.com/jp/amplify/pricing/

    View full-size slide

  41. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify >9
    ). %
    https://docs.amplify.aws
    AWS Summit 2021 40 Web&#"62
    *5 AWS Amplify
    https://d1.awsstatic.com/events/jp/2021/summit-online/AWS-
    47_AWS_Summit_Online_2021_FWM01.pdf
    $'!
    https://amplify-sns.workshop.aws/ja/
    Amplify ,3"'7
    https://aws-amplify-jp.github.io/resources
    Amplify Japan User Group Slack
    https://github.com/aws-amplify-jp/awesome-aws-amplify-ja#slack

    View full-size slide

  42. © 2021, Amazon Web Services, Inc. or its Affiliates.
    1. 34
    2. . 5 4
    . 3
    5 . 3

    View full-size slide

  43. © 2021, Amazon Web Services, Inc. or its Affiliates.
    jk l qth m
    • SPASSG ã 89XWim_km@+ SSR
    !g@:HPš(ƒº)~µ2Ì
    • JavaScriptRubyPHP YjAf^lA
    ÓÚ ’̶Ž™Ï
    ÔÀß²™Ï
    HBmfVgN6
    Ÿxí
    • g@:HP ÔÀß²2¯Þ/)g
    @:HP ‚¥!ÔÀß²2+™Ï
    /
    • g@:HPšÔÀß²2±/,
    qÄ(™Ï

    View full-size slide

  44. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ) f ( 2 qu e
    • Next.js SSR “š
    • €·¤®!îº89XD7P[HN6lA ‡ˆ
    • SSR [HN6lA·IMP5MY°( AWS CloudFront + Amazon S3
    + Lambda @ Edge 5=8lP}uœ
    • Nuxt.js “š! Feature Request +12!*
    *Nuxt.js <= Feature Request https://github.com/aws-amplify/amplify-console/issues/1860
    **+4 https://aws.amazon.com/jp/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/
    ***CBAmplify Hosting
    SSR -"%5HD+&-"%5
    @ ?F
    8G
    3 B @
    2 3 2



    View full-size slide

  45. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner H
    AWS


    View full-size slide

  46. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    3:= 2<")+
    2.
    3.
    1.
    5,3
    #$&$,

    View full-size slide

  47. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner ' (1) $+

    View full-size slide

  48. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner ' (2) -!

    View full-size slide

  49. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner ' (3)
    -!

    View full-size slide

  50. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner
    #" (0

    View full-size slide

  51. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    ;6
    FlYh
    Ƈ0
    j?lA­É
    FlYh
    IMP5MY

    View full-size slide

  52. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    ;6
    FlYh
    Ƈ0
    j?lA­É
    FlYh
    IMP5MY

    View full-size slide

  53. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner
    #)
    Python 3ÁNode.js 12Á€·¥!JmHCmQZmH OYj7
    r flK7_€·¥!ClNRZmH OYj7
    5,3
    #$&$,
    JmHCmQZmH ClNRZmH
    • JmHCmQi\GPg
    $ YMFc2WM@
    OYj7
    • Python 3ÁNode.js 12Á
    flK7_2 w*
    • Amazon ECR (Elastic
    Container Registry) $
    YMFc2WM@O
    Yj7
    *.(6)6!1575"&63*$6!>;'0/5&9A
    https://docs.aws.amazon.com/apprunner/latest/dg/service-source-code-python-releases.html
    https://docs.aws.amazon.com/apprunner/latest/dg/service-source-code-nodejs-releases.html

    View full-size slide

  54. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    ;6
    FlYh
    Ƈ0
    j?lA­É
    FlYh
    IMP5MY

    View full-size slide

  55. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    +%
    (
    %(!&(
    &&&
    & ((
    App Runner
    "
    '
    '
    '

    View full-size slide

  56. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner - *#( + +'*
    D5
    ''#(
    " /
    %%%
    1-/
    %%%
    1+/
    OW;hP
    Ց{
    5,3
    6&"625

    View full-size slide

  57. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS App Runner
    ;6
    FlYh
    Ƈ0
    j?lA­É
    FlYh
    IMP5MY

    View full-size slide

  58. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner - Console
    )
    GC
    ÊjA:mG9lP2’Í/™Ï
    E:
    45?F

    View full-size slide

  59. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner - Console
    $ '
    GC
    g@:HP¢š¿ i7NlFHTTP 2XX 4XX 5XX 00 ¢
    2 App Runner ClJmh¸ðêІÉ
    E:
    45?F

    View full-size slide

  60. © 2021, Amazon Web Services, Inc. or its Affiliates.
    vCPU . 0.064 USD/¥é *
    `ag 1GB . 0.07 USD/¥é
    VhQ
    7lHKlH
    * *$21&,#)"-
    -!--3'(+<=
    *$21%-!--3 vCPU '(+<=
    https://aws.amazon.com/jp/apprunner/pricing/
    AWS App Runner
    8F.?
    ʃOYj7 5YgBmFel. 1 USD/¨
    VhQ¥é 0.05 USD/

    View full-size slide

  61. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner -4
    +!
    /1
    0
    RDS 2 Private VPC v
    ~µkm@jmQà
    ΢ ClNR2AhmY„
    îº89XD7P[HN6lA
    Next.js SSR [HN6lA Amplify Hosting
    ECS
    t2v",â ! Solutions Architect ½Üñ
    and more…
    CDN :MG~µ(SSR)
    Lambda@Edge
    7lKmTMP|è

    View full-size slide

  62. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Online Ask An Expert (AAE)
    • a A
    LT T
    • eW LT T
    • G b b
    • LT T f e


    View full-size slide

  63. © 2021, Amazon Web Services, Inc. or its Affiliates.
    App Runner >,
    |”Q>c`lP
    https://docs.aws.amazon.com/apprunner/latest/dg/what-is-apprunner.html
    XjA
    https://aws.amazon.com/jp/blogs/news/introducing-aws-app-runner/
    jmQ]MY
    https://github.com/aws/apprunner-roadmap/projects/1
    ¡ŠÏ©
    https://github.com/aws/apprunner-roadmap/issues

    View full-size slide

  64. © 2021, Amazon Web Services, Inc. or its Affiliates.
    1. 34
    2. . 5 4
    . 3
    . 3

    View full-size slide

  65. © 2021, Amazon Web Services, Inc. or its Affiliates.
    a
    • (

    • )
    • )
    • NR PS
    ) . ) E
    Amplify Hosting
    AWS App Runner

    View full-size slide

  66. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Thank you !

    View full-size slide