社外秘X インフラを意識しない アプリケーション開発のススメ 2023.11.20 KDDI アジャイル開発センター 開発5部 若林美優

社外秘X 1 KDDI Agile Development Center Corporation ⾃⼰紹介 2022年4⽉ KDDI新卒⼊社 2022年7⽉末 KDDI アジャイル開発センター出向 FlatBaseの予約システムのプロジェクトに参加 2023年5⽉末 Jimdoサイト制作のプロジェクトに参加 Career 所属部署 担当業務 ⽒名 趣味 若林 美優 アジャイル開発センター 開発5部 FLAT BASEの予約システム Jimdoサイト制作 旅⾏、バドミントン、ゲーム 神奈川県川崎市→東京都墨⽥区 居住地 座右の銘 好きなこと 困っていること ゲーム、動物 満員電⾞ やらない後悔よりやって後悔 運動不⾜ 久しぶりの登壇なので緊張していますが頑張ります︕︕︕ メッセージ 嫌いなもの

社外秘X 2 KDDI Agile Development Center Corporation 参画プロジェクト FLAT BASE プロジェクト Jimdo プロジェクト Amplify SAM (Serverless Application Model) アジャイル開発×モブプログラミング

社外秘X 3 KDDI Agile Development Center Corporation 参画プロジェクト FLAT BASE プロジェクト Jimdo プロジェクト Amplify SAM (Serverless Application Model) アジャイル開発×モブプログラミング

社外秘X 4 KDDI Agile Development Center Corporation MVP（Minimum Viable Product）とは 必要最⼩限のサービスを開発し、アイデア・機能が受け⼊れられるかどうかを、顧客の反応を ⾒て検証しながら改善していくプロダクトのこと Making sense of MVP (Minimum Viable Product) – and why I prefer Earliest Testable/Usable/Lovable ユーザーのフィードバックを得られるため、 刻⼀刻と変化する市場や顧客の変化に対応することができる

社外秘X 5 KDDI Agile Development Center Corporation MVPを採⽤しないと... プロダクトが完成するまで 時間がかかる 完成したものが 顧客に適したものになるか 分からない 途中で⽅向転換 することが難しい

社外秘X 6 KDDI Agile Development Center Corporation 素早い開発のネックになる点 どの技術を採⽤すべきか デプロイ⽅法はどうするか セキュリティ対策は︖ インフラは決めることが多い インフラを意識しなくてよければ、より素早い開発が可能

社外秘X 7 KDDI Agile Development Center Corporation Amplifyについて バックエンドを強く意識することなく、AWS でフルスタックアプリケーションを 簡単に構築、実装、デプロイすることができるプラットフォーム。 ユースケースの進化に合わせて幅広い AWS サービスを活⽤できる柔軟性を備えている。 市場へ早くリリースして フィードバックが欲しい︕ スケーラブルな アプリケーションにしたい インフラの知識はあまり ないが、素早くリソース を構築したい︕ SPAのアプリケーションを 作成したい︕

社外秘X 8 KDDI Agile Development Center Corporation AWS Amplify Hosting 静的ウェブサイトやウェブアプリのホスティングサービス 簡単なカスタム ドメイン設定が可能 CI/CD ワークフローが 組み込まれているため、 コミットごとに⾃動的に 再デプロイが可能 パスワードによる 保護が可能 グローバルに利⽤可能 ブランチ毎にデプロイ されるため、 複数の環境を構築できる ホスティングメトリクス をほぼリアルタイムで モニタリング

社外秘X 9 KDDI Agile Development Center Corporation AWS Amplify Hostingの使い⽅ リポジトリを 接続する ビルド設定を⾏う アプリが⾃動で デプロイする

社外秘X 10 KDDI Agile Development Center Corporation AWS Amplify Hostingの使い⽅ リポジトリを 接続する https://aws.amazon.com/jp/blogs/mobile/amplify-next-js-13/

社外秘X 11 KDDI Agile Development Center Corporation AWS Amplify Hostingの使い⽅ リポジトリを 接続する https://aws.amazon.com/jp/blogs/mobile/amplify-next-js-13/

