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

AWS Amplify で作ったものを振り返る(2020年版) #ゆるWeb札幌

AWS Amplify で作ったものを振り返る(2020年版) #ゆるWeb札幌

今年 AWS Amplify で作ったものなどを、さらっと振り返ってみます。
直接の技術的な話はありませんが、こんなものを作れる、というイメージとして。
https://mild-web-sap.connpass.com/event/193518/
https://www.youtube.com/watch?v=0GO-qpq8g5o&t=6753s

Kihara, Takuya

November 30, 2020
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. UBDDL
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF ΏΔ8FCࡳຈ
    "84"NQMJGZͰ
    ࡞ͬͨ΋ͷΛ
    ৼΓฦΔ ೥൛


    View Slide

  2. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF

    2
    PHP Conference Hokkaido 2019
    ໊લ ໦ݪ ୎໵ / ɹɹ@tacck
    ॴଐ
    גࣜձࣾϊʔεσΟςʔϧ

    ։ൃDivision ٕज़ਪਐGroup / Leader
    ओ࠵
    ΏΔWebษڧձ@ࡳຈ

    εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ
    ޷͖ͳ

    ϑΟΪϡΞεέʔτͷٕ
    εϓϨουɾΠʔάϧ

    View Slide

  3. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    3
    ࠓ೥͸৭ʑ͋Γ·ͨ͠

    View Slide

  4. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ࠓ೥͸৭ʑ͋Γ·ͨ͠
    4
    • 2020೥2݄ʹษڧձ༧ఆΛٸᬎதࢭʹ

    • 2020೥8݄ʹΦϯϥΠϯͰ࠶։

    • Ҏ߱ɺ10݄ɺ11݄(ࠓճ)ͱɺͳΜͱ͔ܧଓͰ͖ΔΑ͏ʹ

    View Slide

  5. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ࠓ೥͸৭ʑ͋Γ·ͨ͠
    5
    • 2020೥2݄ʹษڧձ༧ఆΛٸᬎதࢭʹ

    • 2020೥8݄ʹΦϯϥΠϯͰ࠶։

    • Ҏ߱ɺ10݄ɺ11݄(ࠓճ)ͱɺͳΜͱ͔ܧଓͰ͖ΔΑ͏ʹ
    ۭനͷظؒ

    View Slide

  6. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ۭനͷظؚؒΊͯɺࠓ೥͸ AWS Amplify Λ࢖ͬͨ

    WebγεςϜ࡞੒ʹτϥΠͨ͠(΄΅)Ұ೥Ͱͨ͠ɻ
    6

    View Slide

  7. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    େ·͔ͳλΠϜϥΠϯ
    7
    2020೥
    2019೥
    1݄ 4݄ 7݄ 10݄ 1݄
    1
    2
    3
    4
    5
    0
    2021೥

    View Slide

  8. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    8
    ೥ऴΘΓ
    ʙ
    ೥݄

    View Slide

  9. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ϦΞϧλΠϜΞϯέʔτγεςϜ
    9
    • ΦϯαΠτͰͷษڧձ༻ʹ࡞ͬͨ

    ϦΞϧλΠϜΞϯέʔτγεςϜɻ

    • Vue.js + WebSocket ͷษڧ༻ɻ

    • όοΫΤϯυ͸ Node.js Ͱ࡞ͬͯ Heroku ͰՔಇɻ

    • Alexa Λ࢖࣭ͬͯ໰Λਐߦͤ͞Δ͜ͱͰɺ

    Ξϯέʔτ΁ͷࢀՃҙཉΛߴΊͯ΋Β͏Πϝʔδɻ

    • ݸਓ༻ͷMVPͳͷͰɺ؅ཧը໘͕ແ͔ͬͨɻ

    View Slide

  10. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    10
    ೥݄
    ʙ
    ೥݄

    View Slide

  11. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ΞϯέʔτγεςϜͷ؅ཧը໘ࢼ࡞
    11
    • ઌͷΞϯέʔτγεςϜͷ؅ཧը໘ͷࢼ࡞ͱͯ͠ɺ

    AWS Amplify Ͱ΍Γ࢝Ίͨɻ

    • બఆཧ༝ → ڈ೥͸ Firebase Λ৮ͬͨͷͰɺ

    ࠓ೥͸ಉछͷҧ͏΋ͷΛ৮ͬͯΈ͔ͨͬͨɻ

    • Ҿ͖ଓ͖ɺ Vue.js (+Vuetify) ͷֶशɻ

    • Amplify ॳΊͯ + Vue.js ෆ׳Ε΋͋ΓɺCRUD·Ͱ͸Ͱ͖͕ͨɺ

    γεςϜͱͯ͠ͷ׬੒ʹ͸ࢸΒͣɻ

    View Slide

  12. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ΞϯέʔτγεςϜͷ؅ཧը໘ࢼ࡞
    12
    • ͜ΕΛ࡞͍ͬͯΔ࠷தʹΦϯαΠτͰͷษڧձΛ

    ։࠵Ͱ͖ͳ͍ঢ়گʹͳͬͨͷͰɺ

    ΞϯέʔτγεςϜͷίϯηϓτ

    (ΦϯαΠτͰԻ੠ૢ࡞ʹΑΔΞϯέʔτ)

    ͕༳Β͍ͩɺɺͱ͍͏ͷ΋େ͍ʹ͋Δɻ

    View Slide

  13. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    13
    ೥݄
    ʙ
    ೥݄

    View Slide

  14. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ϦΞϧλΠϜײ৘ڞ༗γεςϜFNPGVMM
    14
    • ΦϯϥΠϯͰͷਓͱਓͱͷܨ͕Γʹରͯ͠Կ͔Ͱ͖ͳ͍͔?

    ͱߟ͑ͯ࡞ͬͯΈͨɻ

    • ಛʹώοτ͸ͤͣɻ

    • ഑৴ʹࡌͤΔʹ͋ͨΓɺ

    ʮը໘Λڞ༗ͮ͠Β͍ʯ

    ͱ͍͏ͷ͸ࠓޙͷ՝୊ɻ

    • Vue.js (+Vuetify) ͱ͋Θͤͯɺ Amplify ΁ͷཧղ΋ਂ·Δɻ

    View Slide

  15. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ϦΞϧλΠϜײ৘ڞ༗γεςϜFNPGVMM
    15
    • ཁૉٕज़ͱͯ͠ɺϦΞϧλΠϜΞϯέʔτΛ

    Amplify Λ࢖ͬͨ΋ͷʹॻ͖׵͑Մೳͩͳɺ

    ͱ͍͏஌ݟ͸ͨ·ͬͨɻ

    View Slide

  16. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    16
    ೥݄
    ʙ
    ೥݄

    View Slide

  17. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ۀ຿Ͱࣾ಺γεςϜͷϓϩτλΠϓ։ൃ
    17
    • [2] ͱฒߦͯ͠ɺۀ຿ͷ׆ಈʹ Amplify ΛऔΓೖΕͯΈͨɻ

    • ࣾ಺ͷ࠲੮؅ཧγεςϜΛϓϩτλΠϓ։ൃɻ
    https://www.northdetail.co.jp/blog/870/

    View Slide

  18. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ۀ຿Ͱࣾ಺γεςϜͷϓϩτλΠϓ։ൃ
    18
    • ͋ͱ͸ɺ Amplify ͷνϡʔτϦΞϧهࣄΛ

    ձࣾͷٕज़ϒϩάʹॻ͘ɻ

    • https://www.northdetail.co.jp/blog/905/

    • https://www.northdetail.co.jp/blog/930/

    • https://www.northdetail.co.jp/blog/1039/

    • https://www.northdetail.co.jp/blog/1086/

    View Slide

  19. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ۀ຿Ͱࣾ಺γεςϜͷϓϩτλΠϓ։ൃ
    19
    • ࣾ಺ͷϝϯόʔͱڞಉ։ൃͨ͜͠ͱͰɺ

    ෳ਺ਓͰ։ൃ͢Δͱ͖ͷ Amplify ͷ؀ڥपΓͷ஌ݟ͕ಘΒΕͨɻ

    • ͕ɺࠓͰ΋ͪΐ͍ͪΐ͍Ҿ͔͔ͬΔɻ

    View Slide

  20. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    20
    ೥݄
    ʙ
    ೥݄

    View Slide

  21. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ୹จΦϯϥΠϯεϥΠυ
    21
    • վΊͯɺΦϯϥΠϯͰͰ͖ͦ͏ͳ΋ͷͱͯ͠ɺνϟϨϯδɻ

    • γεςϜࣗମ͸େےͰ͖͍ͯΔ͕ɺ

    ࣗ෼ͷதͰίϯηϓτ͕ϒϨ͖ͯͨͷΛײͨ͡ͷͰɺ

    ͍ͬͨΜ։ൃఀࢭɻ

    View Slide

  22. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    22
    ೥݄
    ʙ
    ݱࡏ

    View Slide

  23. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ࣋ͪ෺ͷ؆୯ͳϦετγεςϜ
    23
    • ࠓ೥ͷ࢒Γ3ϲ݄΄ͲͰɺࣗ෼ͷཉ͍͠΋ͷΛ

    ࡞Ζ͏ͱࢥͬͯ։ൃதɻ

    • ࣗ෼ͷ͍࣋ͬͯΔ΋ͷΛ

    ʮԿ೔(ͱ͔Կ೥ͱ͔)͍࣋ͬͯΔ͔ʯ

    ʮͲ͜ʹஔ͍͍ͯΔ͔ʯ

    ͕࠷௿ݶΘ͔Δ΋ͷ͕ཉ͔ͬͨ͠ͷͰɻ

    View Slide

  24. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ࣋ͪ෺ͷ؆୯ͳϦετγεςϜ
    24
    • ༸෰ͷങ͍ସ͑Ͳ͖͕Θ͔Βͳ͍ͷͰɺ

    n೥ܦͬͨΒങ͓͏ɺͱ͔͍͏ͱ͖ͷҙࢥܾఆ༻ʹɻ

    • ͋ͱ͸ɺඇৗ༻ͷΞΠςϜͷফඅظݶ΍

    ֬ೝͷλΠϛϯάͷ໨҆ʹ΋͍ͨ͠ɻ

    • (࠷௿ݶͷηΩϡϦςΟ͸͋Δঢ়ଶͰ)

    S3 ͷը૾Λग़͠ೖΕ͢Δͷ͸ɺͱͯ΋؆୯ͩͬͨɻ

    View Slide

  25. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    25
    Ұ೥৮ͬͯΈͨ
    "NQMJGZͷײ૝

    View Slide

  26. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ྑ͖
    26
    • AWS ࣗମ΁ͷཧղ͕͋Δఔ౓ඞཁ͕ͩɺ

    ෼͔Δͱ಺෦ߏ଄΍ಈ࡞Λཧղ͠΍͍͢ɻ

    View Slide

  27. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ਏΈ
    27
    • όοΫΤϯυػೳ(ಛʹ APIػೳ)ͷσϓϩΠʹ

    ͕͔͔࣌ؒΔɻ

    • AWS తʹ͸ɺ

    CloudFormation Λ࢖͍ɺ

    AppSync ΍ DynamoDB ͋ͨΓͷઃఆΛ৮ΔͷͰɺ

    Θ͔͍ͬͯͯ΋݁ߏ଴ͭɻ

    View Slide

  28. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ྑ͖
    28
    • CLI ΍ؔ࿈ϥΠϒϥϦ͕ OSS Ͱ׆ൃʹ։ൃ͞Ε͍ͯΔɻ

    • ೔ຊͷϢʔβʔίϛϡχςΟ΋੝Γ্͕Γ࢝Ίͨײ͡ɻ

    View Slide

  29. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ਏΈ
    29
    • OSS Ͱ׆ൃʹ։ൃ͞Ε͍ͯΔ෼ɺ

    υΩϡϝϯτ͕ؒʹ߹͍ͬͯͳ͍ɻ

    • ෆ۩߹ʹ౰ͨͬͨΒ GitHub Issue Ͱௐ΂Δɺ

    ͱ͍͏͜ͱ͕ଟ͍ɻ

    View Slide

  30. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ྑ͖
    30
    • OSS ͳͷͰɺؔ܎͍ͯ͠Δਓ͕ࢲͷͭͿ΍͖Λरͬͯ

    Issue & PR ཱͯͯ͘ΕͨΓͨ͠ɻ

    View Slide

  31. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ྑ͖
    31
    • ϑϩϯτΤϯυ + Serverless ͕े෼ʹຯΘ͑Δɻ


    ͜͜Ͱͷ Serverless ͸ɺࣗ෼ͰΠϯελϯεΛ༻ҙ͠ͳ͍ఔ౓ͷҙຯɻ

    View Slide

  32. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ਏΈ
    32
    • ηΩϡϦςΟ΍ੑೳͳͲΛߟ͑Δͱɺ

    Functions Λۦ࢖ͭͭ͠ɺ

    Front-end༻ͷϓϩδΣΫτ + Back-end༻ͷϓϩδΣΫτ

    ͱ͍͏ߏ੒ʹ͠ͳ͍ͱ͍͚ͳ͍Μ͡Όͳ͍͔ɻ

    (΋͘͠͸ɺ AppSync ΛΰϦͬͱ΍Δ͔ɻ)

    View Slide

  33. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    33
    ·ͱΊ

    View Slide

  34. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    ·ͱΊ
    34
    • ݸਓతʹ͸ɺͱͯ΋ָ͘͠ɺ͔ͭɺͬ͘͠Γ͘ΔͷͰɺ

    গͳ͘ͱ΋ݸਓͷ։ൃʹ͸Ҿ͖ଓ͖࢖͏༧ఆɻ

    • ͨͩɺ͜Ε͕Ͱ͖͔ͨΒͱݴͬͯ

    ʮϑϩϯτΤϯυΤϯδχΞͰ͢ʯͱ͍͏ͱɺ

    ฉ͍ͨਓͷΠϝʔδͱζϨΔΑ͏ͳؾ͕͢Δɻ

    • ΋͏͙͢ʮαʔόϨεΤϯδχΞʯͱ͍͏໊લ͕

    όζΔΜ͡Όͳ͔Ζ͏͔ɻ

    View Slide

  35. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    35
    "NQMJGZΛ࢖ͬͯ
    ࠓ೔͔ΒΈΜͳͰ
    αʔόϨεΤϯδχΞ

    View Slide

  36. ΏΔ8FCࡳຈ
    ΏΔ8FCษڧձ!ࡳຈ0O-JOF
    36
    &OE

    View Slide