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
Amazon Rekognitionを使ったインターホンハック
miura55
0
29
Pythonでルンバをハックしてみた
miura55
0
73
あなたの知らないクラフトビールの世界
miura55
0
240
Storage Browser for Amazon S3を触ってみた + α
miura55
0
130
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
140
あのボタンでつながるSORACOM
miura55
0
83
Postman Flowsで作るAPI連携LINE Bot
miura55
0
300
Lambdaと共に歩んだAWS
miura55
3
670
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた(リベンジ編)
miura55
0
210
Other Decks in Technology
See All in Technology
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
520
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
20
4.4k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
120
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
120
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
2
460
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
110
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
200
Next Step: Play Time!
trishagee
2
150
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
370
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
160
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
410
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
We Have a Design System, Now What?
morganepeng
51
7.4k
Faster Mobile Websites
deanohume
306
31k
How STYLIGHT went responsive
nonsquared
98
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Site-Speed That Sticks
csswizardry
3
320
Mobile First: as difficult as doing things right
swwweet
223
9.3k
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