AmplifyとNext.jsとNest.js

Transcript

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

   View Slide

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

   View Slide

3. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ
   Amplify
   • SPA΍੩తδΣωϨʔλʔΛ࠷଎ͰϦϦʔε͢ΔͨΊʹ։ൃϓϥοτϑΥʔϜ
   AmplifyϑΝϛϦʔ
   • Framework
   
   
   ɹˠΫϥΠΞϯτ͕AWSͷόοΫΤϯυͱ࿈ܞ͢ΔͨΊͷॲཧΛ਺ߦͰ࣮૷Ͱ͖ΔΑ͏ʹ
   ͢ΔϑϨʔϜϫʔΫͰ
   
   
   • CLI
   
   
   ɹˠAWSͰαʔόʔϨεͳόοΫΤϯυΛߏஙɾ؅ཧ͢ΔͨΊͷCLIπʔϧɻ
   
   
   • Developer Tools
   
   
   ɹˠϑϩϯτΤϯυͱόοΫΤϯυʹରͯ͠ϏϧυɺςετɺσϓϩΠɺϗεςΟϯάΛ
   ༰қʹ࣮ݱͰ͖ΔAWSαʔϏε
   

   View Slide

4. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ
   Next.js
   • ΞϓϦ͚ʔγϣϯߏஙΊͬͪΌ؆୯
   

   $ npx create-next-app (React΋create-react-app ͸͋Δ͕,,,)
   
   
   • ϧʔςΟϯά͕༰қ
   
   
   • SPAͱSSRͷͷ੾Γସ͕͑؆୯
   

   

   Next.js࠾༻اۀ
   

   Hulu Uber NETFLIX Github,docer
   

   View Slide

5. ֤ϑϨʔϜϫʔΫʹ͍ͭͯ
   Nest.js
   • TSΛϕʔεͱͨ͠όοΫΤϯυ
   
   
   • ݟͨײ͡SpringBootͱࣅͯΔͱ͜Ζଟ͠ʂ(↓)
   
   
   • Controller,Service,Moduleͷࡾ૚ͰͦΕͧΕ੹຿͕͋Δɻ(෼͔Γ΍͍͢)
   
   
   • ֤ࡾ૚͸ίϚϯυͰ࡞Δ
   

   $ nest g module userModule
   

   View Slide

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ͰσϓϩΠ
   

   View Slide

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ͷόʔδϣϯʹ஫໨ʂ
   

   View Slide

8. ϋϚͬͬͨͱ͜
   Nest.js×Amplify
   • ͲͪΒΛμ΢ϯϩʔυ͢Δʹ΋Node͕ඞཁɻɹɹݱࡏnode ver 12.9.0
   
   
   • ͔͠͠Next.jsΛcreate͢Δࡍʹ͜ΜͳΤϥʔ
   
 

   • ;Ή;Ήɺnode͋͛ͨΒ͍͍Μ΍Ͷʂ
   

   →͕ɺ͔͠͠ઌ΄ͲΠϯετʔϧͨ͠Amplify΋node12.9.0ͰΠϯετʔϧ
   

   ͔ͨ͠ΒAmplify init͕Ͱ͖ΜΜΜΜʂʂʂʂʂ
   

   View Slide

9. ϋϚͬͬͨͱ͜
   Nest.js×Amplify
   •
   

   

   

   
   • ࠓճ͸globalʹ12.9.0Λࢦఆ͕ͯͨ͠ɺassistanceʹlocal12.9.0Λࢦఆ
   

   globalʹݱࡏnodeਪ঑தͷ14.17.4Λઃఆ
   

   →΋ͪΖΜશͯҰ౓ΞϯΠϯετʔϧͯ͠࠶౓μ΢ϯϩʔυͨ͠Α(ͽ͑Μ)
   ͜Μͳ࣌͸
   nodoenv
   
   
   Λ࢖ͬͯόʔδϣϯΛ੾Γସ͑Α͏ʂ
   

   View Slide

10. Nest.js
    Controller
    • Controller
    

    • SpringBootͱ΄΅ಉ͡
    
    
    • @ControllerͷΑ͏ʹΞϊ
    ςʔγϣϯΛ࢖ͬͯΔ෦෼ͳ
    ͲΘ͔Γ΍͍͢
    

    →Angular΋ௐ΂ͯΈ͕ͨ
    

    ΞϊςʔγϣϯΛ࢖ͬͨهड़
    ͕͋Δɻ΍͸ΓAngularΛࢀ
    ߟʹͯ͠Δ͚ͩ͋Δ
    

    View Slide

11. Nest.js
    Service
    • Controller
    

    • جຊతʹॲཧͷ۩ମ͸͜͜ɻ
    
    
    • @InjectableͳͲDI(ґଘੑͷ
    ஫ೖ)͸χϠͬͯ͠·ͨ͠স
    
    
    • ֤ϝιουΛ͜Ͷ͜Ͷɻ
    

    View Slide

12. Nest.js
    Module
    • app.module
    

    

    

    

    

    • User.module
    

    

    

    • ͜͜͸DBͱcontrollerͱserviceΛ͍͍ײ͡ʹܨ͙Πϝʔδ
    

    View Slide

13. ·ͱΊ
    ɾNestͱNextΛAmplifyͳͰࡌͤ
    Δ͜ͱ͕Ͱ͖ͳ͔ͬͨͷͰɺͦ͜
    ·Ͱ΍ͬͯΈ͔ͨͬͨɻ
    
    
    ɾϋϚΔͱ͜Ζ͸͕͋ͬͨ࠶౓
    ΍ͬͯΈΔͱૣ͍ૣ͍ʂ
    
    
    ɾ·ͩ·ͩศརͳ෦෼ɺ࢖͍ʹ͘
    ͍෦෼Λ୳͍͖ͯͨ͠͠ʂ
    

    View Slide

14. ޚਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    Ҿ༻
    

    Next.jsɺAmplifyͰ։ൃ؀ڥߏங͢Δ࿩(https://qiita.com/ps-y-uehara/items/4542349252eb3d83e644)
    
    
    NestJSೖ໳ɹجૅ͔ΒMomgoDBɺೝূ·ͰΛҰؾʹղઆ ( https://www.youtube.com/watch?v=HQ3tjl_Sh9s )
    

    View Slide