Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

֤ϑϨʔϜϫʔΫʹ͍ͭͯ Next.js • ΞϓϦ͚ʔγϣϯߏஙΊͬͪΌ؆୯ 
 $ npx create-next-app (React΋create-react-app ͸͋Δ͕,,,) • ϧʔςΟϯά͕༰қ • SPAͱSSRͷͷ੾Γସ͕͑؆୯ 
 
 Next.js࠾༻اۀ 
 Hulu Uber NETFLIX Github,docer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ϋϚͬͬͨͱ͜ 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ͰσϓϩΠ

Slide 7

Slide 7 text

ϋϚͬͬͨͱ͜ 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ͷόʔδϣϯʹ஫໨ʂ

Slide 8

Slide 8 text

ϋϚͬͬͨͱ͜ Nest.js×Amplify • ͲͪΒΛμ΢ϯϩʔυ͢Δʹ΋Node͕ඞཁɻɹɹݱࡏnode ver 12.9.0 • ͔͠͠Next.jsΛcreate͢Δࡍʹ͜ΜͳΤϥʔ 
 
 • ;Ή;Ήɺnode͋͛ͨΒ͍͍Μ΍Ͷʂ 
 →͕ɺ͔͠͠ઌ΄ͲΠϯετʔϧͨ͠Amplify΋node12.9.0ͰΠϯετʔϧ 
 ͔ͨ͠ΒAmplify init͕Ͱ͖ΜΜΜΜʂʂʂʂʂ

Slide 9

Slide 9 text

ϋϚͬͬͨͱ͜ Nest.js×Amplify • 
 
 
 • ࠓճ͸globalʹ12.9.0Λࢦఆ͕ͯͨ͠ɺassistanceʹlocal12.9.0Λࢦఆ 
 globalʹݱࡏnodeਪ঑தͷ14.17.4Λઃఆ 
 →΋ͪΖΜશͯҰ౓ΞϯΠϯετʔϧͯ͠࠶౓μ΢ϯϩʔυͨ͠Α(ͽ͑Μ) ͜Μͳ࣌͸ nodoenv Λ࢖ͬͯόʔδϣϯΛ੾Γସ͑Α͏ʂ

Slide 10

Slide 10 text

Nest.js Controller • Controller 
 • SpringBootͱ΄΅ಉ͡ • @ControllerͷΑ͏ʹΞϊ ςʔγϣϯΛ࢖ͬͯΔ෦෼ͳ ͲΘ͔Γ΍͍͢ 
 →Angular΋ௐ΂ͯΈ͕ͨ 
 ΞϊςʔγϣϯΛ࢖ͬͨهड़ ͕͋Δɻ΍͸ΓAngularΛࢀ ߟʹͯ͠Δ͚ͩ͋Δ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Nest.js Module • app.module 
 
 
 
 
 • User.module 
 
 
 • ͜͜͸DBͱcontrollerͱserviceΛ͍͍ײ͡ʹܨ͙Πϝʔδ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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