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
62
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
VS CodeとVimが好きなエンジニアが考えた最強のエディタ
miura55
0
150
オープンソースのロボットソフトウェア「ROS」で地図作成を試してみた
miura55
0
260
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
330
個人のAWSアカウントをマルチ運用してみた
miura55
2
340
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編?)
miura55
0
160
App Runnerでパラメーターストアの値を使ってみた
miura55
0
340
ultraArmをモニター提供してもらった話
miura55
0
130
JAWS UG名古屋2023年活動報告
miura55
0
140
AWS Step Functionsの新機能「Call third-party API」を試してみた
miura55
1
130
Other Decks in Technology
See All in Technology
PHPでデータベースを作ってみた/create-data-with-php
hanhan1978
5
950
新常識! Javascript×AWS Lambdaがアツい!!
watany
3
230
エムスリーMR君ファミリー開発チーム紹介資料 / Introduction of M3 MRkun Family Dev Team
m3_engineering
0
110
Four Keysだけじゃ足りなくない? 〜俺たちだけのFour Keysを探して〜
rinchsan
2
170
サイボウズのOSPO
sat
PRO
3
180
学びの敷居を下げるためにどんな工夫をしたの?
mineo_matsuya
2
200
よりアジャイルに向かう道のりとして、中止していたスクラムイベントを復活したら100Lの汗を流した話 / Reviving Scrum Events
kakehashi
2
140
半年かけてPHP5.6からPHP7.4までバージョンアップした苦労と工夫 PHPカンファレンス福岡2024
kechiiin
1
170
超入門 SRE
ryuichi1208
5
3.2k
お手並み拝見にしないオンボーディング
zuckey_17
2
1.2k
障害対応を楽しむ7つのコツ
ryuichi1208
0
210
GA technologiesの経営戦略から駆動するデータ基盤構築
pacocat
0
420
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
122
16k
Designing Experiences People Love
moore
136
23k
Raft: Consensus for Rubyists
vanstee
133
6.4k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
4 Signs Your Business is Dying
shpigford
177
21k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
359
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.6k
Faster Mobile Websites
deanohume
300
30k
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