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さっくり体験
Search
papix
July 06, 2021
Technology
0
810
(今更)Amplifyさっくり体験
papix
July 06, 2021
Tweet
Share
More Decks by papix
See All by papix
YAPC::Kyotoの「全て」 / All of "YAPC::Kyoto"
papix
0
1.3k
イベントの中の人 / Inside the Events
papix
0
220
2022年に始めるPerlでWebサービス開発(趣味)
papix
0
460
ワーケーションに関する考察
papix
3
2.1k
はてなにおけるGitHub Actions活用事例 / GitHub Actions in Hatena
papix
0
2k
ミススペルを発見するmisspellのご紹介 / Introduce misspell
papix
0
1k
「知らなかった」を聞きに行く 〜海外カンファレンス参加のススメ〜 / builderscon 2019
papix
0
320
Perl in Japan
papix
0
2.5k
Perlでもトレーシングがしたい! 〜はてなブログの"見える化"への挑戦〜 / Tracing in Perl
papix
1
1.2k
Other Decks in Technology
See All in Technology
LLMOps : ΔMLOps
shuntaito
12
1.6k
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
220
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
1
220
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
bengo4com
8
3.9k
GPSデバイスを使った簡易位置案内システムの構築をしてみた話。/jawsfesta2024
kwada
0
220
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
140
不要なリソースを自動で定期的に整理する方法 ~Sandboxアカウントのコストを削減しよう!~
amixedcolor
4
240
Bluesky 2019〜2022
yamarten
1
120
Japan AWS Jr. Championsがお届けする、アウトプットのすすめ
hamijay_cloud
0
200
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
220
Transforming Event Attendees into Lifelong Donors: Insights from Claire Axelrad
auctria
PRO
1
110
RSGT Walk Through
kawaguti
PRO
2
380
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Making Projects Easy
brettharned
115
5.9k
BBQ
matthewcrist
85
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Visualization
eitanlees
143
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Docker and Python
trallard
40
3k
RailsConf 2023
tenderlove
28
860
The Art of Programming - Codeland 2020
erikaheidi
51
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
The Invisible Side of Design
smashingmag
297
50k
Transcript
(ࠓߋ)Amplifyͬ͘͞Γମݧ Kichijoji.pm #27 papix (@__papix__)
ࣗݾհ • papix (id:papix / @__papix__) • גࣜձࣾͯͳ WebΞϓϦέʔγϣϯΤϯδχΞ (2017ʙ)
• ϒϩάMediaνʔϜ → ϚϯΨνʔϜ • Ұൠࣾஂ๏ਓJapan Perl Associationཧࣄ • ϒϩά: https://papix.hatena(blog.(com|jp)|diary.jp)
AWS Amplify • ެࣜᐌ͘... • AWS Amplify ɺͦΕͧΕΛ࿈ܞͤͨ͞ΓݸผͰ༻ͨ͠ΓͰ͖ ΔɺπʔϧͱαʔϏεͷηοτͰ͢ɻ͜ΕΒͷػೳʹΑΓɺϑϩϯ τΤϯυΣϒ͓ΑͼϞόΠϧͷσϕϩούʔ͕ɺAWS
ʹΑΔε έʔϥϒϧͳϑϧελοΫΞϓϦέʔγϣϯΛϏϧυͰ͖ΔΑ͏ʹ ͠·͢ɻ
࡞ͬͨͷ: SmartP • ࣾͷ։ൃ߹॓(3ؒ)Ͱ࡞ͬͨϓϩμ Ϋτ • ٕज़ελοΫ: Amplify / Next.js
(SSR) • Πϕϯτͷܭը/ڞ༗/ه(อଘ)͕Ͱ͖ ΔWebαʔϏε
AWS AmplifyͰྑ͔ͬͨ͜ͱ • CLIͰαΫοͱϦιʔε͕ੜ͑Δ • ňamplify auth addʼnͰCognito͕ੜ͑Δ • ňamplify
storage addʼnͰS3͕ੜ͑Δ • ňamplify api addʼnͰGraphQL endpoint (AppSync)͕ੜ͑Δ
AWS AmplifyͰྑ͔ͬͨ͜ͱ • AppSync͕ศར • GraphQLͷschemaΛॻ͍ͯdeploy͢Δͱγϡοͱಈ͘ • Subscriptionͷॲཧ࠷ݶͷίʔυͰ࣮Ͱ͖Δ
AWS AmplifyͰGraphQLͷSubscription // ActivityͷՃΛsubscribe͢Δ const createActivitySubscription = API.graphql(graphqlOperation(onCreateActivity)) as Observable<Record<string,
unknown>> ; createActivitySubscription.subscribe( { next: e => { const createdActivity = e.value.data.onCreateActivity ; // createdActivity͕, Ճ͞ΕͨActivit y // Α͠ͳʹॲཧΛ͢Δ } });
AWS AmplifyͰྑ͔ͬͨ͜ͱ • ࠷খݶͷ࡞ۀͰ࠷ݶಈ͘ͷ͕࡞ΕΔ • ೝূ, σʔλͷཧ, ը૾ͷอଘͳͲશͯAmplifyʹͤΒΕΔ • ࠓճͷ։ൃ߹॓ͷΑ͏ͳ,
ϓϩτλΠϐϯάʹศར
AWS AmplifyͰ͔ͬͨ͜͠ͱ • ͪΐͬͱڽͬͨ͜ͱΛ͠Α͏ͱ͢Δͱେม(ͳ͜ͱ͕͋Δ) • ࣾͷ։ൃ߹॓Ͱར༻͢ΔͷͩͬͨͷͰ, CognitoͰϝʔϧΞυϨ εͷυϝΠϯͰ੍ݶΛ͔͚Α͏ͱͨ͠ • Կނ͔͏·͘ߦ͔ͣ,
ࢼߦࡨޡͷϩάΠϯ͕Ͱ͖ͳ͘ͳͬͨ... • ࠷ऴతʹ, 3ؒͰ4ճΠν͔ΒAmplifyͰڥΛ࡞Δ͜ͱʹͳͬͨ • ௨শňAmplifyڥߏஙRTAʼn
AWS Amplify ײ • ϓϩτλΠϐϯάʹຊʹ࠷ద • "ຊ࣭"ʹूத͢Δ͜ͱ͕Ͱ͖ͨ • ࣮ࡍʹαʔϏεͱͯ͠ఏڙ͢Δࡍʹ͏͔ཁݕূ •
บ͕͋Δ͕ଟ͍ • ň͠Ұൠʹఏڙ͢ΔͳΒGo(GraphQL) + Next.jsͰ࡞Γ͔͢ ͳ...ʼnͱ͍͏ձΛͨ͠
·ͱΊ • ࠓߋAWS Amplify৮ͬͯΈ·͕ͨ͠, ૾ͷ100ഒศརͩͬͨ • Կ͔αΫοͱಈ͘WebαʔϏε࡞Γ͍͍͖͍ͨ࣌ͬͯͨ