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

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. Ampfliy monorepo
11. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. ユースケース）リソースを共有しつつ複数のフロントアプ リケーションに分けたい Front Web CMS Admin AppSync Congito S3 library
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を実行して生成しま す。
13. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 2. ビルドの設定 フロント - next.js の ホスティングの みを記述します。
14. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 3. ビルドの設定 バックエンド - バックエンドのみを生成し ます。 - フロントは特に何も行いま せん。
15. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 4. Graphql のコードの生成場所の調整 その1 - Amplifyが生成するGraphQL のコー ドをそれぞれに出力する - backend 配下に.graphqlconfig.yml を作成し、生成する場所を指定する ことが可能です。 - こちらは複数記述可能です。 - backend の中で amplify codegen を行うと指定したディレクトリに graqphql ディレクトリを作成する ことが可能です。
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 で生成
17. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 6. 接続情報共有 - 通常だけど複雑 - aws-exports.js 経由で取得します。そのためにはフロント エンドに amplify pull を行う必要があります。 - 完全に分離 - フロント側でシンプルにするために環境は固定で切り替え る - 例 dotenv など
18. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
19. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 6. コードの共有 - npm, yarn の packages を使う - typesciptなら tsconfig の path を使う。 - next-transpile-modules（next.js) 限定を使う
20. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 6.1 packages workspace を使う - root の package に packages を作って、nodemodules も monorepo 管理することもできます。 - 注意点 yarn classic では動作しますが、yarn berry 以降での動 作が不安定です。他にもこのケースは動かないなどがあるよう です。 - 反省）はまりどころが多いので、個人的には設定しなくても良 いのではと思います。
21. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 6.2 tsconfig
22. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. nest.js による lambda の開発
23. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. ユースケース）アプリケーションの開発が進んだことによる functions 数の増加した - アプリケーションの開発が増えると function 数が増加します。 - 同じようなコードが増える。ライブラリの共通化 - デバッグの高速化が課題。 解決策が二つ - lambda Layer - monorepo
24. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. Nest.jsの特徴 - Webpack, node.js でビルドが 可能 - monorepo ベースの開発に対 応 - library の構築も可能 - TypeScript で対応可能
25. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved.
26. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. Demo
27. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. 最後に ピュアポムメディアラボではAmplifyを使ったMVP開発の研究を行っています。 さらに高速開発をどうすればいいのか、工夫しながらやっています。 一緒に研究してくれる仲間募集中です。 recruit@purpom-media-lab.com Twitter: coa00
28. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. MVP 技術を 様々な案件を行いながら、PDCA回しながら改善してい ます
29. Copyright © 2022 Purpom Media Lab Inc. All Rights Reserved. Thank You