AWS Amplifyを軸にしたフルサーバーレスなアプリケーション構成 / Full serverless application on AWS Amplify

Slide 1

Slide 1 text

Slide 2

Slide 2 text

• Name / ID • 清家史郎 / @seike460 • Company • Fusic Co., Ltd. • Evangelist / TeamLeader / PrincipalEngineer • Skill • AWS / PHP / Go • AWS Certification • AWS Certified Solutions Architect Associate Professional • Community • ServerlessDays Fukuoka 2019 co-chair • JAWS DAYS 2019-2020 speaker Who?

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

• 解析プログラムの実⾏を制御するPoC⽤のWebフロントエンドが必要 • 解析プログラムの作成は既に進んでいる • ⽇毎の解析実⾏回数としては多いわけではない • 解析結果データに対して、相当レコード数検索する必要があるレコード数が多い検索を、PoCなのでスピーディーに実装する必要がある →肝になりうる部分、馴染みのある技術で確実な実装が必要と判断状況

Slide 7

Slide 7 text

• S3へ⼤容量ファイルアップロードの可能性在り • マルチパートアップロードへの対応が必要 • フロントエンドにはユーザー認証が必要 • 結果、必然的にバックエンドにも必要 • PoC解析環境を素早く整えたい • 作らなくて良いものは作らず構築したいその他要件

Slide 8

Slide 8 text

• メンバー⼆⼈︓共通するスキルセット • Go • React • 役割分担 • バックエンド • GoにてAmazon RDSのCRUD操作をするAWS Fargate API構築 • フロントエンド • Amplify UI Componentsを利⽤してReact フロントエンド構築プロジェクトメンバースキルセット

Slide 9

Slide 9 text

amplify add auth • 最低限の設定を⾏うだけなら不安になるくらいすべてやってくれる • Amazon Cognitoの構築を数分で⾏える • Social Providerの設定も可能

Slide 10

Slide 10 text

Authentication UI Components

Slide 11

Slide 11 text

i18nの対応も可能 • ⾃分で辞書ファイルを⽤意する必要はあるが簡単に対応可能

Slide 12

Slide 12 text

amplify add storage • コンテンツアップロード⽤のS3も楽々作成

Slide 13

Slide 13 text

Storage Libraries • サンプルコードにて簡単にアップロード機能作成も可能 • アップロード進捗を⾒る為の ProgressCallbackもあり

Slide 14

Slide 14 text

OpenAPI Generator バックエンドとフロントエンドの齟齬を⼩さくする為 OpenAPI定義を⾏い Code Generatorを利⽤する事でデータのやり取りをスムーズに進めることが出来た。 OpenAPI

Slide 15

Slide 15 text

TypeScript バックエンドはGo、OpenAPI Generatorを利⽤しているのでフロントエンドも厳密に型を設定したい。 TypeScript対応しているReactとMaterial-UIにて⼿戻りを少なく構築を⾏う。 TypeScript OpenAPI

Slide 16

Slide 16 text

初期アーキテクチャ • フロントエンド • React + AWS Amplify • TypeScript • バックエンド • Go • データベース • Amazon RDS • API仕様 • OpenAPI • 解析実⾏ • Step Functions +AWS Batch • 中間データ -> S3 • 検索データ -> RDS

Slide 17

Slide 17 text

Slide 18

Slide 18 text

課題感 • 解析実⾏回数としては多いわけではない • 特に利⽤されてない時のリソース待機コストが気になっていました • ALB、AWS FargateやAmazon RDSを無くしてリソース待機コストを低減したい • バックエンドでやってることは⾮常に単純でこのコード管理・改修をしたくない • Goとコンテナ管理を無くしたい • 解析データの検索さえなければフルサーバーレス構成を取れるのに… ⚡

Slide 19

Slide 19 text

JAWS DAYS 2020にて気付きサーバレスの新しいデータストアの選択肢 S3 Select の魅⼒ Fusic / Principal Engineer 内⽥が⽰した当時の⾃分にはなかった新しい選択肢 S3 Select 対応しているSQLは解析結果データの検索に対して⼗分に要件を満たしていた

Slide 20

Slide 20 text

技術の引出しの狭さが仇になる • GA後に試している、確実に認識していたはずのS3 Select • 実際に対象にS3 Selectを実⾏してみると取得したかったデータが返ってくる • レスポンスも前述スライドの通り、Webレスポンスに耐えうる⼗分な速度 • 計測が挟まる要件上、確実に結果整合性で良い • ⼊⼒または結果のレコードの最⼤⻑は 1 MBを超えることはない • 今後の結果が爆発的に増えることもない • これを利⽤したAPIを作成するというアイディア、応⽤⼒のなさが仇に

Slide 21

Slide 21 text

課題の顕在化 • PoC環境を完成した後、リソースコストが話題に • 今こそあの後悔を解消する時 • インフラコストとコンテナ管理部分を排除出来る可能性 • Application Load Balancer、AWS Fargate、Amazon RDS • ECR管理のGoアプリケーション S3 Select

Slide 22

Slide 22 text

Slide 23

Slide 23 text

前提にすべき要件 • 表⾯的、機能的にはアップデートがない • 最⼩の⼯数かつ爆速で構築する必要がある • デグレードの可能性も最⼩にする必要がある • ⼈の⼿での変更を最⼩にする構成変更今こそ認証とS3アップロードで使ってたAmplifyを全⾯的に活⽤

