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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

November 30, 2020
Tweet

Transcript

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

  2. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ୭ 2 PHP Conference Hokkaido 2019 ໊લ ໦ݪ

    ୎໵ / ɹɹ@tacck ॴଐ גࣜձࣾϊʔεσΟςʔϧ
 ։ൃDivision ٕज़ਪਐGroup / Leader ओ࠵ ΏΔWebษڧձ@ࡳຈ εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ ޷͖ͳ
 ϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  3. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 3 ࠓ೥͸৭ʑ͋Γ·ͨ͠

  4. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ࠓ೥͸৭ʑ͋Γ·ͨ͠ 4 • 2020೥2݄ʹษڧձ༧ఆΛٸᬎதࢭʹ • 2020೥8݄ʹΦϯϥΠϯͰ࠶։ • Ҏ߱ɺ10݄ɺ11݄(ࠓճ)ͱɺͳΜͱ͔ܧଓͰ͖ΔΑ͏ʹ

  5. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ࠓ೥͸৭ʑ͋Γ·ͨ͠ 5 • 2020೥2݄ʹษڧձ༧ఆΛٸᬎதࢭʹ • 2020೥8݄ʹΦϯϥΠϯͰ࠶։ • Ҏ߱ɺ10݄ɺ11݄(ࠓճ)ͱɺͳΜͱ͔ܧଓͰ͖ΔΑ͏ʹ

    ۭനͷظؒ
  6. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ۭനͷظؚؒΊͯɺࠓ೥͸ AWS Amplify Λ࢖ͬͨ
 WebγεςϜ࡞੒ʹτϥΠͨ͠(΄΅)Ұ೥Ͱͨ͠ɻ 6

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

    1݄ 1 2 3 4 5 0 2021೥
  8. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 8 ೥ऴΘΓ ʙ ೥݄ 

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

    WebSocket ͷษڧ༻ɻ • όοΫΤϯυ͸ Node.js Ͱ࡞ͬͯ Heroku ͰՔಇɻ • Alexa Λ࢖࣭ͬͯ໰Λਐߦͤ͞Δ͜ͱͰɺ
 Ξϯέʔτ΁ͷࢀՃҙཉΛߴΊͯ΋Β͏Πϝʔδɻ • ݸਓ༻ͷMVPͳͷͰɺ؅ཧը໘͕ແ͔ͬͨɻ
  10. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 10 ೥݄ ʙ ೥݄ 

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

    બఆཧ༝ → ڈ೥͸ Firebase Λ৮ͬͨͷͰɺ
 ࠓ೥͸ಉछͷҧ͏΋ͷΛ৮ͬͯΈ͔ͨͬͨɻ • Ҿ͖ଓ͖ɺ Vue.js (+Vuetify) ͷֶशɻ • Amplify ॳΊͯ + Vue.js ෆ׳Ε΋͋ΓɺCRUD·Ͱ͸Ͱ͖͕ͨɺ
 γεςϜͱͯ͠ͷ׬੒ʹ͸ࢸΒͣɻ
  12. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ΞϯέʔτγεςϜͷ؅ཧը໘ࢼ࡞ 12 • ͜ΕΛ࡞͍ͬͯΔ࠷தʹΦϯαΠτͰͷษڧձΛ
 ։࠵Ͱ͖ͳ͍ঢ়گʹͳͬͨͷͰɺ
 ΞϯέʔτγεςϜͷίϯηϓτ
 (ΦϯαΠτͰԻ੠ૢ࡞ʹΑΔΞϯέʔτ)
 ͕༳Β͍ͩɺɺͱ͍͏ͷ΋େ͍ʹ͋Δɻ

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

  14. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ϦΞϧλΠϜײ৘ڞ༗γεςϜFNPGVMM 14 • ΦϯϥΠϯͰͷਓͱਓͱͷܨ͕Γʹରͯ͠Կ͔Ͱ͖ͳ͍͔?
 ͱߟ͑ͯ࡞ͬͯΈͨɻ • ಛʹώοτ͸ͤͣɻ •

    ഑৴ʹࡌͤΔʹ͋ͨΓɺ
 ʮը໘Λڞ༗ͮ͠Β͍ʯ
 ͱ͍͏ͷ͸ࠓޙͷ՝୊ɻ • Vue.js (+Vuetify) ͱ͋Θͤͯɺ Amplify ΁ͷཧղ΋ਂ·Δɻ
  15. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ϦΞϧλΠϜײ৘ڞ༗γεςϜFNPGVMM 15 • ཁૉٕज़ͱͯ͠ɺϦΞϧλΠϜΞϯέʔτΛ
 Amplify Λ࢖ͬͨ΋ͷʹॻ͖׵͑Մೳͩͳɺ
 ͱ͍͏஌ݟ͸ͨ·ͬͨɻ

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

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

    ࣾ಺ͷ࠲੮؅ཧγεςϜΛϓϩτλΠϓ։ൃɻ https://www.northdetail.co.jp/blog/870/
  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/
  19. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ۀ຿Ͱࣾ಺γεςϜͷϓϩτλΠϓ։ൃ 19 • ࣾ಺ͷϝϯόʔͱڞಉ։ൃͨ͜͠ͱͰɺ
 ෳ਺ਓͰ։ൃ͢Δͱ͖ͷ Amplify ͷ؀ڥपΓͷ஌ݟ͕ಘΒΕͨɻ •

    ͕ɺࠓͰ΋ͪΐ͍ͪΐ͍Ҿ͔͔ͬΔɻ
  20. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 20 ೥݄ ʙ ೥݄ 

  21. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ୹จΦϯϥΠϯεϥΠυ 21 • վΊͯɺΦϯϥΠϯͰͰ͖ͦ͏ͳ΋ͷͱͯ͠ɺνϟϨϯδɻ • γεςϜࣗମ͸େےͰ͖͍ͯΔ͕ɺ
 ࣗ෼ͷதͰίϯηϓτ͕ϒϨ͖ͯͨͷΛײͨ͡ͷͰɺ
 ͍ͬͨΜ։ൃఀࢭɻ

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

  23. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ࣋ͪ෺ͷ؆୯ͳϦετγεςϜ 23 • ࠓ೥ͷ࢒Γ3ϲ݄΄ͲͰɺࣗ෼ͷཉ͍͠΋ͷΛ
 ࡞Ζ͏ͱࢥͬͯ։ൃதɻ • ࣗ෼ͷ͍࣋ͬͯΔ΋ͷΛ
 ʮԿ೔(ͱ͔Կ೥ͱ͔)͍࣋ͬͯΔ͔ʯ


    ʮͲ͜ʹஔ͍͍ͯΔ͔ʯ
 ͕࠷௿ݶΘ͔Δ΋ͷ͕ཉ͔ͬͨ͠ͷͰɻ
  24. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ࣋ͪ෺ͷ؆୯ͳϦετγεςϜ 24 • ༸෰ͷങ͍ସ͑Ͳ͖͕Θ͔Βͳ͍ͷͰɺ
 n೥ܦͬͨΒങ͓͏ɺͱ͔͍͏ͱ͖ͷҙࢥܾఆ༻ʹɻ • ͋ͱ͸ɺඇৗ༻ͷΞΠςϜͷফඅظݶ΍
 ֬ೝͷλΠϛϯάͷ໨҆ʹ΋͍ͨ͠ɻ

    • (࠷௿ݶͷηΩϡϦςΟ͸͋Δঢ়ଶͰ)
 S3 ͷը૾Λग़͠ೖΕ͢Δͷ͸ɺͱͯ΋؆୯ͩͬͨɻ
  25. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 25 Ұ೥৮ͬͯΈͨ "NQMJGZͷײ૝

  26. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ྑ͖ 26 • AWS ࣗମ΁ͷཧղ͕͋Δఔ౓ඞཁ͕ͩɺ
 ෼͔Δͱ಺෦ߏ଄΍ಈ࡞Λཧղ͠΍͍͢ɻ

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

    తʹ͸ɺ
 CloudFormation Λ࢖͍ɺ
 AppSync ΍ DynamoDB ͋ͨΓͷઃఆΛ৮ΔͷͰɺ
 Θ͔͍ͬͯͯ΋݁ߏ଴ͭɻ
  28. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ྑ͖ 28 • CLI ΍ؔ࿈ϥΠϒϥϦ͕ OSS Ͱ׆ൃʹ։ൃ͞Ε͍ͯΔɻ •

    ೔ຊͷϢʔβʔίϛϡχςΟ΋੝Γ্͕Γ࢝Ίͨײ͡ɻ
  29. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ਏΈ 29 • OSS Ͱ׆ൃʹ։ൃ͞Ε͍ͯΔ෼ɺ
 υΩϡϝϯτ͕ؒʹ߹͍ͬͯͳ͍ɻ • ෆ۩߹ʹ౰ͨͬͨΒ

    GitHub Issue Ͱௐ΂Δɺ
 ͱ͍͏͜ͱ͕ଟ͍ɻ
  30. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ྑ͖ 30 • OSS ͳͷͰɺؔ܎͍ͯ͠Δਓ͕ࢲͷͭͿ΍͖Λरͬͯ
 Issue & PR

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


    ͜͜Ͱͷ Serverless ͸ɺࣗ෼ͰΠϯελϯεΛ༻ҙ͠ͳ͍ఔ౓ͷҙຯɻ
  32. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ਏΈ 32 • ηΩϡϦςΟ΍ੑೳͳͲΛߟ͑Δͱɺ
 Functions Λۦ࢖ͭͭ͠ɺ
 Front-end༻ͷϓϩδΣΫτ +

    Back-end༻ͷϓϩδΣΫτ
 ͱ͍͏ߏ੒ʹ͠ͳ͍ͱ͍͚ͳ͍Μ͡Όͳ͍͔ɻ
 (΋͘͠͸ɺ AppSync ΛΰϦͬͱ΍Δ͔ɻ)
  33. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 33 ·ͱΊ

  34. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF ·ͱΊ 34 • ݸਓతʹ͸ɺͱͯ΋ָ͘͠ɺ͔ͭɺͬ͘͠Γ͘ΔͷͰɺ
 গͳ͘ͱ΋ݸਓͷ։ൃʹ͸Ҿ͖ଓ͖࢖͏༧ఆɻ • ͨͩɺ͜Ε͕Ͱ͖͔ͨΒͱݴͬͯ
 ʮϑϩϯτΤϯυΤϯδχΞͰ͢ʯͱ͍͏ͱɺ


    ฉ͍ͨਓͷΠϝʔδͱζϨΔΑ͏ͳؾ͕͢Δɻ • ΋͏͙͢ʮαʔόϨεΤϯδχΞʯͱ͍͏໊લ͕
 όζΔΜ͡Όͳ͔Ζ͏͔ɻ
  35. ΏΔ8FCࡳຈ ΏΔ8FCษڧձ!ࡳຈ0O-JOF 35 "NQMJGZΛ࢖ͬͯ ࠓ೔͔ΒΈΜͳͰ αʔόϨεΤϯδχΞ

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