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
210
2022年に始めるPerlでWebサービス開発(趣味)
papix
0
450
ワーケーションに関する考察
papix
3
2k
はてなにおける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.1k
Other Decks in Technology
See All in Technology
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.4k
LLVM/ASMを使った有限体の高速実装
herumi
0
120
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
170
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
130
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
プログラム検証入門
riru
6
870
株式会社EventHub・エンジニア採用資料
eventhub
0
2.9k
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
Featured
See All Featured
Become a Pro
speakerdeck
PRO
22
4.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Building a Scalable Design System with Sketch
lauravandoore
459
32k
A better future with KSS
kneath
235
17k
Scaling GitHub
holman
458
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
We Have a Design System, Now What?
morganepeng
48
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
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αʔϏε࡞Γ͍͍͖͍ͨ࣌ͬͯͨ