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


    ͞ΘͬͯΈͨʂ


    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