AmplifyにCDKがやってきた_プレビュー版のAmplify_Gen2を触ってみた.pdf

by tttol

Slide 1

Slide 1 text

AmplifyにCDKがやってきた！プレビュー版のAmplify Gen2を触ってみた NRIネットコム株式会社髙橋　透 2024/04/19 JAWS-UG朝会#56

Slide 2

Slide 2 text

自己紹介髙橋　透 NRIネットコム株式会社よくやってること： ● Webアプリ開発 ○ Java/SpringBoot(本業) ○ AWS Amplify(趣味) AWS Community Builder (2024/03~) 2

Slide 3

Slide 3 text

おしながき ● Amplifyとは何か？ ● Amplify Gen2とは何か？ ● Amplify Gen2はTypeScriptでリソースが書けるぞ！ 3

Slide 4

Slide 4 text

Q: そもそも、Amplifyってなに？ A: Webアプリ開発のサポートツール（超ざっくり） 4

Slide 5

Slide 5 text

・DynamoDB ・AppSync ・Cognito ・S3/CloudFront ・etc… 全部やっとくわサーバーは？ DBは？認証は？デプロイは？アプリ書くわ Amplifyがないとき Amplifyがあるとき AWS Amplify Webアプリ開発は考えることが多い 5

Slide 6

Slide 6 text

Amazon DynamoDB Amazon Cognito Amazon S3 Amazon CloudFront AWS Amplify $ amplify add [api|auth|hosting] $ amplify push CLIでリソース作成／更新／削除 6

Slide 7

Slide 7 text

ここまで現行Amplifyの話 7

Slide 8

Slide 8 text

ここからAmplify Gen2の話 8

Slide 9

Slide 9 text

Amplify Gen2とは？ ● re:Invent 2023で発表された次世代のAmplify (in Preview) ● Gen2 = Generation 2. ● TypeScriptでリソースを定義できる（CDK） ● ホットスワップ形式でリソース変更を即デプロイできる ● ほかにもいろいろなアップデートあるが時間都合上割愛 9

Slide 10

Slide 10 text

Amazon DynamoDB Amazon Cognito Amazon S3 Amazon CloudFront AWS Amplify $ amplify add [api|auth|hosting] $ amplify push CLIからCDKへ resouce.ts 10

Slide 11

Slide 11 text

Gen1/Gen2のフロー比較 Code Editor localhost CLI iterate edit push test Gen1 ＜Gen1の問題点＞ ● CLIで都度PUSHするのが面倒 ● CLI作業がイテレーションの速度を落としている 11 AWS Amplify

Slide 12

Slide 12 text

Gen1/Gen2のフロー比較 Code Editor localhost test iterate 🔥hot swapped🔥 Gen2 ＜Gen2での改善＞ ● エディタの変更をリアルタイムで検知 ● ホットスワップでAWSに即デプロイ開始 ● イテレーション高速化 12 AWS Amplify

Slide 13

Slide 13 text

リソースの反映スムーズになったので localhostでのテストがより早く行える ↓ 開発速度向上 13