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
    (ピュアポムメディアラボ)
    青木光平

    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