Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplifyを軸にした フルサーバーレスなアプリケーション構成 / Full serverless application on AWS Amplify
Search
shiro seike
PRO
September 30, 2021
Technology
6
2.5k
AWS Amplifyを軸にした フルサーバーレスなアプリケーション構成 / Full serverless application on AWS Amplify
AWS Dev Day Online Japan 2021
shiro seike
PRO
September 30, 2021
Tweet
Share
More Decks by shiro seike
See All by shiro seike
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
技術力を高め合う “開けた”企業間コミュニティの形成 / Formation of an "open" inter-company community to enhance technological capabilities
seike460
PRO
1
66
有効な使い方を正しく理解して実装する PHP8.3の最新機能の「ウラ側」 / Understanding and Implementing Effective Usage Correctly The "Uraside" of PHP 8.3's Latest Features
seike460
PRO
1
74
有効な使い方を正しく理解して実装する PHP8.3の最新機能 / Proper understanding and implementation of effective usage Latest features in PHP 8.3
seike460
PRO
2
280
事例から見るサーバーレスの効果 / Serverless Effectiveness as Seen in Case Studies
seike460
PRO
1
91
Secure Serverless Architecture
seike460
PRO
2
560
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
180
サーバーレスらしさを意識した AWSにおける開発手法 / Development methodologies in AWS that are serverless-like
seike460
PRO
1
75
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
3
470
Other Decks in Technology
See All in Technology
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
簡単に始めるSnowflakeの機械学習
nayuts
1
190
地理情報とAPIのトレンド
nagix
0
160
AOAI Dev Day - Opening Session
yoshidashingo
2
470
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Featured
See All Featured
Fireside Chat
paigeccino
25
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Typedesign – Prime Four
hannesfritz
37
2.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
For a Future-Friendly Web
brad_frost
173
9.2k
Designing for Performance
lara
604
67k
How to Ace a Technical Interview
jacobian
274
23k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Statistics for Hackers
jakevdp
792
220k
Transcript
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. AWS Amplifyを軸にした フルサーバーレスなアプリケーション構成 清家 史郎 (@seike460) Fusic Co., Ltd. Evangelist / TeamLeader / PrincipalEngineer H-1
• 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?
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 1. AWS のサービスを理解することで、課題解決できる可能性の⽰唆 2. バックエンドエンジニアから⾒たときのAWS Amplifyの良さ、凄さ 3. AWS AppSyncを利⽤したGraphQLとTypeScriptの相性の良さ 本⽇のゴール
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 1. 構築したAWS構成と状況 2. 当時の課題感と気付き 3. 構成変更の流れ 4. 最終構成 5. まとめ Agenda
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 構築したAWS構成と状況
• 解析プログラムの実⾏を制御するPoC⽤のWebフロントエンドが必要 • 解析プログラムの作成は既に進んでいる • ⽇毎の解析実⾏回数としては多いわけではない • 解析結果データに対して、相当レコード数検索する必要がある レコード数が多い検索を、PoCなのでスピーディーに実装する必要がある →肝になりうる部分、馴染みのある技術で確実な実装が必要と判断
状況
• S3へ⼤容量ファイルアップロードの可能性在り • マルチパートアップロードへの対応が必要 • フロントエンドにはユーザー認証が必要 • 結果、必然的にバックエンドにも必要 • PoC解析環境を素早く整えたい
• 作らなくて良いものは作らず構築したい その他要件
• メンバー⼆⼈︓共通するスキルセット • Go • React • 役割分担 • バックエンド
• GoにてAmazon RDSのCRUD操作をするAWS Fargate API構築 • フロントエンド • Amplify UI Componentsを利⽤してReact フロントエンド構築 プロジェクトメンバースキルセット
amplify add auth • 最低限の設定を⾏うだけなら不安になるくらいすべてやってくれる • Amazon Cognitoの構築を数分で⾏える • Social
Providerの設定も可能
Authentication UI Components
i18nの対応も可能 • ⾃分で辞書ファイルを⽤意する必要は あるが簡単に対応可能
amplify add storage • コンテンツアップロード⽤のS3も楽々作成
Storage Libraries • サンプルコードにて簡単に アップロード機能作成も可能 • アップロード進捗を⾒る為の ProgressCallbackもあり
OpenAPI Generator バックエンドとフロントエンドの齟齬を⼩さくする為 OpenAPI定義を⾏い Code Generatorを利⽤する事で データのやり取りをスムーズに進めることが出来た。 OpenAPI
TypeScript バックエンドはGo、OpenAPI Generatorを利⽤しているので フロントエンドも厳密に型を設定したい。 TypeScript対応しているReactとMaterial-UIにて ⼿戻りを少なく構築を⾏う。 TypeScript OpenAPI
初期アーキテクチャ • フロントエンド • React + AWS Amplify • TypeScript
• バックエンド • Go • データベース • Amazon RDS • API仕様 • OpenAPI • 解析実⾏ • Step Functions +AWS Batch • 中間データ -> S3 • 検索データ -> RDS
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 課題感と気付き
課題感 • 解析実⾏回数としては多いわけではない • 特に利⽤されてない時のリソース待機コストが気になっていました • ALB、AWS FargateやAmazon RDSを無くしてリソース待機コストを低減したい •
バックエンドでやってることは⾮常に単純でこのコード管理・改修をしたくない • Goとコンテナ管理を無くしたい • 解析データの検索さえなければフルサーバーレス構成を取れるのに… ⚡
JAWS DAYS 2020にて気付き サーバレスの新しいデータストアの選択肢 S3 Select の魅⼒ Fusic / Principal
Engineer 内⽥が⽰した 当時の⾃分にはなかった 新しい選択肢 S3 Select 対応しているSQLは 解析結果データの検索に対して ⼗分に要件を満たしていた
技術の引出しの狭さが仇になる • GA後に試している、確実に認識していたはずのS3 Select • 実際に対象にS3 Selectを実⾏してみると 取得したかったデータが返ってくる • レスポンスも前述スライドの通り、Webレスポンスに耐えうる⼗分な速度
• 計測が挟まる要件上、確実に結果整合性で良い • ⼊⼒または結果のレコードの最⼤⻑は 1 MBを超えることはない • 今後の結果が爆発的に増えることもない • これを利⽤したAPIを作成するというアイディア、応⽤⼒のなさが仇に
課題の顕在化 • PoC環境を完成した後、リソースコストが話題に • 今こそあの後悔を解消する時 • インフラコストとコンテナ管理部分を排除出来る可能性 • Application Load
Balancer、AWS Fargate、Amazon RDS • ECR管理のGoアプリケーション S3 Select
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 構成変更の流れ
前提にすべき要件 • 表⾯的、機能的にはアップデートがない • 最⼩の⼯数かつ爆速で構築する必要がある • デグレードの可能性も最⼩にする必要がある • ⼈の⼿での変更を最⼩にする構成変更 今こそ認証とS3アップロードで使ってたAmplifyを全⾯的に活⽤
S3 Select API 作成 • 解析プログラム側はS3に中間データを配置していた • 結果CSVを配置するのみで対応完了 • 元々AWS
Fargate に Amazon RDSからSelectするSQLがある • S3 Select SQLに応⽤しLambda APIを作成 • Amplify CLIを使って 、REST APIを設置 • Step FunctionsをKickするAPIも合わせて設置
amplify add api(REST)
AWS AppSync • OpenAPI Generatorを利⽤しコードを⾃動⽣成していた • AWS AppSyncもスキーマーからコード⾃動⽣成してくれる • TypeScriptを利⽤した型付け
• スキーマーベースAPIの為、型が決まる • コードの変更箇所は明確 • OpenAPI Generatorのコードを、AppSync⽣成のコードに変更 • データを取得する箇所、登録する箇所をひたすら置き換え
AWS AppSync exampleの例だとAPI.graphqlを素直に 呼び出していて戻り値の型が表現出来ない 出⼒されたAPI.tsの中に型情報がある
AWS AppSync GraphQLResultに各QueryやMutationを ⾷わせることで戻り値の型も表現できる useStateにてState管理を⾏っていた 箇所に対して、AppSync対応を⾏う 元々OpenAPIにて型管理されていた為、 同じ型にはめ込み、その後の動作も保証
schema.graphql ドキュメント内にExampleが提供されている 書き⽅がわからなければこちらから 編集するのが良い hasoneやhasmanyの様な リレーショナルデータベース的なモデリング
amplify-cli Developer Preview Update ※先⽇amplify-cliのDeveloper Previewが公開されてました。 @connection と @key がdeprecatedになるとのこと
@connection -> @hasOne, @hasMany, and @belongsTo ORMの様な使⽤感のディレクティブ @hasOne(fields: [String!]) @hasMany
(indexName: String, fields: [String!], limit: Int = 100) @belongsTo(fields: [String!])
@key -> @primaryKey, @Index 詳しくはGithubへ https://github.com/aws-amplify/amplify-cli/issues/6217#issuecomment-929677992
AWS AppSyncに対する懸念 • 検索項⽬が増加していく事に対する懸念 • @searchableにてAmazon OpenSearch Serviceにて対応可能と判断 • インスタンス管理はサービス成⻑によるコスト増加と割り切る
• Amazon DynamoDBで処理するのが難しいデータ量に対する懸念 • Aurora Serverlessにて対応可能と判断(⾃⼒構築の必要あり) • 最終⼿段はLambda︖ • VTLと格闘することになるのは避けたいなぁ… Amazon OpenSearch Service Amazon DynamoDB Amazon Aurora Serverless
amplify add api,auth,storage そしてhosting • Amplify APIを導⼊ • 構成変更によりHosting S3とCloudFront以外はAmplify管理
• Amplify Consoleにて管理 • デプロイ、ドメイン管理も
ただし注意が必要 • CloudFrontの細かい設定が出来ない • Consoleを⾒る限り、CloudFrontが設定されているが、実際は⾒えない • AWS Amplify Performance mode設定はあるが、CloudFrontほどの細かい設定はない
• IP制限が現状設定出来ない • CloudFront の設定が⾒えないため、AWS WAFを設定することが出来ない。 • Basic認証も設定できるが、開発以外の環境かつ、制限をしたいという動機で Basic認証を利⽤するのは⾮現実的な印象
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. 最終構成
最終構成 • フロントエンド • React + AWS Amplify • TypeScript
• バックエンド • AWS AppSync • Lambda(Go) • データベース(ストレージ) • Amazon DynamoDB • S3 Select • API仕様 • GraphQL • 解析実⾏ • Step Function AWS Batch • 中間データ -> S3 • 検索データ -> S3
© 2021, Amazon Web Services, Inc. or its affiliates. All
rights reserved. まとめと謝辞
フルサーバーレス、フルマネージド環境 • AWS管理をAWS Amplifyを軸にしてフルサーバーレス環境に • 初期構成の課題感を解消出来た • ⾃ら積極的に管理するものがないフルサーバーレス環境 • OpenAPI
Generator + Typescript構築前提でのAWS AppSyncの親和性を感じた • AWS Amplifyを⼒を感じた、引き続き知⾒を貯め、アウトプットに繋げたい
謝辞 • 今回知識の幅が広がる事で、構成がガラリと変更することが出来た • 「無知は罪なり」とは⾔うが、⼈は万能ではない • コミュニティイベントでのアウトプットが決定打になった • 私の気付きのきっかけを与えてくれた「JAWS DAYS」の皆様
• この場の与えてくれた「AWS Dev Day Online Japan」の皆様 • この発表を聞いてくれた「聴講者」の皆様
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