社外秘X 12 KDDI Agile Development Center Corporation AWS Amplify Hostingの使い⽅ ビルド設定を⾏う https://aws.amazon.com/jp/blogs/mobile/amplify-next-js-13/

社外秘X 13 KDDI Agile Development Center Corporation AWS Amplify Hostingの使い⽅ https://aws.amazon.com/jp/blogs/mobile/amplify-next-js-13/ アプリが⾃動で デプロイする

社外秘X 14 KDDI Agile Development Center Corporation Amplify Hostingを使ったMVPを作るメリット React、Angular、Vueなどの JavaScriptフレームワークをサポート SPA以外に、SSRにも対応している 開発者はリポジトリにプッシュするだけで ⾃動デプロイすることができる

社外秘X 15 KDDI Agile Development Center Corporation Amplify CLI ユースケースから各種コンポーネントの構築を⽀援 コマンドを実⾏し、対話的に質問に答えていくとバックエンドが構築できる バックエンドとの接続に必要な設定ファイルやソースコードの⼀部を⾃動で⽣成 $ amplify add api APIの追加 $ amplify add auth 認証機能の追加 $ amplify add storage データベースの作成 $ amplify add function 関数の追加 $ amplify push デプロイ

社外秘X 16 KDDI Agile Development Center Corporation APIの追加（例） $ amplify add api ? Select from one of the below mentioned services: > GraphQL ? Here is the GraphQL API that we will create. Select a setting to edit or continue > Continue ? Choose a schema template: > Single object with fields (e.g., “Todo” with ID, name, description) ... Edit your schema at <...>/schema.graphql or place .graphql files in a directory at <...>/schema ✔ Do you want to edit the schema now? (Y/n) > yes Edit the file in your editor: <...>/schema.graphql ✅ Successfully added resource new locally https://docs.amplify.aws/react/build-a-backend/graphqlapi/set-up-graphql-api/

社外秘X 17 KDDI Agile Development Center Corporation APIのデプロイ（例） $ amplify push ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev ┌──────────────────────────────────┬ │ Category │ Resource name │ Operation │ Provider plugin ├──────────────────────────────────┼ │ Auth │ amplifyapp6177aede │ Create │ awscloudformation ├──────────────────────────────────┼ │ Api │ amplifyapp │ Create │ awscloudformation └──────────────────────────────────┴ ? Are you sure you want to continue? Yes ? Do you want to generate code for your newly created GraphQL API Yes ? Choose the code generation language target javascript ? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes ? Enter maximum statement depth [increase from default if your schema is deeply nested] 2 https://aws.amazon.com/jp/getting-started/guides/deploy-webapp-amplify/module-two/

社外秘X 18 KDDI Agile Development Center Corporation APIの追加 REST API GraphQL クライアント Amplify Hosting API Gateway Dynamo DB Lambda Amplify Hosting クライアント AppSync Dynamo DB Lambda

社外秘X 19 KDDI Agile Development Center Corporation 認証機能の追加(例) $ amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done. $ amplify push https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/ カスタマイズできる内容 u サインイン/登録フロー u 多要素認証（電⼦メール・SMS メッセージ） u 名前やメールアドレスなどのユーザーの属性 u Facebook、Twitter、Google、Amazon などのソーシャル プロバイダーを有効にする

社外秘X 20 KDDI Agile Development Center Corporation 認証機能の追加 クライアント Amplify Hosting AppSync Cognito Dynamo DB

社外秘X 21 KDDI Agile Development Center Corporation Amplifyで構築した時に気になった点 uどこまでカスタマイズできるか分からない uカスタマイズ外になった時にどう扱えばいいかわからない uセキュリティの⼼配はないはずだが、どのような設定になっているのか 分からない uCLIのバージョンを変更すると使えなくなる場合がある u場合によっては再構築が必要 u迅速なリリースを優先したために、ユニットテストができていない等の 技術的負債が残る場合 u選択した技術スタックを変更したい場合

社外秘X 22 KDDI Agile Development Center Corporation まとめ MVPを使うことで素早くアプリをテストし、 顧客の潜在的ニーズを捉える インフラの知識があまりなくても、Amplifyを 使うことでアプリケーションを素早くデプロイできる MVPの次フェーズとして、更なる 新規ユーザー獲得に向けて機能追加を⾏う