AmplifyGen2+Nxで構築 するNext.jsモノレポ構成

Release for Amplify Boost Up #06 from Japan

Transcript

1. "NQMJGZ(FO /YͰߏங ͢Δ/FYUKTϞϊϨϙߏ੒  1 3
2. ࣗݾ঺հ Mamoru ICHISE(ま〜) デザインカロン合同会社 所属 2 8FC੍࡞ ϩΰ ໊ࢗɾγϣοϓΧʔυ γεςϜ։ൃ ಋೖɾҠߦࢧԉ ൐૸ࢧԉ %9 @mah77ss Qiita https://qiita.com/mah77ss ࠷ۙ͸৽αʔϏεͷ։ൃ΍ϫʔΫϑϩʔจॻ؅ཧҊ݅ʹैࣄ ͳͳͪΌΜ
3. ϙϦϨϙ • γεςϜ΍αʔϏεɺίʔυ͝ͱʹϦϙδτϦΛ෼͚Δ࣮૷ 3 "ΞϓϦ ϑϩϯτ ϑϩϯτ ϑϩϯτ υΩϡϝϯτ ʜ όοΫΤϯυ πʔϧ ʜ #γεςϜ $αΠτ όοΫΤϯυ αϒγεςϜ ࡞ۀ͝ͱʹϦϙδτϦΛ੾Γସ͑Δख͕ؒൃੜɻϦϙδτϦͷ؅ཧ΋൥ࡶʹɾɾɾɻ 共通化できるコード の分散 リポジトリごとにパッ ケージバージョンを 管理 全体の作業状況が 分からない Made by ⼿書きﾊﾞォント
4. ϑϩϯτ ϞϊϨϙ • ؆୯ʹݴ͑͹ɺϦϙδτϦͻͱͭͰશͯͷίʔυΛ؅ཧ 4 "ΞϓϦ ϑϩϯτ ϑϩϯτ υΩϡϝϯτ ʜ όοΫΤϯυ πʔϧ ʜ #γεςϜ $αΠτ όοΫΤϯυ αϒγεςϜ ϦϙδτϦͷ੾Γସ͕͑ෆཁʹͳΓɺ౷Ұతʹར༻Մೳɻ(PPHMF౳େखاۀ΋࠾༻͢Δ࢓૊Έɻ 各プロジェクト、サー ビスはディレクトリ階 層で分ける。 全体に渡る修正も1 つのコミットで可能。 リポジトリのサイズ は大きくなる。 プロジェクト間の依 存関係の管理が必 要に。
5. ͖͔͚ͬ 5 • (FO
   ͷυΩϡϝϯτʹϞϊϨϙͷ ηοτΞοϓํ๏ͷهࡌ͕͋ͬͨɻ • (FO
   ʹ΋͕͋ͬͨɺؾʹ͍ͯ͠ͳ ͔ͬͨɻ • (FO
   ͸ /Y ΍ ZBSO
   XPSLTQBDFT
   ͳ ͲͷϞϊϨϙπʔϧʹରԠ͍ͯ͠ΔΒ ͍͠ɻ • ZBSO
   ͸࢖͍ͬͯͳ͍͠ɺOQN XPSLTQBDF
   ͸໌֬ʹυΩϡϝϯτʹ هࡌ͞Ε͍ͯͳ͔ͬͨɻ • ʮ/Yʯͱ΍ΒΛ࢖ͬͯΈΑ͏ʂ ͪΐ͏Ͳ৽نαʔϏεͷاը͕͋Γ ࢼͯ͠ΈΑ͏ʂ
6. /Y • オープンソースのビルドシステム • プロジェクトの依存関係を管理 • リポジトリが巨⼤化しても⾼速なCI • キャッシュによる開発時間削減 • ⼤規模なE2Eテストに対応 • Nxプラグインによる拡張が可能 WebフレームワークもテストライブラリもNxでインストール • NxCloudと連携することで、分散キャッシュ や分散タスク実⾏が可能 6 https://nx.dev/ େن໛$*޲͚ͷػೳʹେֻ͔Γͳ࢓૊ΈΛ͍࣋ͬͯͦ͏ɻ ࠓճ͸εϞʔϧελʔτͰɺ؆୯ͳ8FCαΠτ /FYUKT ͷ࡞੒Ͱ·ͣ࢖ͬͯΈΔɻ
7. ࠓճ࡞Δ8FCαΠτͷߏ੒ 7 ϑϩϯτ 8FCαΠτ όοΫΤϯυ Next.js + TypeScript TypeScript リポジトリ • ࠓճͷ໨త͸ʮϑϩϯτͱόοΫΤϯυΛ෼͚ͭͭ΋ɺͭͷϦϙδτϦͰίʔυΛ؅ཧ͢Δʯ AWS Cloud Nxワークスペース Amplify Managed Backend Hosting ϦϙδτϦͷʮϑϩϯτʯʮόοΫΤϯυʯͦΕͧΕͷϒϥϯν΁ϓϧϦΫ֤ͯ͠σϓϩΠ࣮ߦ ϑϩϯτϒϥϯν όοΫΤϯυ ϒϥϯν $MPVE'SPOU 4 "QQ4ZOD %ZOBNP $PHOJUP -BNCEB 4
8. ։ൃ࣌ͷϩʔΧϧߏ੒ 8 $VSTPS .BD#PPL
   "JS "SN 8JOEPXT -BQUPQ (JU)VC 44) 84-
   
   -JOVY 6CVOUV %FW$POUBJOFS /PEFKT
    CVMMTFZFTMJN
   %FCJBO 1VMM
    1VTI "84
   440 OQY BNQY TBOECPY
   ౳ 1VMM
    1VTI ϞϊϨϙͱݴ͍ͭͭɺ%PDLFS
   ͷ؀ڥߏ੒ͱΞϓϦͷߏ੒ΛผϦϙδτϦͰ؅ཧ ؅ཧ্ɺϦϙδτϦΛೖΕࢠʹ͍ͯ͠Δ ࠷ॳ͸ಉҰϦϙδτϦʹ͍͕ͯͨ͠ɺ"NQMJGZ
   ΞϓϦ࡞੒࣌ʹϦϙδτϦϧʔτͷ಺༰Ͱ ϓϩδΣΫτछྨ͕൑ఆ͞ΕͨͨΊɺผϦϙδτϦͱͨ͠ɻ ϧʔτʹ/Y͕ಋೖ͞Ε͍ͯͳ͍ͱɺ/Y؅ཧͷϦϙδτϦͩͱ"NQMJGZ͕൑ผͯ͘͠Εͳ͍ Ω ・Node 18以上ではsandboxが起動しな い問題があった。今はどうだろう？ ・CursorでSSH経由のDevContainerへ 接続できない問題は修正された。 ・Arm版Macだとaws configureコマンド が失敗。対策はあるみたいだけれど、手っ取り 早くSSHで回避 ・ DevContainerが使えることで、手元の 環境のように操作できる。
9. /Y࡞੒ʙσϓϩΠμΠδΣετ • 下記Qiita投稿記事を編集してダイジェストでお送りします。 9 今年の5⽉にチャレンジした内容を記載しているので、最新の仕様とは、異なる場合があります。 https://qiita.com/mah77ss/items/816de5cc084c6f739fe7
10. /YϫʔΫεϖʔε࡞੒ • 最初に、リポジトリルートにNxワークスペースを作成する。 • --preset=ts はTypeScriptのプリセット指定。--preset=next を指定すると、Next.js プロジェクト のプリセットが作成されるが、バックエンドのデプロイにも「required-server-files.json」が必須 となりデプロイできないので回避 • リモートキャッシュの使⽤を聞かれるが、使⽤しないとしている。(NxCloudに接続される？) • サブディレクトリにプロジェクトが作成されるので、作成後、リポジトリルートへ移動している。 10 ϫʔΫεϖʔε࡞੒ # リポジトリルートでコマンド実⾏ $ npx create-nx-workspace@latest --preset=ts (略)
11. /YόοΫΤϯυ࡞੒ • libディレクトリへ Nx 共有ライブラリ test-shared-backend を作成する。 • 作成したライブラリへ amplify をインストールする。 • モノレポは package.json が全体でただ⼀つのため、ライブラリ内の package.json をリポジトリ ルートの package.json へとマージして、削除する。 (test-shared-backend/amplify 配下の package.json も削除) 11 όοΫΤϯυ ϥΠϒϥϦ ͷ࡞੒ # リポジトリルートでコマンド実⾏ $ nx g @nx/js:library test-shared-backend --directory=lib (略) $ cd lib/test-shared-backend/ $ npm create amplify@latest (略)
12. /Yϑϩϯτ࡞੒ ɾࣄલʹ OY ΛάϩʔόϧΠϯετʔϧ͢Δɻ 
    OQN J H
    OY!MBUFTU ɾBQQT
    σΟϨΫτϦ΁ /FYUKT ΞϓϦ UFTUOY Λ࡞੒͢Δɻ
    ɾQSPKFDUKTPO ΁ /FYUKT Ϗϧυ༻ͷλʔήοτΛ௥Ճޙɺ OY TFSWF
    UFTUOY ͰϩʔΧϧ࣮ߦɻ Ϗϧυ͸ OY CVJME
    UFTUOY ίϚϯυ 12 /FYUKTϑϩϯτΞϓϦͷ࡞੒ # リポジトリルートでコマンド実⾏ $ npm i -D @nx/next # install plugin for Nx/Next.js # Nx 15までは @nrwl/next を使⽤ $ nx g @nx/next:app test-nx --directory=apps (略)
13. /YϦϙδτϦͷσΟϨΫτϦߏ੒ サブディレク トリ3 サブディレク トリ2 サブディレク トリ リポジトリ ルート / apps test-nx lib test-shared- backend amplify 13 package.json node_modules
14. όοΫΤϯυͷσϓϩΠ 14 MJCUFTUTIBSFECBDLFOE
    ΛϞϊϨϙϧʔτσΟϨΫτϦͱͯ͠ࢦఆͯ͠ɺਐΊΔɻ
15. όοΫΤϯυͷσϓϩΠ 15 • ⾃動検出されたフレームワーク はAmplify Gen2 • フロントエンドビルドコマンド は「mkdir ./dist && touch ./dist/index.html」、出⼒ ディレクトリをビルドは 「dist」を指定 ਐΊͯσϓϩΠɻΤϥʔ͕ग़ͨΒ BNQMJGZZNM Λमਖ਼͢Δɻ
16. ϑϩϯτͷσϓϩΠ 16 BQQTUFTUOY ΛϞϊϨϙϧʔτσΟϨΫτϦͱͯ͠ࢦఆͯ͠ɺਐΊΔɻ
17. ϑϩϯτͷσϓϩΠ 17 • ⾃動検出されたフレームワーク はNext.js、Amplify Gen2 • フロントエンドビルドコマンド は「npx nx build test-nx」、出 ⼒ディレクトリをビルドは 「.next」を指定 ਐΊͯσϓϩΠɻΤϥʔ͕ग़ͨΒ BNQMJGZZNM Λमਖ਼͢Δɻ
18. σϓϩΠ੒ޭ • ⾊々やって・・・ 18
19. σϓϩΠϒϥϯνͷઃఆ 19 main front- main shared- main front- develop shared- develop front- feature shared- feature ϑϩϯτͷ σϓϩΠ όοΫΤϯυͷ σϓϩΠ 連携 連携 ΞϓϦ΍ϥΠϒϥϦΛ૿΍ͨ͠Βɺ࿈ܞ༻ϒϥϯν͕ͲΜͲΜ૿͑Δʁཧ૝ͷܗ͕෼͔Βͳ͍ɻ main όοΫΤϯυͱ ϑϩϯτͷಉ࣌σϓϩΠ 連携 develop feature Ұൠతʹ͸ಉ࣌σϓϩΠ ͋͑ͯ෼͚ͯΈΔ ϞϊϨϙͷར఺͕ݮΔ͕σϓϩΠΛݶఆతʹ͢Δ
20.  σϓϩΠΤϥʔͳͲ݁ߏग़Δɻ౎౓τϥϒϧγϡʔςΟϯά͕େมɻ  ೝՄϦιʔε ϢʔβʔϓʔϧͳͲ ͷ࡟আͷ࢓ํ͕෼͔Βͳ͍ɻ(FO
    ͳΒ BNQMJGZ
    SFNPWF
    BVUI
    Ͱ؆୯ʹ࡟আͰ͖ͨɻ ݁ہɺ$MPVE'PSNBUJPO
    ͔Β֘౰ελοΫΛ࡟আ  (FO
    ͔Β "VUI
    ͷ
    VTFSOBNF
    ͕࢖͑ͳ͍ɻ "NQMJGZ
    (FO
    ͷυΩϡϝϯτʹهࡌ͋Γɻ QSFGFSSFE
    VTFSOBNF
    ଐੑΛ࢖͏  ௥Ճͨ͠ -BNCEB
    ͷݖݶΤϥʔ͕ $034
    ະઃఆΤϥʔͱͯ͠ฦ٫͞ΕΔɻݖݶΤϥʔͷ಺༰Λ औಘ͢Δʹ͸ɺ"1*
    (BUFXBZ
    ͷʮήʔτ΢ΣΠϨεϙϯεʯ΁
    $034
    ͷઃఆΛผ్ߦ͏ɻ  ௥Ճͨ͠ -BNCEB
    ͷ࣮ߦʹɺผ్ʮFYFDVUFBQJ*OWPLFʯΛʮBNQMJGZBNQMJGZCBDLFOEOP BNQMJGZ"VUI"1154(SPVQ3PMFʙʯϩʔϧ΁௥Ճ͢Δඞཁ͕͋ͬͨɻ ٧·ͬͨͱ͜Ζ౳ 20
21. 
    "NQMJGZ6* ͷ 4UPSBHF.BOBHFS ίϯϙʔωϯτΛ࢖͏ʹ͸ɺ"VUIFOUJDBUPS
    Ͱϥοϓ͢Δ͔ɺ XJUI"VUIFOUJDBUPSΛݺͼग़͢ඞཁ͕͋Γɺ "VUIFOUJDBUPS1SPWJEFS
    Ͱϥοϓ͢Δ͚ͩͰ͸μϝ ͩͬͨɻ  (FOͷࠒʹ΋͕͋ͬͨɺ4UPSBHF
    ͷόέοτ΁ΞΫηε͢ΔࡍɺೝূࡁϢʔβʔͰΞΫηεͰ͖ ͍ͯͨͷ͕ɺ$PHOJUP
    άϧʔϓʹॴଐ్ͨ͠୺ΞΫηε͕Ͱ͖ͳ͘ͳͬͨɻೝূࡁҎ֎ʹ΋ɺ $PHOJUP
    άϧʔϓʹର͢ΔΞΫηεڐՄΛผ్௥Ճ͢Δඞཁ͕͋Δɻ ٧·ͬͨͱ͜Ζ౳ 21
22. 
    "NQMJGZ6* ͷ 3FBDU
    7JFX
    ίϯϙʔωϯτ͸ EJW
    λάͷ୅ΘΓʹؾܰʹ࢖͑ͦ͏ͳงғؾͩͱࢥͬͨͷ͕ɺ಺෦Ͱ SFBDUIPPLGPSN
    Λ ࢖͍ͬͯΔΒ͘͠ʁ αʔόʔίϯϙʔωϯτͰѻ͑ͳ͔ͬͨɻ  ͜Ε͸ /FYUKT ͷ "QQ3PVUFS ͷ࿩ʹͳΔͷ͚ͩΕͲɺ$MJFOU$PNQPOFOU ͱ 4FSWFS$PNQPOFOFOU 34$
    ͷछྨͷ 3FBDU
    ίϯϙʔωϯτͱɺ/FYUKT ͷ 443
    ͷ࢓૊Έͱͷؔ܎͕΍ ΍͍͜͠ɻ 4FSWFS$PNQPOFOU ͱ 443
    ͷ࢓૊Έ͸શ͘ผ෺Ͱɺ$MJFOU$PNQPOFOU Ͱ΋ 443
    ͞ΕΔ͜ͱ͕͋Δ࢓૊ Έͷཧղʹ͕͔͔࣌ؒͬͨɻ  34$
    ͷಋೖͰɺ3FBDU
    ίϯϙʔωϯτͷ؅ཧ͕গ͠ෳࡶʹͳͬͨɻ ͜Ε͸ΫϥΠΞϯτɺ͜Ε͸αʔ
    όʔίϯϙʔωϯτͱ෼͚ͯ؅ཧɻڥք͕ᐆດͰɺཧ૝ͷσΟϨΫτϦߏ੒͕෼͔Βͳ͍ɻ NDσΟϨΫτϦ
    
    $MJFOU$PNQPOFOU 443͞ΕಘΔ͔Β.JYFE$PNQPOFOUɾɾ
    TBσΟϨΫτϦ
    
    4FSWFS"DUJPO TDσΟϨΫτϦ
    
    "QQ3PVUFSͰ͸σϑΥϧτͰ
    34$
    ͔ͩΒ࡞Βͳ͍  (FOͷαϯυϘοΫε͸ͱͯ΋ศརɻ ཁ๬ͱͯ͠ɺαϯυϘοΫεͷ"84Ϧιʔεʹ؆୯ʹΞΫηε͍ͨ͠ɻ
    αϯυϘοΫεͷ
    6TFS1PPM ΍
    4ɺ -BNCEB
    ͳͲɺϫϯΫϦοΫͰҠಈ͍ͨ͠ɻ ٧·ͬͨͱ͜Ζ౳ 22 ര଎։ൃʹ͸҆ఆͨ͠ʮܕʯ࡞Γ͕ඞཁɻ͔ΒͷϑϦʔελΠϧͩͱɺΤϥʔͩΒ͚ɺෳࡶʹɻ
23. ࠓͷͱ͜ΖԼهͷߏ੒Λࢼߦத /FYUKTΞϓϦͷߏ੒ 23 /FYUKT  443
    
    3FBDU
    
    34$3$$
    
    "NQMJGZ
    (FO ݴޠ 5ZQF4DSJQU +BWB4DSJQU ϞϊϨϙ؅ཧ /Y  6*ϥΠϒϥϦ "NQMJGZ
    6*
    .BUFSJBM
    6*͸࢖ͬͨ͜ͱ͕͋ΓɺڵຯຊҐͰ
    ࢖ͬͯΈ͍ͨ $44ϑϨʔϜϫʔΫ 5BJMXJOE
    $44 ঢ়ଶ؅ཧ +PUBJ 483΋ྑ͍ʁ 8FCϑϨʔϜϫʔΫ -BNCEB΍"1*ͷϧʔςΟϯά༻ )POP ίϯϙʔωϯτͷ෼ྨ੔ཧ #$% $
    %FTJHO
    
    "UPNJD
    %FTJHO
24. ʲ༨ஊʳਫय़ۦಈ։ൃ 24 https://suisyun.jp/kusatsu/ganbanyoku/ (滋賀県草津市) ご飯 開発 ⾵呂 (⽔⾵呂) 岩盤浴 開発 サウナ ⾵呂 各⼯程は ⾃由にイテレーション可能 ・リモート勤務が可能な恩恵 ・AWS環境には別端末を経由してリモート接続 ・社⽤のWiFiルータを使う セキュア？ ͭ͘Ζ͗ͱ࢓ࣄͷཱ྆Խ΁
25. 25 IUUQTEFTJHOLBMPODPKQ