Save 37% off PRO during our Black Friday Sale! »

(今更)Amplifyさっくり体験

120b74af626c2b23f954926ef68ac5d6?s=47 papix
July 06, 2021

 (今更)Amplifyさっくり体験

120b74af626c2b23f954926ef68ac5d6?s=128

papix

July 06, 2021
Tweet

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