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

AmplifyとNext.jsとNest.js

yosi
August 08, 2022

 AmplifyとNext.jsとNest.js

yosi

August 08, 2022
Tweet

More Decks by yosi

Other Decks in Programming

Transcript

  1. Amplify Next.js Nest.js ͞ΘͬͯΈͨʂ

  2. ࠓճ࣮ࡍʹ͞ΘͬͯΈͯ,,, • ͱͬͯ΋ૉૣ͘ىಈͰ͖Δʂ(ίϚϯυୟ͚͹ଈʂ) • Ͱ΋ɺ࣮ݱͰ͖Δ·ͰʹͪΐͬͱϋϚͬͨͱ͜Ζ΋͋Γ • ࠓճ͸AmplifyͰNext.jsΛσϓϩΠͱNest.jsͰCRUDͷ2ͭ΍Γ·ͨ͠ʂ

  3. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ Amplify • SPA΍੩తδΣωϨʔλʔΛ࠷଎ͰϦϦʔε͢ΔͨΊʹ։ൃϓϥοτϑΥʔϜ AmplifyϑΝϛϦʔ • Framework ɹˠΫϥΠΞϯτ͕AWSͷόοΫΤϯυͱ࿈ܞ͢ΔͨΊͷॲཧΛ਺ߦͰ࣮૷Ͱ͖ΔΑ͏ʹ ͢ΔϑϨʔϜϫʔΫͰ •

    CLI ɹˠAWSͰαʔόʔϨεͳόοΫΤϯυΛߏஙɾ؅ཧ͢ΔͨΊͷCLIπʔϧɻ • Developer Tools ɹˠϑϩϯτΤϯυͱόοΫΤϯυʹରͯ͠ϏϧυɺςετɺσϓϩΠɺϗεςΟϯάΛ ༰қʹ࣮ݱͰ͖ΔAWSαʔϏε
  4. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ Next.js • ΞϓϦ͚ʔγϣϯߏஙΊͬͪΌ؆୯ 
 $ npx create-next-app (React΋create-react-app ͸͋Δ͕,,,)

    • ϧʔςΟϯά͕༰қ • SPAͱSSRͷͷ੾Γସ͕͑؆୯ 
 
 Next.js࠾༻اۀ 
 Hulu Uber NETFLIX Github,docer
  5. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ Nest.js • TSΛϕʔεͱͨ͠όοΫΤϯυ • ݟͨײ͡SpringBootͱࣅͯΔͱ͜Ζଟ͠ʂ(↓) • Controller,Service,Moduleͷࡾ૚ͰͦΕͧΕ੹຿͕͋Δɻ(෼͔Γ΍͍͢) • ֤ࡾ૚͸ίϚϯυͰ࡞Δ

    
 $ nest g module userModule
  6. ϋϚͬͬͨͱ͜ Amplify×Next.jsʹ͍ͭͯ • AmplifyΛ࢖͏ͷʹҎԼͷྲྀΕͰ΍ͬͯΈͨ 
 1.AWS CLIͷΠϯετʔϧ 
 →aws con

    f igure Ͱpro f ileΛઃఆ 
 2.Amplify CLIͷΠϯετʔϧ 
 →Πϯετʔϧʹ͸Node͕ඞཁʂ 
 3.Next.jsͰϓϩδΣΫτ࡞ͬͯ amplify init Λ͢Δɻ 
 4.Next.jsͷίʔυΛGitHubʹ͋͛Δ 
 5Amplify͔ΒGUIͰσϓϩΠ
  7. ϋϚͬͬͨͱ͜ Amplify×Next.jsʹ͍ͭͯ • AmplifyΛ࢖͏ͷʹҎԼͷྲྀΕͰ΍ͬͯΈͨ 
 1.AWS CLIͷΠϯετʔϧ 
 →aws con

    f igure Ͱpro f ileΛઃఆ 
 2.Amplify CLIͷΠϯετʔϧ 
 →Πϯετʔϧʹ͸Node͕ඞཁʂ 
 3.Next.jsͰϓϩδΣΫτ࡞ͬͯ amplify init Λ͢Δɻ 
 4.Next.jsͷίʔυΛGitHubʹ͋͛Δ 
 5Amplify͔ΒGUIͰσϓϩΠ ͸͍ɺ͜͜ͰҾֻ͔ͬΓ·ͨ͠ɻ Nodeͷόʔδϣϯʹ஫໨ʂ
  8. ϋϚͬͬͨͱ͜ Nest.js×Amplify • ͲͪΒΛμ΢ϯϩʔυ͢Δʹ΋Node͕ඞཁɻɹɹݱࡏnode ver 12.9.0 • ͔͠͠Next.jsΛcreate͢Δࡍʹ͜ΜͳΤϥʔ 
 


    • ;Ή;Ήɺnode͋͛ͨΒ͍͍Μ΍Ͷʂ 
 →͕ɺ͔͠͠ઌ΄ͲΠϯετʔϧͨ͠Amplify΋node12.9.0ͰΠϯετʔϧ 
 ͔ͨ͠ΒAmplify init͕Ͱ͖ΜΜΜΜʂʂʂʂʂ
  9. ϋϚͬͬͨͱ͜ Nest.js×Amplify • 
 
 
 • ࠓճ͸globalʹ12.9.0Λࢦఆ͕ͯͨ͠ɺassistanceʹlocal12.9.0Λࢦఆ 
 globalʹݱࡏnodeਪ঑தͷ14.17.4Λઃఆ

    
 →΋ͪΖΜશͯҰ౓ΞϯΠϯετʔϧͯ͠࠶౓μ΢ϯϩʔυͨ͠Α(ͽ͑Μ) ͜Μͳ࣌͸ nodoenv Λ࢖ͬͯόʔδϣϯΛ੾Γସ͑Α͏ʂ
  10. Nest.js Controller • Controller 
 • SpringBootͱ΄΅ಉ͡ • @ControllerͷΑ͏ʹΞϊ ςʔγϣϯΛ࢖ͬͯΔ෦෼ͳ

    ͲΘ͔Γ΍͍͢ 
 →Angular΋ௐ΂ͯΈ͕ͨ 
 ΞϊςʔγϣϯΛ࢖ͬͨهड़ ͕͋Δɻ΍͸ΓAngularΛࢀ ߟʹͯ͠Δ͚ͩ͋Δ
  11. Nest.js Service • Controller 
 • جຊతʹॲཧͷ۩ମ͸͜͜ɻ • @InjectableͳͲDI(ґଘੑͷ ஫ೖ)͸χϠͬͯ͠·ͨ͠স

    • ֤ϝιουΛ͜Ͷ͜Ͷɻ
  12. Nest.js Module • app.module 
 
 
 
 
 •

    User.module 
 
 
 • ͜͜͸DBͱcontrollerͱserviceΛ͍͍ײ͡ʹܨ͙Πϝʔδ
  13. ·ͱΊ ɾNestͱNextΛAmplifyͳͰࡌͤ Δ͜ͱ͕Ͱ͖ͳ͔ͬͨͷͰɺͦ͜ ·Ͱ΍ͬͯΈ͔ͨͬͨɻ ɾϋϚΔͱ͜Ζ͸͕͋ͬͨ࠶౓ ΍ͬͯΈΔͱૣ͍ૣ͍ʂ ɾ·ͩ·ͩศརͳ෦෼ɺ࢖͍ʹ͘ ͍෦෼Λ୳͍͖ͯͨ͠͠ʂ

  14. ޚਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Ҿ༻ 
 Next.jsɺAmplifyͰ։ൃ؀ڥߏங͢Δ࿩(https://qiita.com/ps-y-uehara/items/4542349252eb3d83e644) NestJSೖ໳ɹجૅ͔ΒMomgoDBɺೝূ·ͰΛҰؾʹղઆ ( https://www.youtube.com/watch?v=HQ3tjl_Sh9s )