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

Amplify Boostup #2 monorepo 運用による複数プロジェクト開発

Amplify Boostup #2 monorepo 運用による複数プロジェクト開発

cohe aoki

March 20, 2023
Tweet

More Decks by cohe aoki

Other Decks in Programming

Transcript

  1. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    Amplify Boostup #2 monorepo 運用による複数プロジェクト開発 株式会社 PURPOM MEDIA LAB (ピュアポムメディアラボ) 青木光平
  2. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    自己紹介 青木光平 (フロントエンドプログラマー、開発ディ レクター、UIUXデザイナー) 趣味 音楽、スプラトゥーン、メディアアート Amplifyいにしえ歴 3年 所属 Purpom Media Lab CEO Active Core CTO
  3. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    目次 1. 自己紹介 2. 事例紹介 3. Ampfliy monorepo 4. nest.js による lambda の開発 5. 最後に
  4. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    プロダクト開発は冒険。発注するお客さんに楽しんでもらいたい。
  5. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    最小からはじめてサービスを大きくしたい MVP(最小限のプロダクト)を早期に 実際にユーザが触れることができる状 態を継続的に構築します。 お客様が実際にユーザー目線で触れ、 フィードバックをすることで、大きな ずれを防ぎます。 またリリース後もフィードバックを通 してアップデートすることで市場の指 示が得られるサービスを構築すること ができます。
  6. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    デザインシステム デザイン、フロント構築も早くするた めにReact、Figmaのデザインシステ ムを日々育てています。 Amplify UIを使うとこのあたりも完全 に自動化できます。
  7. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    どんなもの作っているの?(事例
  8. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    介護IoT iOS アプリ(2023年リリース予定
  9. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    スタートアップのプロダクト
  10. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    ユースケース)リソースを共有しつつ複数のフロントアプ リケーションに分けたい Front Web CMS Admin AppSync Congito S3 library
  11. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    1. ディレクトリを作る apps/ backend amplify nextApp1 src nextApp2 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/monorepo-configuration.html - apps ディレクトリ配下にbackend 飲み のディレクトリ、フロントエンドディレ クトリをそれぞれ作成 - backend は amplify init を行いバックエ ンド生成を実施。 - nextApp1, nextApp2 はnpx create-next-appを実行して生成しま す。
  12. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    2. ビルドの設定 フロント - next.js の ホスティングの みを記述します。
  13. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    3. ビルドの設定 バックエンド - バックエンドのみを生成し ます。 - フロントは特に何も行いま せん。
  14. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    4. Graphql のコードの生成場所の調整 その1 - Amplifyが生成するGraphQL のコー ドをそれぞれに出力する - backend 配下に.graphqlconfig.yml を作成し、生成する場所を指定する ことが可能です。 - こちらは複数記述可能です。 - backend の中で amplify codegen を行うと指定したディレクトリに graqphql ディレクトリを作成する ことが可能です。
  15. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    4. Graphql のコードの生成場所の調整 その2 1. フロントエンドで aws appsync get-introspection-schema --api-id {API ID} --format JSON schema.json 2. .graphqlconfig.yml を作成、 schemePathは、1でダウン ロードしたファイルを指定 3. amplify code gen で生成
  16. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    6. 接続情報共有 - 通常だけど複雑 - aws-exports.js 経由で取得します。そのためにはフロント エンドに amplify pull を行う必要があります。 - 完全に分離 - フロント側でシンプルにするために環境は固定で切り替え る - 例 dotenv など
  17. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    6. コードの共有 - npm, yarn の packages を使う - typesciptなら tsconfig の path を使う。 - next-transpile-modules(next.js) 限定を使う
  18. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    6.1 packages workspace を使う - root の package に packages を作って、nodemodules も monorepo 管理することもできます。 - 注意点 yarn classic では動作しますが、yarn berry 以降での動 作が不安定です。他にもこのケースは動かないなどがあるよう です。 - 反省)はまりどころが多いので、個人的には設定しなくても良 いのではと思います。
  19. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    ユースケース)アプリケーションの開発が進んだことによる functions 数の増加した - アプリケーションの開発が増えると function 数が増加します。 - 同じようなコードが増える。ライブラリの共通化 - デバッグの高速化が課題。 解決策が二つ - lambda Layer - monorepo
  20. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    Nest.jsの特徴 - Webpack, node.js でビルドが 可能 - monorepo ベースの開発に対 応 - library の構築も可能 - TypeScript で対応可能
  21. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    最後に ピュアポムメディアラボではAmplifyを使ったMVP開発の研究を行っています。 さらに高速開発をどうすればいいのか、工夫しながらやっています。 一緒に研究してくれる仲間募集中です。 [email protected] Twitter: coa00
  22. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.

    MVP 技術を 様々な案件を行いながら、PDCA回しながら改善してい ます