Slide 1

Slide 1 text

A I サ ー ビ ス 立 ち 上 げ に AWS Am p lif y を 使 っ て わ か っ た Pros & Co ns 株 式 会 社 T e c h S w o r d 取 締 役 C T O 宮本 大輝

Slide 2

Slide 2 text

Contents ▪自己紹介 ▪サービス概要 ▪Amplifyとは ▪Pros & Cons & Tips ▪おわりに

Slide 3

Slide 3 text

Self Introduction 自己紹介

Slide 4

Slide 4 text

自己紹介 宮本 大輝 みやもと たいき ▪ 株式会社TechSword 取締役CTO ▪ 岡山大学大学院自然科学研究科 ▪ 楕円曲線暗号に関する研究 ▪ ssh-keygen –t ed25519のやつ ▪ バックグラウンド ▪ アメリカでの研究インターンシップで機械学習に触れる ▪ IoTスタートアップ・ソラコムでのインターン

Slide 5

Slide 5 text

好きなAWSサービス Amazon SageMaker AWS IoT Greengrass AWS Amplify

Slide 6

Slide 6 text

本登壇の目的 ▪シード期スタートアップのプロダクト開発においてAmplifyを 選定することの利点&欠点 結論 ▪スピード感を持って開発するならAmplifyは大いにあり

Slide 7

Slide 7 text

About Our Service サービス概要

Slide 8

Slide 8 text

名称 株式会社TechSword 住所 〒700-8530 岡山県岡山市北区 津島中3丁目1番1号 会社概要 事業内容 ノーコードAIプラットフォームの開発・販売 設立 2021年5月19日 代表者 長島慶樹

Slide 9

Slide 9 text

ノーコードAIプラットフォーム TechSword Platform ▪ 知識0・スキル0でも画像認識AIを開発 ▪ 容易な実装が可能 ▪ 安価な導入コスト

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

アーキテクチャ

Slide 12

Slide 12 text

About AWS Amplify AWS Amplifyとは

Slide 13

Slide 13 text

AWS Amplifyとは? (スケーラビリティとコストに配慮しつつ) サクッとアプリ開発ができるサービス

Slide 14

Slide 14 text

Amplifyの構成要素 https://speakerdeck.com/jaguar_imo/aws-amplify-overview-in-brief?slide=8

Slide 15

Slide 15 text

Amplifyがラップするサービス Cognito DynamoDB AppSync S3 Lambda API Gateway Kinesis Pinpoint Sumerian Elasticsearch Location Service Translate 認証・認可 DB GraphQL ストレージ 関数 REST API 分析 通知 AR/VR 全文検索 Geo 翻訳 etc・・・ 基本&主要機能

Slide 16

Slide 16 text

Pros & Cons & Tips 利点と欠点とTips

Slide 17

Slide 17 text

利点 ▪爆速開発 ▪開発環境の構築が容易 ▪サーバーレス構成となる ▪型安全な開発

Slide 18

Slide 18 text

利点① 爆速開発 サービスに必要な 認証・ストレージ・データベースを AWSのベストプラクティスに則って CLIでコマンドを実行するだけで構築

Slide 19

Slide 19 text

Amplify CLI ▪CloudFormationテンプレートを生成 ▪ amplify push で反映 $ amplify add auth $ amplify add storage $ amplify add api

Slide 20

Slide 20 text

CI/CD ▪GitHub等との接続だけでCI/CD

Slide 21

Slide 21 text

PRごとにレビュー

Slide 22

Slide 22 text

enough? 🤔 AWSで同じことをやれるならそれがいいのでは? ▪Activateを利用することでコスト0 ▪ただし、パフォーマンスの差は未検証

Slide 23

Slide 23 text

ローカルモック $ amplify mock ▪ローカルでAPI・ストレージ・認証を再現 ▪毎回 amplify push をする必要なし ▪ 1回のpushで大体2~5分は要する(そんなに待てない)

Slide 24

Slide 24 text

開発環境の構築が容易 1. Dev containerをビルド 1. TypeScript-nodeイメージをpull 2. Javaをインストール(for Amplify mock) 3. pipenv/pyenvをインストール(for Python Lambda) 4. amplify cliをインストール 2. amplify pull --appid abcdxyz –envName dev 3. npm start

Slide 25

Slide 25 text

総じて アプリケーションの機能開発以外のところに 脳みそも時間も使わなくていい CTO1人+非フルコミットメンバー4人で 半年で正式版リリース

Slide 26

Slide 26 text

利点② サーバーレス構成となる Pay-as-you-go (使った分だけ課金)

Slide 27

Slide 27 text

シード期のスタートアップ ▪AWSの利用料金はできるだけ減らしたい ▪ Activateのクレジットもできるだけ節約 ▪ユーザーが少ない段階で、EC2など立てるだけで課金される サービスは少し痛い ▪ もちろん、必要ならば使う サーバーレスで実現すれば安い (トラフィックが増えたとしても?🤔)

Slide 28

Slide 28 text

サーバーレス構成にすることで ▪スケーリングも(そんなに)気にしなくてもよい https://www.ragate.co.jp/blog/articles/5505

Slide 29

Slide 29 text

利点③ 型安全な開発 GraphQLのクエリ変数やレスポンスの 型を自動生成

Slide 30

Slide 30 text

開発の流れ 1. schema.graphqlにデータ構造を定義 ▪ nullable or non-nullable ▪ 他テーブルとのrelation 2. amplify mock ▪ 内部ではamplify codegenが実行 ▪ API.ts(型定義)とqueries.ts, mutation.ts, subscription.tsが生成 3. 型定義に沿ってquery/mutationを実行 type Project @model { id: ID! name: String team: Team @hasOne } type Team @model { id: ID! name: String! } const project = { name: “New project", team: “uuidv4" }; await API.graphql(graphqlOperation(createProject, {input: project}));

