Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mah77ss
August 01, 2024
200

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

Release for Amplify Boost Up #06 from Japan

mah77ss

August 01, 2024
Tweet

Transcript

  1. ࣗݾ঺հ Mamoru ICHISE(ま〜) デザインカロン合同会社 所属 2 8FC੍࡞ ϩΰ ໊ࢗɾγϣοϓΧʔυ γεςϜ։ൃ

    ಋೖɾҠߦࢧԉ ൐૸ࢧԉ %9 @mah77ss Qiita https://qiita.com/mah77ss ࠷ۙ͸৽αʔϏεͷ։ൃ΍ϫʔΫϑϩʔจॻ؅ཧҊ݅ʹैࣄ ͳͳͪΌΜ
  2. ϙϦϨϙ • γεςϜ΍αʔϏεɺίʔυ͝ͱʹϦϙδτϦΛ෼͚Δ࣮૷ 3 "ΞϓϦ ϑϩϯτ ϑϩϯτ ϑϩϯτ υΩϡϝϯτ ʜ

    όοΫΤϯυ πʔϧ ʜ #γεςϜ $αΠτ όοΫΤϯυ αϒγεςϜ ࡞ۀ͝ͱʹϦϙδτϦΛ੾Γସ͑Δख͕ؒൃੜɻϦϙδτϦͷ؅ཧ΋൥ࡶʹɾɾɾɻ 共通化できるコード の分散 リポジトリごとにパッ ケージバージョンを 管理 全体の作業状況が 分からない Made by ⼿書きバォント
  3. ϑϩϯτ ϞϊϨϙ • ؆୯ʹݴ͑͹ɺϦϙδτϦͻͱͭͰશͯͷίʔυΛ؅ཧ 4 "ΞϓϦ ϑϩϯτ ϑϩϯτ υΩϡϝϯτ ʜ

    όοΫΤϯυ πʔϧ ʜ #γεςϜ $αΠτ όοΫΤϯυ αϒγεςϜ ϦϙδτϦͷ੾Γସ͕͑ෆཁʹͳΓɺ౷Ұతʹར༻Մೳɻ(PPHMF౳େखاۀ΋࠾༻͢Δ࢓૊Έɻ 各プロジェクト、サー ビスはディレクトリ階 層で分ける。 全体に渡る修正も1 つのコミットで可能。 リポジトリのサイズ は大きくなる。 プロジェクト間の依 存関係の管理が必 要に。
  4. ͖͔͚ͬ 5 • (FOͷυΩϡϝϯτʹϞϊϨϙͷ ηοτΞοϓํ๏ͷهࡌ͕͋ͬͨɻ • (FOʹ΋͕͋ͬͨɺؾʹ͍ͯ͠ͳ ͔ͬͨɻ • (FO͸

    /Y ΍ ZBSOXPSLTQBDFTͳ ͲͷϞϊϨϙπʔϧʹରԠ͍ͯ͠ΔΒ ͍͠ɻ • ZBSO͸࢖͍ͬͯͳ͍͠ɺOQN XPSLTQBDF͸໌֬ʹυΩϡϝϯτʹ هࡌ͞Ε͍ͯͳ͔ͬͨɻ • ʮ/Yʯͱ΍ΒΛ࢖ͬͯΈΑ͏ʂ ͪΐ͏Ͳ৽نαʔϏεͷاը͕͋Γ ࢼͯ͠ΈΑ͏ʂ
  5. /Y • オープンソースのビルドシステム • プロジェクトの依存関係を管理 • リポジトリが巨⼤化しても⾼速なCI • キャッシュによる開発時間削減 •

    ⼤規模なE2Eテストに対応 • Nxプラグインによる拡張が可能 WebフレームワークもテストライブラリもNxでインストール • NxCloudと連携することで、分散キャッシュ や分散タスク実⾏が可能 6 https://nx.dev/ େن໛$*޲͚ͷػೳʹେֻ͔Γͳ࢓૊ΈΛ͍࣋ͬͯͦ͏ɻ ࠓճ͸εϞʔϧελʔτͰɺ؆୯ͳ8FCαΠτ /FYUKT ͷ࡞੒Ͱ·ͣ࢖ͬͯΈΔɻ
  6. ࠓճ࡞Δ8FCαΠτͷߏ੒ 7 ϑϩϯτ 8FCαΠτ όοΫΤϯυ Next.js + TypeScript TypeScript リポジトリ

    • ࠓճͷ໨త͸ʮϑϩϯτͱόοΫΤϯυΛ෼͚ͭͭ΋ɺͭͷϦϙδτϦͰίʔυΛ؅ཧ͢Δʯ AWS Cloud Nxワークスペース Amplify Managed Backend Hosting ϦϙδτϦͷʮϑϩϯτʯʮόοΫΤϯυʯͦΕͧΕͷϒϥϯν΁ϓϧϦΫ֤ͯ͠σϓϩΠ࣮ߦ ϑϩϯτϒϥϯν όοΫΤϯυ ϒϥϯν $MPVE'SPOU 4 "QQ4ZOD %ZOBNP $PHOJUP -BNCEB 4
  7. ։ൃ࣌ͷϩʔΧϧߏ੒ 8 $VSTPS .BD#PPL"JS "SN 8JOEPXT -BQUPQ (JU)VC 44) 84--JOVY

    6CVOUV %FW$POUBJOFS /PEFKT CVMMTFZFTMJN%FCJBO 1VMM 1VTI "84440 OQY BNQY TBOECPY౳ 1VMM 1VTI ϞϊϨϙͱݴ͍ͭͭɺ%PDLFSͷ؀ڥߏ੒ͱΞϓϦͷߏ੒ΛผϦϙδτϦͰ؅ཧ ؅ཧ্ɺϦϙδτϦΛೖΕࢠʹ͍ͯ͠Δ ࠷ॳ͸ಉҰϦϙδτϦʹ͍͕ͯͨ͠ɺ"NQMJGZΞϓϦ࡞੒࣌ʹϦϙδτϦϧʔτͷ಺༰Ͱ ϓϩδΣΫτछྨ͕൑ఆ͞ΕͨͨΊɺผϦϙδτϦͱͨ͠ɻ ϧʔτʹ/Y͕ಋೖ͞Ε͍ͯͳ͍ͱɺ/Y؅ཧͷϦϙδτϦͩͱ"NQMJGZ͕൑ผͯ͘͠Εͳ͍ Ω ・Node 18以上ではsandboxが起動しな い問題があった。今はどうだろう? ・CursorでSSH経由のDevContainerへ 接続できない問題は修正された。 ・Arm版Macだとaws configureコマンド が失敗。対策はあるみたいだけれど、手っ取り 早くSSHで回避 ・ DevContainerが使えることで、手元の 環境のように操作できる。
  8. /YϫʔΫεϖʔε࡞੒ • 最初に、リポジトリルートにNxワークスペースを作成する。 • --preset=ts はTypeScriptのプリセット指定。--preset=next を指定すると、Next.js プロジェクト のプリセットが作成されるが、バックエンドのデプロイにも「required-server-files.json」が必須 となりデプロイできないので回避

    • リモートキャッシュの使⽤を聞かれるが、使⽤しないとしている。(NxCloudに接続される?) • サブディレクトリにプロジェクトが作成されるので、作成後、リポジトリルートへ移動している。 10 ϫʔΫεϖʔε࡞੒ # リポジトリルートでコマンド実⾏ $ npx create-nx-workspace@latest --preset=ts (略)
  9. /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 (略)
  10. /Yϑϩϯτ࡞੒ ɾࣄલʹ OY ΛάϩʔόϧΠϯετʔϧ͢Δɻ OQN J HOY!MBUFTU ɾBQQTσΟϨΫτϦ΁ /FYUKT ΞϓϦ

    UFTUOY Λ࡞੒͢Δɻ ɾQSPKFDUKTPO ΁ /FYUKT Ϗϧυ༻ͷλʔήοτΛ௥Ճޙɺ OY TFSWFUFTUOY ͰϩʔΧϧ࣮ߦɻ Ϗϧυ͸ OY CVJMEUFTUOY ίϚϯυ 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 (略)
  11. όοΫΤϯυͷσϓϩΠ 15 • ⾃動検出されたフレームワーク はAmplify Gen2 • フロントエンドビルドコマンド は「mkdir ./dist

    && touch ./dist/index.html」、出⼒ ディレクトリをビルドは 「dist」を指定 ਐΊͯσϓϩΠɻΤϥʔ͕ग़ͨΒ BNQMJGZZNM Λमਖ਼͢Δɻ
  12. ϑϩϯτͷσϓϩΠ 17 • ⾃動検出されたフレームワーク はNext.js、Amplify Gen2 • フロントエンドビルドコマンド は「npx nx

    build test-nx」、出 ⼒ディレクトリをビルドは 「.next」を指定 ਐΊͯσϓϩΠɻΤϥʔ͕ग़ͨΒ BNQMJGZZNM Λमਖ਼͢Δɻ
  13. σϓϩΠϒϥϯνͷઃఆ 19 main front- main shared- main front- develop shared-

    develop front- feature shared- feature ϑϩϯτͷ σϓϩΠ όοΫΤϯυͷ σϓϩΠ 連携 連携 ΞϓϦ΍ϥΠϒϥϦΛ૿΍ͨ͠Βɺ࿈ܞ༻ϒϥϯν͕ͲΜͲΜ૿͑Δʁཧ૝ͷܗ͕෼͔Βͳ͍ɻ main όοΫΤϯυͱ ϑϩϯτͷಉ࣌σϓϩΠ 連携 develop feature Ұൠతʹ͸ಉ࣌σϓϩΠ ͋͑ͯ෼͚ͯΈΔ ϞϊϨϙͷར఺͕ݮΔ͕σϓϩΠΛݶఆతʹ͢Δ
  14.  σϓϩΠΤϥʔͳͲ݁ߏग़Δɻ౎౓τϥϒϧγϡʔςΟϯά͕େมɻ  ೝՄϦιʔε ϢʔβʔϓʔϧͳͲ ͷ࡟আͷ࢓ํ͕෼͔Βͳ͍ɻ(FOͳΒ BNQMJGZSFNPWF BVUIͰ؆୯ʹ࡟আͰ͖ͨɻ ݁ہɺ$MPVE'PSNBUJPO͔Β֘౰ελοΫΛ࡟আ 

    (FO͔Β "VUIͷVTFSOBNF͕࢖͑ͳ͍ɻ "NQMJGZ(FOͷυΩϡϝϯτʹهࡌ͋Γɻ QSFGFSSFEVTFSOBNFଐੑΛ࢖͏  ௥Ճͨ͠ -BNCEBͷݖݶΤϥʔ͕ $034ະઃఆΤϥʔͱͯ͠ฦ٫͞ΕΔɻݖݶΤϥʔͷ಺༰Λ औಘ͢Δʹ͸ɺ"1*(BUFXBZͷʮήʔτ΢ΣΠϨεϙϯεʯ΁$034ͷઃఆΛผ్ߦ͏ɻ  ௥Ճͨ͠ -BNCEBͷ࣮ߦʹɺผ్ʮFYFDVUFBQJ*OWPLFʯΛʮBNQMJGZBNQMJGZCBDLFOEOP BNQMJGZ"VUI"1154(SPVQ3PMFʙʯϩʔϧ΁௥Ճ͢Δඞཁ͕͋ͬͨɻ ٧·ͬͨͱ͜Ζ౳ 20
  15.  "NQMJGZ6* ͷ 3FBDU7JFXίϯϙʔωϯτ͸ 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 ര଎։ൃʹ͸҆ఆͨ͠ʮܕʯ࡞Γ͕ඞཁɻ͔ΒͷϑϦʔελΠϧͩͱɺΤϥʔͩΒ͚ɺෳࡶʹɻ
  16. ࠓͷͱ͜ΖԼهͷߏ੒Λࢼߦத /FYUKTΞϓϦͷߏ੒ 23 /FYUKT  443  3FBDU34$3$$ "NQMJGZ(FO ݴޠ

    5ZQF4DSJQU +BWB4DSJQU ϞϊϨϙ؅ཧ /Y  6*ϥΠϒϥϦ "NQMJGZ6* .BUFSJBM6*͸࢖ͬͨ͜ͱ͕͋ΓɺڵຯຊҐͰ ࢖ͬͯΈ͍ͨ $44ϑϨʔϜϫʔΫ 5BJMXJOE$44 ঢ়ଶ؅ཧ +PUBJ 483΋ྑ͍ʁ 8FCϑϨʔϜϫʔΫ -BNCEB΍"1*ͷϧʔςΟϯά༻ )POP ίϯϙʔωϯτͷ෼ྨ੔ཧ #$% $ %FTJHO "UPNJD%FTJHO
  17. ʲ༨ஊʳਫय़ۦಈ։ൃ 24 https://suisyun.jp/kusatsu/ganbanyoku/ (滋賀県草津市) ご飯 開発 ⾵呂 (⽔⾵呂) 岩盤浴 開発

    サウナ ⾵呂 各⼯程は ⾃由にイテレーション可能 ・リモート勤務が可能な恩恵 ・AWS環境には別端末を経由してリモート接続 ・社⽤のWiFiルータを使う セキュア? ͭ͘Ζ͗ͱ࢓ࣄͷཱ྆Խ΁