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
850
(今更)Amplifyさっくり体験
papix
July 06, 2021
Tweet
Share
More Decks by papix
See All by papix
Houtou.pm #1
papix
0
25
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
340
YAPC::Kyotoの「全て」 / All of "YAPC::Kyoto"
papix
0
1.5k
イベントの中の人 / Inside the Events
papix
0
270
2022年に始めるPerlでWebサービス開発(趣味)
papix
0
530
ワーケーションに関する考察
papix
3
2.2k
はてなにおけるGitHub Actions活用事例 / GitHub Actions in Hatena
papix
0
2.3k
ミススペルを発見するmisspellのご紹介 / Introduce misspell
papix
0
1.1k
「知らなかった」を聞きに行く 〜海外カンファレンス参加のススメ〜 / builderscon 2019
papix
0
340
Other Decks in Technology
See All in Technology
エッジ活用の最適解とは? 新しいエッジ処理アーキテクチャ「Edge-as-a-Service」構想について
kakerucom
0
120
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
220
撤退危機からのピボット : 4年目エンジニアがリードする TypeScript で挑む事業復活 / crisis-to-pivot-4th-year-engineer-ts-relaunch
carta_engineering
2
750
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
ロール・ツール群の開発 / Development of Roles and Tools
ks91
PRO
0
100
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
0
210
AIに実況させる / AI Streamer
motemen
3
1.2k
AIの電力問題を概観する
rmaruy
1
170
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
11
1.8k
Okayama WordPress Meetup #12 | そのバックアップ、本当に復元できますか? リストアやってみた!
takeshifurusato
0
100
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
120
“新卒らしさ”を脱ぎ捨てて 〜1年を経て学んだこと〜
rebase_engineering
0
100
Featured
See All Featured
Producing Creativity
orderedlist
PRO
345
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
14
880
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Typedesign – Prime Four
hannesfritz
41
2.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Agile that works and the tools we love
rasmusluckow
329
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
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αʔϏε࡞Γ͍͍͖͍ͨ࣌ͬͯͨ