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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
   どんなもの作っているの？（事例
   

   View Slide

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

   View Slide

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

   View Slide

10. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    Ampfliy monorepo
    

    View Slide

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

    View Slide

12. 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を実行して生成しま
    す。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 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 で生成
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    6.2 tsconfig
    

    View Slide

22. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    nest.js による lambda の開発
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    Demo
    

    View Slide

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

    View Slide

28. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    MVP 技術を 様々な案件を行いながら、PDCA回しながら改善してい
    ます
    

    View Slide

29. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
    Thank You
    

    View Slide