Slide 24

Slide 24 text

S3 Select API 作成 • 解析プログラム側はS3に中間データを配置していた • 結果CSVを配置するのみで対応完了 • 元々AWS Fargate に Amazon RDSからSelectするSQLがある • S3 Select SQLに応⽤しLambda APIを作成 • Amplify CLIを使って、REST APIを設置 • Step FunctionsをKickするAPIも合わせて設置

Slide 25

Slide 25 text

amplify add api(REST)

Slide 26

Slide 26 text

AWS AppSync • OpenAPI Generatorを利⽤しコードを⾃動⽣成していた • AWS AppSyncもスキーマーからコード⾃動⽣成してくれる • TypeScriptを利⽤した型付け • スキーマーベースAPIの為、型が決まる • コードの変更箇所は明確 • OpenAPI Generatorのコードを、AppSync⽣成のコードに変更 • データを取得する箇所、登録する箇所をひたすら置き換え

Slide 27

Slide 27 text

AWS AppSync exampleの例だとAPI.graphqlを素直に呼び出していて戻り値の型が表現出来ない出⼒されたAPI.tsの中に型情報がある

Slide 28

Slide 28 text

AWS AppSync GraphQLResultに各QueryやMutationを⾷わせることで戻り値の型も表現できる useStateにてState管理を⾏っていた箇所に対して、AppSync対応を⾏う元々OpenAPIにて型管理されていた為、同じ型にはめ込み、その後の動作も保証

Slide 29

Slide 29 text

schema.graphql ドキュメント内にExampleが提供されている書き⽅がわからなければこちらから編集するのが良い hasoneやhasmanyの様なリレーショナルデータベース的なモデリング

Slide 30

Slide 30 text

amplify-cli Developer Preview Update ※先⽇amplify-cliのDeveloper Previewが公開されてました。 @connection と @key がdeprecatedになるとのこと

Slide 31

Slide 31 text

@connection -> @hasOne, @hasMany, and @belongsTo ORMの様な使⽤感のディレクティブ @hasOne(fields: [String!]) @hasMany (indexName: String, fields: [String!], limit: Int = 100) @belongsTo(fields: [String!])

Slide 32

Slide 32 text

@key -> @primaryKey, @Index 詳しくはGithubへ https://github.com/aws-amplify/amplify-cli/issues/6217#issuecomment-929677992

Slide 33

Slide 33 text

AWS AppSyncに対する懸念 • 検索項⽬が増加していく事に対する懸念 • @searchableにてAmazon OpenSearch Serviceにて対応可能と判断 • インスタンス管理はサービス成⻑によるコスト増加と割り切る • Amazon DynamoDBで処理するのが難しいデータ量に対する懸念 • Aurora Serverlessにて対応可能と判断(⾃⼒構築の必要あり) • 最終⼿段はLambda︖ • VTLと格闘することになるのは避けたいなぁ… Amazon OpenSearch Service Amazon DynamoDB Amazon Aurora Serverless

Slide 34

Slide 34 text

amplify add api,auth,storage そしてhosting • Amplify APIを導⼊ • 構成変更によりHosting S3とCloudFront以外はAmplify管理 • Amplify Consoleにて管理 • デプロイ、ドメイン管理も

Slide 35

Slide 35 text

ただし注意が必要 • CloudFrontの細かい設定が出来ない • Consoleを⾒る限り、CloudFrontが設定されているが、実際は⾒えない • AWS Amplify Performance mode設定はあるが、CloudFrontほどの細かい設定はない • IP制限が現状設定出来ない • CloudFront の設定が⾒えないため、AWS WAFを設定することが出来ない。 • Basic認証も設定できるが、開発以外の環境かつ、制限をしたいという動機で Basic認証を利⽤するのは⾮現実的な印象

Slide 36

Slide 36 text

Slide 37

Slide 37 text

最終構成 • フロントエンド • React + AWS Amplify • TypeScript • バックエンド • AWS AppSync • Lambda(Go) • データベース(ストレージ) • Amazon DynamoDB • S3 Select • API仕様 • GraphQL • 解析実⾏ • Step Function AWS Batch • 中間データ -> S3 • 検索データ -> S3

Slide 38

Slide 38 text

Slide 39

Slide 39 text

フルサーバーレス、フルマネージド環境 • AWS管理をAWS Amplifyを軸にしてフルサーバーレス環境に • 初期構成の課題感を解消出来た • ⾃ら積極的に管理するものがないフルサーバーレス環境 • OpenAPI Generator + Typescript構築前提でのAWS AppSyncの親和性を感じた • AWS Amplifyを⼒を感じた、引き続き知⾒を貯め、アウトプットに繋げたい

Slide 40

Slide 40 text

謝辞 • 今回知識の幅が広がる事で、構成がガラリと変更することが出来た • 「無知は罪なり」とは⾔うが、⼈は万能ではない • コミュニティイベントでのアウトプットが決定打になった • 私の気付きのきっかけを与えてくれた「JAWS DAYS」の皆様 • この場の与えてくれた「AWS Dev Day Online Japan」の皆様 • この発表を聞いてくれた「聴講者」の皆様

Slide 41

Slide 41 text

Thank you! © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved. 清家史郎(@seike460) Fusic Co., Ltd. Evangelist / TeamLeader / PrincipalEngineer We Are Hiring︕ https://recruit.fusic.co.jp