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
650
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
AmplifyとNext.jsとNest.js
yosi
August 08, 2022
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
110
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
210
「自分の時間を生きる」キャリア論
yoshisan
1
120
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
140
認証認可
yoshisan
1
160
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
140
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
550
信頼性について考えてみる(SRE NEXT 2026 miniLT)
hayama17
0
240
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
ternbusty
1
130
Claude Opus 4.6以後の受託開発エンジニアの変化(Claude Code開発ノウハウ大公開スペシャルbyクラスメソッド)
iidatakuma
1
960
komatsuna「分散システムにおけるバグ分析手法」
komatsunaqa
0
230
仕様駆動開発の消費期限
watany
7
1.7k
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
200
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
yuppeeng
0
180
Apache Hive: そしてCloud Native Lakehouseへ
okumin
1
200
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
640
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
kajitack
3
1.1k
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
shibuchaaaan
0
210
Featured
See All Featured
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
230
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
200
Being A Developer After 40
akosma
91
590k
Agile that works and the tools we love
rasmusluckow
331
22k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
420
The Language of Interfaces
destraynor
162
27k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
2.2k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
350
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
72
41k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
440
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
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 )