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
800
(今更)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
150
2022年に始めるPerlでWebサービス開発(趣味)
papix
0
420
ワーケーションに関する考察
papix
3
2k
はてなにおけるGitHub Actions活用事例 / GitHub Actions in Hatena
papix
0
1.8k
ミススペルを発見するmisspellのご紹介 / Introduce misspell
papix
0
940
「知らなかった」を聞きに行く 〜海外カンファレンス参加のススメ〜 / builderscon 2019
papix
0
300
Perl in Japan
papix
0
2.4k
Perlでもトレーシングがしたい! 〜はてなブログの"見える化"への挑戦〜 / Tracing in Perl
papix
1
1.1k
Other Decks in Technology
See All in Technology
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
320
ServiceNow Knowledge Learning Rise up
manarobot
0
210
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
520
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
開発パフォーマンスを最大化するための開発体制
ham0215
2
420
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
Janus
bkuhlmann
1
490
本当のAWS基礎
toru_kubota
0
520
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Featured
See All Featured
Teambox: Starting and Learning
jrom
128
8.4k
The Language of Interfaces
destraynor
151
23k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Navigating Team Friction
lara
178
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Practical Orchestrator
shlominoach
182
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Happy Clients
brianwarren
92
6.4k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
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αʔϏε࡞Γ͍͍͖͍ͨ࣌ͬͯͨ