Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AmplifyとNext.jsとNest.js
Search
yosi
August 08, 2022
Programming
0
550
AmplifyとNext.jsとNest.js
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
46
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
170
「自分の時間を生きる」キャリア論
yoshisan
1
94
小学生でもわかる SlackAPI×GAS
yoshisan
0
100
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
120
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
96
Let's React!! "チョットワカル"の第一歩
yoshisan
1
170
Other Decks in Programming
See All in Programming
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
810
Ruby on cygwin 2025-02
fd0
0
150
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
DROBEの生成AI活用事例 with AWS
ippey
0
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
670
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
Grafana Cloudとソラカメ
devoc
0
180
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
840
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Music & Morning Musume
bryan
46
6.4k
Done Done
chrislema
182
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
YesSQL, Process and Tooling at Scale
rocio
172
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Site-Speed That Sticks
csswizardry
4
390
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Transcript
Amplify Next.js Nest.js ͞ΘͬͯΈͨʂ
ࠓճ࣮ࡍʹ͞ΘͬͯΈͯ,,, • ͱͬͯૉૣ͘ىಈͰ͖Δʂ(ίϚϯυୟ͚ଈʂ) • Ͱɺ࣮ݱͰ͖Δ·ͰʹͪΐͬͱϋϚͬͨͱ͜Ζ͋Γ • ࠓճAmplifyͰNext.jsΛσϓϩΠͱNest.jsͰCRUDͷ2ͭΓ·ͨ͠ʂ
֤ϑϨʔϜϫʔΫʹ͍ͭͯ Amplify • SPA੩తδΣωϨʔλʔΛ࠷ͰϦϦʔε͢ΔͨΊʹ։ൃϓϥοτϑΥʔϜ AmplifyϑΝϛϦʔ • Framework ɹˠΫϥΠΞϯτ͕AWSͷόοΫΤϯυͱ࿈ܞ͢ΔͨΊͷॲཧΛߦͰ࣮Ͱ͖ΔΑ͏ʹ ͢ΔϑϨʔϜϫʔΫͰ •
CLI ɹˠAWSͰαʔόʔϨεͳόοΫΤϯυΛߏஙɾཧ͢ΔͨΊͷCLIπʔϧɻ • Developer Tools ɹˠϑϩϯτΤϯυͱόοΫΤϯυʹରͯ͠ϏϧυɺςετɺσϓϩΠɺϗεςΟϯάΛ ༰қʹ࣮ݱͰ͖ΔAWSαʔϏε
֤ϑϨʔϜϫʔΫʹ͍ͭͯ Next.js • ΞϓϦ͚ʔγϣϯߏஙΊͬͪΌ؆୯ $ npx create-next-app (Reactcreate-react-app ͋Δ͕,,,)
• ϧʔςΟϯά͕༰қ • SPAͱSSRͷͷΓସ͕͑؆୯ Next.js࠾༻اۀ Hulu Uber NETFLIX Github,docer
֤ϑϨʔϜϫʔΫʹ͍ͭͯ Nest.js • TSΛϕʔεͱͨ͠όοΫΤϯυ • ݟͨײ͡SpringBootͱࣅͯΔͱ͜Ζଟ͠ʂ(↓) • Controller,Service,ModuleͷࡾͰͦΕͧΕ͕͋Δɻ(͔Γ͍͢) • ֤ࡾίϚϯυͰ࡞Δ
$ nest g module userModule
ϋϚͬͬͨͱ͜ 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ͰσϓϩΠ
ϋϚͬͬͨͱ͜ 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ͷόʔδϣϯʹʂ
ϋϚͬͬͨͱ͜ Nest.js×Amplify • ͲͪΒΛμϯϩʔυ͢ΔʹNode͕ඞཁɻɹɹݱࡏnode ver 12.9.0 • ͔͠͠Next.jsΛcreate͢Δࡍʹ͜ΜͳΤϥʔ
• ;Ή;Ήɺnode͋͛ͨΒ͍͍ΜͶʂ →͕ɺ͔͠͠ઌ΄ͲΠϯετʔϧͨ͠Amplifynode12.9.0ͰΠϯετʔϧ ͔ͨ͠ΒAmplify init͕Ͱ͖ΜΜΜΜʂʂʂʂʂ
ϋϚͬͬͨͱ͜ Nest.js×Amplify • • ࠓճglobalʹ12.9.0Λࢦఆ͕ͯͨ͠ɺassistanceʹlocal12.9.0Λࢦఆ globalʹݱࡏnodeਪதͷ14.17.4Λઃఆ
→ͪΖΜશͯҰΞϯΠϯετʔϧͯ͠࠶μϯϩʔυͨ͠Α(ͽ͑Μ) ͜Μͳ࣌ nodoenv ΛͬͯόʔδϣϯΛΓସ͑Α͏ʂ
Nest.js Controller • Controller • SpringBootͱ΄΅ಉ͡ • @ControllerͷΑ͏ʹΞϊ ςʔγϣϯΛͬͯΔ෦ͳ
ͲΘ͔Γ͍͢ →AngularௐͯΈ͕ͨ ΞϊςʔγϣϯΛͬͨهड़ ͕͋ΔɻΓAngularΛࢀ ߟʹͯ͠Δ͚ͩ͋Δ
Nest.js Service • Controller • جຊతʹॲཧͷ۩ମ͜͜ɻ • @InjectableͳͲDI(ґଘੑͷ ೖ)χϠͬͯ͠·ͨ͠স
• ֤ϝιουΛ͜Ͷ͜Ͷɻ
Nest.js Module • app.module •
User.module • ͜͜DBͱcontrollerͱserviceΛ͍͍ײ͡ʹܨ͙Πϝʔδ
·ͱΊ ɾNestͱNextΛAmplifyͳͰࡌͤ Δ͜ͱ͕Ͱ͖ͳ͔ͬͨͷͰɺͦ͜ ·ͰͬͯΈ͔ͨͬͨɻ ɾϋϚΔͱ͜Ζ͕͋ͬͨ࠶ ͬͯΈΔͱૣ͍ૣ͍ʂ ɾ·ͩ·ͩศརͳ෦ɺ͍ʹ͘ ͍෦Λ୳͍͖ͯͨ͠͠ʂ
ޚਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Ҿ༻ Next.jsɺAmplifyͰ։ൃڥߏங͢Δ(https://qiita.com/ps-y-uehara/items/4542349252eb3d83e644) NestJSೖɹجૅ͔ΒMomgoDBɺೝূ·ͰΛҰؾʹղઆ ( https://www.youtube.com/watch?v=HQ3tjl_Sh9s )