Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kohei Tani

April 01, 2021
Tweet

Other Decks in Programming

Transcript

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

  2. 肉屋のCTO(谷 耕平)です Twitterで「肉屋のCTO」でググってもらえればHitしますw フォロー / 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

  20. 20

  21. 21 参考URL : https:/ /aws.amazon.com/jp/about-aws/whats-new/2020/10/use-existing-cognito-user-pools-identity-pools-for-amplify-project/

  22. 22

  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/

  29. 29

  30. 30 アーキテクチャ(After)

  31. To be continued... 本サービスをPinpointを利用したダイレクトマーケティング等の施策を打つのはもちろん、他 にも立ち上げるサービスにて Amplifyの採用を検討しています◎ 現場に非常に近い立場の小さなチームで、ゴリゴリ AWS使ってサービスを作って回して行く 弊社に興味が湧いた人はお茶でも行きましょう! メッセお待ちしております\

    (^o^)/ 31
  32. ご清聴いただき ありがとうございました。 https:/ /twitter.com/niku_it_cto