(今更)Amplifyさっくり体験

Transcript

1. (ࠓߋ)Amplifyͬ͘͞Γମݧ Kichijoji.pm #27 papix (@__papix__)
2. ࣗݾ঺հ • papix (id:papix / @__papix__) • גࣜձࣾ͸ͯͳ WebΞϓϦέʔγϣϯΤϯδχΞ (2017೥ʙ) • ϒϩάMediaνʔϜ → ϚϯΨνʔϜ • Ұൠࣾஂ๏ਓJapan Perl Associationཧࣄ • ϒϩά: https://papix.hatena(blog.(com|jp)|diary.jp)
3. AWS Amplify • ެࣜᐌ͘... • AWS Amplify ͸ɺͦΕͧΕΛ࿈ܞͤͨ͞ΓݸผͰ࢖༻ͨ͠ΓͰ͖ ΔɺπʔϧͱαʔϏεͷηοτͰ͢ɻ͜ΕΒͷػೳʹΑΓɺϑϩϯ τΤϯυ΢Σϒ͓ΑͼϞόΠϧͷσϕϩούʔ͕ɺAWS ʹΑΔε έʔϥϒϧͳϑϧελοΫΞϓϦέʔγϣϯΛϏϧυͰ͖ΔΑ͏ʹ ͠·͢ɻ
4. ࡞ͬͨ΋ͷ: SmartP • ࣾ಺ͷ։ൃ߹॓(3೔ؒ)Ͱ࡞ͬͨϓϩμ Ϋτ • ٕज़ελοΫ: Amplify / Next.js (SSR) • Πϕϯτͷܭը/ڞ༗/ه࿥(อଘ)͕Ͱ͖ ΔWebαʔϏε
5. AWS AmplifyͰྑ͔ͬͨ͜ͱ • CLIͰαΫοͱϦιʔε͕ੜ͑Δ • ňamplify auth addʼnͰCognito͕ੜ͑Δ • ňamplify storage addʼnͰS3͕ੜ͑Δ • ňamplify api addʼnͰGraphQL endpoint (AppSync)͕ੜ͑Δ
6. AWS AmplifyͰྑ͔ͬͨ͜ͱ • AppSync͕ศར • GraphQLͷschemaΛॻ͍ͯdeploy͢Δͱγϡοͱಈ͘ • Subscriptionͷॲཧ΋࠷௿ݶͷίʔυͰ࣮૷Ͱ͖Δ
7. 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 // Α͠ͳʹॲཧΛ͢Δ } });
8. AWS AmplifyͰྑ͔ͬͨ͜ͱ • ࠷খݶͷ࡞ۀͰ࠷௿ݶಈ͘΋ͷ͕࡞ΕΔ • ೝূ, σʔλͷ؅ཧ, ը૾ͷอଘͳͲ͸શͯAmplifyʹ೚ͤΒΕΔ • ࠓճͷ։ൃ߹॓ͷΑ͏ͳ, ϓϩτλΠϐϯάʹ͸ศར
9. AWS AmplifyͰ೉͔ͬͨ͜͠ͱ • ͪΐͬͱڽͬͨ͜ͱΛ͠Α͏ͱ͢Δͱେม(ͳ͜ͱ͕͋Δ) • ࣾ಺ͷ։ൃ߹॓Ͱར༻͢Δ΋ͷͩͬͨͷͰ, CognitoͰϝʔϧΞυϨ εͷυϝΠϯͰ੍ݶΛ͔͚Α͏ͱͨ͠ • Կނ͔͏·͘ߦ͔ͣ, ࢼߦࡨޡͷ຤ϩάΠϯ͕Ͱ͖ͳ͘ͳͬͨ... • ࠷ऴతʹ, 3೔ؒͰ4ճΠν͔ΒAmplifyͰ؀ڥΛ࡞Δ͜ͱʹͳͬͨ • ௨শňAmplify؀ڥߏஙRTAʼn
10. AWS Amplify ײ૝ • ϓϩτλΠϐϯάʹ͸ຊ౰ʹ࠷ద • "ຊ࣭"ʹूத͢Δ͜ͱ͕Ͱ͖ͨ • ࣮ࡍʹαʔϏεͱͯ͠ఏڙ͢Δࡍʹ࢖͏͔͸ཁݕূ • บ͕͋Δ఺͕ଟ͍ • ň΋͠Ұൠʹఏڙ͢ΔͳΒGo(GraphQL) + Next.jsͰ࡞Γ௚͔͢ ͳ...ʼnͱ͍͏ձ࿩Λͨ͠
11. ·ͱΊ • ࠓߋAWS Amplify৮ͬͯΈ·͕ͨ͠, ૝૾ͷ100ഒศརͩͬͨ • Կ͔αΫοͱಈ͘WebαʔϏε࡞Γ͍ͨ࣌͸࢖͍͖͍ͬͯͨ