toCサービスを AWS Amplify使って 構築 / 運用しているお話

ReactNative - Cognito 認証で運用していたアプリを AWS Amplify Consoleで Web に載せ替えました！ t
oC サービスを商用環境で運営 / 随時改善してます。
また、Pinpoint も導入しユーザーのアクティビティ等も分析しています。

Transcript

1. toCサービスを AWS Amplify使って 構築 / 運用しているお話
2. 肉屋のCTO(谷 耕平)です Twitterで「肉屋のCTO」でググってもらえればHitしますｗ フォロー / DM大歓迎です＼(^o^)／ どーもー! 2
3. ミート矢澤@五反田 3
4. ジャンボ白金@白金高輪 4
5. 今日お伝えしたいこと 結論ファーストで話せって教えられました◎
6. Amplify LibrariesでさくっとAWSのリソースと 連動できる便利さ 6 1 2 SPAはAmplify ConsoleでFA 3 Amplify CLIで欲しい機能を さくっと追加できる世界観 本日の サマリー
7. プロジェクト(既存アプリの Webリプレイス) のお話 どんな背景があってリプレイスしたのか。
8. どんなアプリ？ 自社サービスである 「超一流店の高級弁当 テイクアウトサービス Ichigun」 のアプリ 8
9. - 超一流店限定の商品のみのお取り扱い - 品質に拘り、配送自体を他人に任せない - 事前決済で接点は商品のお受け取りのみ - COVID-19によるデリバリ需要の増加 - 非接触型の購買販路の確立 どんなアプリ？ 9
10. 10 アーキテクチャ(Before)
11. • 開発的な側面 ◦ アプリの設計が即時変更即時反映に対応できなかった • 販促的な側面 ◦ 対象ユーザーの年齢層が想定以上に高かった ◦ 媒体掲載の制約でアプリは都合が悪かった 11 リニューアルの背景
12. => この座組でどうやってWebサービスが回る状態まで持っていくか。 後輩ちゃん : 開発者歴1年半 - 実務未経験駆け出しで彷徨っていた 所をTwitterで採用して1年半 - Laravel, Reactは触れる - 京大卒でTOEIC900越え わい : 開発者歴9年 - 新卒で 株式会社ワークスアプリケー ションズにてERPパッケージシステム の開発者としてスタート - 株式会社ユーティル を共同創業して Web受託制作を数年間 - 肉屋さんのCTO + 個人でWeb受託 制作受託とかサービス立ち上げサ ポート 開発者は 2人 12
13. 選定のポイント • とにかくローコスト • 既存の構造をできる限り再利用 • 運用 / 改善のサイクルを早く回せる設計 13
14. 14 Amplifyフレームワークを用 いた開発のコストの低さ
15. Amplifyフレームワークの紹介 お名前 できること Libraries iOS、Android、js、Flutter用のライブラリ群。 認証やPinpoint、AppSyncとのやりとり等を簡単に実装できる。 Console SPAや静的サイトのホスティング、 CI/CDの運用を自動化するマネージド サービス。 CLI AWS のバックエンドを構築できるインターフェース。 認証基盤の構築やPinpointの構築が一瞬でできる。 15 参考URL : https:/ /aws.amazon.com/jp/builders-flash/202008/analyze-ec-website/
16. Amplify LibrariesでさくっとAWSのリソースと 連動できる便利さ 16 1 2 SPAはAmplify ConsoleでFA 3 Amplify CLIで欲しい機能を さくっと追加できる世界観 本日の サマリー
17. 使ってて良かった、Amplify LibrariesとCognito。 これからよろしくPinpoint。 Amplify Librariesで さくっとAWSのリソースと連動 できる便利さ 1
18. 18 アーキテクチャ(Before)
19. “ aws-amplify-react-nativeも aws-amplifyも 同じjs用のライブラリ群。 19 参考URL : https:/ /github.com/aws-amplify/amplify-js
21. 21 参考URL : https:/ /aws.amazon.com/jp/about-aws/whats-new/2020/10/use-existing-cognito-user-pools-identity-pools-for-amplify-project/
23. CLIでリソース構築。 Amplify CLIで連携するCognito リソースも一瞬で構築可能。 Cognitoとの連携は素敵さ。 認証画面が一瞬で。 ログイン / 新規登録 / パスワー ド再発行の画面、ロジックはすで に用意されています。 あとは見た目もカスタマイズする だけ。 OAuthとの連携も。 公式DocにReactでCognitoを利 用したFacebookログインや Googleログインの実装例があり ます。 (ほぼ流用しちゃえ) https:/ /docs.amplify.aws/lib/ auth/social/q/platform/js 23
24. コレ使えば実装以外何も気にしなくてよくね？ SPAはAmplify Consoleで FA 2
25. CI/CDを一瞬で。 Gitリソースと連携するだけでパイ プラインを構築可能。 Deployした後キャッシュも自動で 削除してくれる。 もうハマらない。 もう、なんもせんでえぇやん。 ホスティングも一瞬で。 簡単すぎて書くことがない。 (Route53で管理している必要は あるけれども)一瞬で証明書を発 行してSSL通信も当たり前に。 鍵付き検証環境も一瞬で 。 Basic認証付きの検証環境も一瞬 で構築。 関係者との事前確認の準備も ノータッチで完了。 25
26. もう、なんもせんでえぇやん。 26
27. 何をaddできるかみるだけでもワクワクするね。 https:/ /docs.amplify.aws/cli/ Amplify CLIで 欲しい機能を さくっと追加できる世界観 3
28. あれもこれも、CLIで。 28 参考URL : https:/ /docs.amplify.aws/
30. 30 アーキテクチャ(After)
31. To be continued... 本サービスをPinpointを利用したダイレクトマーケティング等の施策を打つのはもちろん、他 にも立ち上げるサービスにて Amplifyの採用を検討しています◎ 現場に非常に近い立場の小さなチームで、ゴリゴリ AWS使ってサービスを作って回して行く 弊社に興味が湧いた人はお茶でも行きましょう！ メッセお待ちしております＼ (^o^)／ 31
32. ご清聴いただき ありがとうございました。 https:/ /twitter.com/niku_it_cto