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
Amplify Gen2がGAされたので試してみた
Search
KMiura
June 20, 2024
Technology
0
180
Amplify Gen2がGAされたので試してみた
2024.06.20 Kobe Engineer SakeBash #3 with HACK.BAR
KMiura
June 20, 2024
Tweet
Share
More Decks by KMiura
See All by KMiura
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
830
Amazon Rekognitionを使ったインターホンハック
miura55
0
32
Pythonでルンバをハックしてみた
miura55
0
81
あなたの知らないクラフトビールの世界
miura55
0
250
Storage Browser for Amazon S3を触ってみた + α
miura55
0
140
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
140
あのボタンでつながるSORACOM
miura55
0
89
Postman Flowsで作るAPI連携LINE Bot
miura55
0
310
Lambdaと共に歩んだAWS
miura55
3
680
Other Decks in Technology
See All in Technology
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
880
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
900
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
67k
Share my, our lessons from the road to re:Invent
naospon
0
110
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
780
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
230
2.5Dモデルのすべて
yu4u
2
930
表現を育てる
kiyou77
1
230
クラウドサービス事業者におけるOSS
tagomoris
3
950
php-conference-nagoya-2025
fuwasegu
0
110
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
1.5k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
A Tale of Four Properties
chriscoyier
158
23k
Designing for humans not robots
tammielis
250
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Visualization
eitanlees
146
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
Amplify Gen2がGAされたので試してみた KMiura(@k_miura_io)
自己紹介 • 三浦 耕生(こうき) • Acall株式会社 Facility Experience 事業部FXプロダクトチーム所属 (2024/4
中途入社) • バックエンドエンジニア • 名古屋在住 @k_miura_io koki.miura05
Amplify Gen2 がGA🎉
そもそもAWS Amplifyって何? • ウェブアプリケーションやモバイルアプリの構築に必要なバックエンドを提供して いるAWSのmBaaS(Moblie Backend as a Service) •
DB、認証などのバックエンドをすべてよしなにAWSで構築してくれて、開発者は フロントエンドの開発に集中できる • AWSの各種サービスに接続するための各種フレームワーク向けのライブラリも 提供されている 実は新卒時代の会社でテック ブログを書いてた→
サポートしている言語・フレームワーク React Next.js Vue Angular JavaScript フロントエンド モバイル React Native
Flutter Android Swift
Gen2でのアップデート • ローカル開発用のサンドボックス環境構築 • バックエンドはすべてTypeScriptで定義 • デプロイはCDKベース • git pushをトリガーにしたビルド、テスト、デプロイに対応
個人的にGen1のここがイマイチ • バックエンドのリソース追加をCLIでやらないといけない • リソースを変更したときの差分がわかりにくい(変更してないはずの箇 所に差分が出る) • Amplify CLI用に認証情報を追加しないと使えないのが手間
Gen2ではクリアになっている • バックエンドのリソース追加をCLIでやらないといけない →TypeScriptを使って更新ができる • Amplify CLI用に認証情報を追加しないと使えないのが手間 →AWS CLIを使うときに設定した認証情報がそのまま使えそう(そもそも Sandbox以外でAWSの認証情報が必要なくなったっぽい)
• リソースを変更したときの差分がわかりにくい(変更してないはずの箇所に差分が 出る) →コードベースで差分が明確になった(Gitで差分確認すればOK)
公式サンプルもある • Pub/Subを使用したマルチプレイの アプリ • 他のユーザーのカーソルの動きをリ アルタイムで確認できる • アプリケーション内には認証機能の 追加など、オリジナルからアップ
デートについても解説されている https://aws.amazon.com/jp/blogs/news/ amplify-gen2-ga/
DEMO
ローカル開発用のSandbox環境 • ローカルでの開発用にバックエンドとして Sandbox環境が構築できる • 「npx ampx sandbox」と叩くだけ • 設定情報はSandbox環境を構築したときに
生成されるJsonファイル (amplify_outputs.json)を参照する
デプロイをする時 • ソースコードのレポジトリを 指定することでデプロイが できる • CLIでAmplifyのプロジェクト を用意して、レポジトリにコ ミットすることでCI/CDが実 行されるようになる
本番環境のデプロイ • デプロイと同時に本番用のバックエンド 定義amplify_outputs.jsonが生成される • JSONを手元にダウンロードして再コミッ トをすることで本番用のバックエンドが つかえる →フロントエンドとバックエンドをまと めてコミットすると事故るので注意
• AWSのSDKを使うような実装が含まれ ている場合は認証コンポーネントの追 加をお忘れなく(地味にハマった…)
まとめ • Amplify Gen2を使うことでバックエンドのデプロイがCDKベースになっ て(個人的に)直感的に定義できると思った • ローカルデバッグが結構アツい! • やはりTypeScript、TypeScriptはすべてを解決する
END