(今更)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αʔϏε࡞Γ͍ͨ࣌͸࢖͍͖͍ͬͯͨ