Slide 1

Slide 1 text

Amplify Gen2 で開発体験はどのように変わるのか 1

Slide 2

Slide 2 text

自己紹介 名前:新井貴大 よく使う技術: フロント:React,Next バックエンド: Node(Express) 2

Slide 3

Slide 3 text

アジェンダ amplify とは Gen1 で辛かったこと Gen2 の特徴 Gen2 による開発体験の変化 まとめ 3

Slide 4

Slide 4 text

Amplify Gen2 のパブリックプレビュー(GA)が 5/7 正式 リリース Gen1:バックエンドの設定や管理が主に AWS コンソールや CLI を使用して構築 Gen2:開発者はデータモデル、ビジネスロジック、認証ルールを含むアプリケーション の要件を TypeScript で表現できるようになった 4

Slide 5

Slide 5 text

amplify とは aws 公式から引用 Amplify には、AWS でフルスタックのウェブアプリやモバイルアプリを構築するために 必要なものがすべて揃っています。フロントエンドの構築とホスティング、認証やスト レージなどの機能の追加、リアルタイムのデータソースへの接続、デプロイと数百万人 のユーザーへの拡張が可能です。 つまり とにかく爆速でバックエンドを伴うスケーラブルなアプリケーション開発をしたい 人 よくあるのサーバーレス環境でアプリケーション構築してみたい人 congnito を用いた認証、Route53, S3, CloudFront を用いたホスティング、 AppSync、DynamoDB を使用した API の作成等 5

Slide 6

Slide 6 text

従来の amplify で辛かったこと 上書き不可の設定ファイルがたくさん生成される 環境構築の序盤で詰まりがち amplify push コマンドを実行途中でエラーになり、やり直しとか諸々発生 バックエンド構築はローカル検証がしにくいため、環境適用後に変更を確認しがちにな り、そのためテストが薄くなる。 。 aws-exports.js ファイルの管理 リソースに変更が発生するたびにファイルの置換をしてもらう必要が出てきます、 初期開発フェーズでは特に障害になりがちです。 複数メンバーと協業するプロジェクトでは、連携が取れていないとローカルのファ イル(aws-exports.js)が更新されていないため、動かないという話はよくあった 6

Slide 7

Slide 7 text

Gen2 の機能追加 バックエンドのリソース管理および deploy が従来の CLI から CDK に変更 ファイル構成が非常にみやすくなった 開発者ごとのクラウドサンドボックス環境 「npx ampx sandbox」コマンドで開発中に開発者ごとに分断された専用のバック エンドが作成される,バックエンドのコードを修正すると watch されているため自動 deploy amplify-ui がより使いやすくなった コマンドひとつでフォームや画像の呼び出しアップロードまで完結できるコンポーネン トが自動生成される「npx ampx generate forms」 2024 年 05 月 10 時点では基本 gen1(旧 amplify)で提供していたサービスは提供してい る印象 プルリク・プレビュー、カスタムドメイン機能(2024 年初めでは未リリース) 2024/05 時点では auth,data,Storage,Function も提供 → リソース拡張は基本 CDK で 7

Slide 8

Slide 8 text

ファイル構成について | | | 8

Slide 9

Slide 9 text

開発体験はこのように変わる 9

Slide 10

Slide 10 text

従来の場合(Gen1) 10

Slide 11

Slide 11 text

Gen2 の場合 11

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

さらに Amplify UI が強化された 簡単な技術検証であれば Amplify UI を採用は検討材料としては ◯ schema 定義からフォーム UI コンポーネントを自動生成 npx ampx generate forms 13

Slide 14

Slide 14 text

まとめ 開発者ごとのサンドボックス環境は便利そう ただし、実際に運用してみると詰まるところも出てくる可能性は十分ありそう。 CDK の勉強としても試してみたい 個人開発や POC ◯ 14