Slide 31

Slide 31 text

Amplify Graphqlの恩恵 ▪定義をもとに自動生成されることで、人為的ミスがなくなる ▪RDBMSと似たリレーション ▪ ただし、設計パターンは複数あり ▪ シングルテーブル ▪ マルチテーブル ▪ https://aws.amazon.com/jp/blogs/news/single-table-vs-multi-table- dynamodb-appsync/

Slide 32

Slide 32 text

欠点 ▪GraphQL + AppSyncの取り扱い ▪Cognitoのエイリアス属性 ▪環境の共有が難しい ▪柔軟性の低さ ハマりポイント

Slide 33

Slide 33 text

①GraphQL + AppSyncの取り扱い ▪list系query 良さげ?👀 allTodos取ってこれないことがある!😭 const allTodos = await( API.graphql({ query: queries.listTodos }) as Promise );

Slide 34

Slide 34 text

なぜなら ▪list系queryは必ず全部取ってくることを保証しない ▪実績として、たった5個のitemsでもlistAllできないことがあった ▪ フロントから見ると「あれ、データ消えた!?」となってしまう 必ず全部取ってこないといけない場合は とする(たとえ5個、10個でも) do {listHoge} while(nextToken)

Slide 35

Slide 35 text

GraphQLのDepthにも注意 発生した問題 ▪ Amplify: Resolver invocation limit reached. 原因 ▪ 一部の深いネストのデータを取るためにAPIのdepthを7にしていた ▪ モデルの中に循環参照がある関係で、1回のQueryで取ってくるデータが とんでもないことに type Model @model @auth(rules: [{ allow: owner }]) { id: ID! name: String! status: ModelStatus! type: ModelType! images: [Image] @connection(keyName: "byModel", fields: ["id"]) ・ ・ } type Image @model @auth(rules: [{ allow: owner }]) @key(name: "byModel", fields: ["modelID"]) { id: ID! modelID: ID! model: Model @connection(fields: ["modelID"]) width: Int! height: Int! ext: String! objects: [Object] @connection(keyName: "byImage", fields: ["id"]) }

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

GraphQLのDepth ▪デフォルトの2に ▪深くまで取ってくる必要があるときは独自でQueryを書く

Slide 38

Slide 38 text

②Cognitoのエイリアス属性 ▪エイリアス属性は 後から変更できない! https://hiroga.hatenablog.com/?page=1569198704

Slide 39

Slide 39 text

対処策 ▪まだアカウント数が片手で数えられるくらいだったので… ▪ Cognitoを完全に初期化して再セットアップ ▪Amplify上でのやり方 ▪ 通常通りamplify add authを実行 ▪ サインイン方法はUsernameを想定(←このUsernameは変更不可) ▪ (projectRoot)/amplify/backend/auth/testapp/cli-inputs.json の一部を次のように変更 ▪ "aliasAttributes": ["email", "preferred_username"], ▪ この変更はAmplify CLIを通してはできないので、jsonを書き換える他ない(もし くは後述のCDKか?)

Slide 40

Slide 40 text

③環境の共有が難しい ▪toB向けアプリあるある 一般ユーザー 用 アプリ 管理者 用 アプリ

Slide 41

Slide 41 text

amplify import storage ▪いい感じに別プロジェクトのDynamoDBをインポートしてくれそ うな雰囲気があるが… ▪DynamoDBへのアクセス権をプロジェクトにインポートするのみ で、AppSync(GraphQL)が共有されるわけではない ▪ 結果的にExpress+Node.jsやFastAPI+PythonでREST APIサーバーを 構築する必要あり ▪ それなら最初からREST API組んだ方がいいかも…

Slide 42

Slide 42 text

④柔軟性の低さ ▪Amplifyが対応していないものを別で作成しなければならない ▪ 例えば、S3/DynamoDB/Cognito以外のLambdaトリガーを設定したい とき ▪サブドメインによるマルチテナント運用は(たぶん)できない ▪ Slackでいうtechsword.slack.comなど ▪送信元IPに基づいたルーティングなど、インフラ寄りのことを 触るのは無理 ただし🖐️

Slide 43

Slide 43 text

進むCDK対応 上手くやれるかも🦆

Slide 44

Slide 44 text

To the End おわりに

Slide 45

Slide 45 text

まとめ ▪スピード感が求められるスタートアップの初期フェーズ においてAmplifyは最適 ▪TypeScriptとの相性もGood👍 ▪GraphQL+AppSyncの仕様には注意 ▪柔軟性の観点からCDKの活用 or 脱Amplifyの時は来る かもしれない

Slide 46

Slide 46 text

エンジニア BizDev 絶賛募集中!

Slide 47

Slide 47 text

メディア出演 ▪NewsPicksのメイクマネーに出演 https://www.youtube.com/watch?v=MrBfP3I8hQ0

Slide 48

Slide 48 text

キーワード React TypeScript AI IoT ソラコム エッジ NVIDIA Jetson MLOps Python 物体検出 教師なし 異常検知

Slide 49

Slide 49 text

こんな人と働きたい! ▪スーパーフレックスの会社で自発的に働きたい方 ▪エッジデバイスなど、ハードウェアも好きな方 ▪AIの民主化に興味がある方 ▪オーナーシップを持って開発をしたい方

Slide 50

Slide 50 text

How to contact me Feel free to reaching me out💬