(今更)Amplifyさっくり体験

Transcript

1. (ࠓߋ)Amplifyͬ͘͞Γମݧ
   Kichijoji.pm #27
   papix (@__papix__)
   

   View Slide

2. ࣗݾ঺հ
   • papix (id:papix / @__papix__)
   
   
   • גࣜձࣾ͸ͯͳ WebΞϓϦέʔγϣϯΤϯδχΞ (2017೥ʙ)
   
   
   • ϒϩάMediaνʔϜ → ϚϯΨνʔϜ
   
   
   • Ұൠࣾஂ๏ਓJapan Perl Associationཧࣄ
   
   
   • ϒϩά: https://papix.hatena(blog.(com|jp)|diary.jp)
   

   View Slide

3. AWS Amplify
   • ެࣜᐌ͘...
   
   
   • AWS Amplify ͸ɺͦΕͧΕΛ࿈ܞͤͨ͞ΓݸผͰ࢖༻ͨ͠ΓͰ͖
   ΔɺπʔϧͱαʔϏεͷηοτͰ͢ɻ͜ΕΒͷػೳʹΑΓɺϑϩϯ
   τΤϯυ΢Σϒ͓ΑͼϞόΠϧͷσϕϩούʔ͕ɺAWS ʹΑΔε
   έʔϥϒϧͳϑϧελοΫΞϓϦέʔγϣϯΛϏϧυͰ͖ΔΑ͏ʹ
   ͠·͢ɻ
   

   View Slide

4. ࡞ͬͨ΋ͷ: SmartP
   • ࣾ಺ͷ։ൃ߹॓(3೔ؒ)Ͱ࡞ͬͨϓϩμ
   Ϋτ
   
   
   • ٕज़ελοΫ: Amplify / Next.js
   (SSR)
   
   
   • Πϕϯτͷܭը/ڞ༗/ه࿥(อଘ)͕Ͱ͖
   ΔWebαʔϏε
   

   View Slide

5. AWS AmplifyͰྑ͔ͬͨ͜ͱ
   • CLIͰαΫοͱϦιʔε͕ੜ͑Δ
   
   
   • ňamplify auth addʼnͰCognito͕ੜ͑Δ
   
   
   • ňamplify storage addʼnͰS3͕ੜ͑Δ
   
   
   • ňamplify api addʼnͰGraphQL endpoint (AppSync)͕ੜ͑Δ
   

   View Slide

6. AWS AmplifyͰྑ͔ͬͨ͜ͱ
   • AppSync͕ศར
   
   
   • GraphQLͷschemaΛॻ͍ͯdeploy͢Δͱγϡοͱಈ͘
   
   
   • Subscriptionͷॲཧ΋࠷௿ݶͷίʔυͰ࣮૷Ͱ͖Δ
   

   View Slide

7. AWS AmplifyͰGraphQLͷSubscription
   // Activityͷ௥ՃΛsubscribe͢Δ
   const createActivitySubscription

   = API.graphql(graphqlOperation(onCreateActivity)) as Observable>
   ;
   
   createActivitySubscription.subscribe(
   {
   
   next: e =>
   {
   
   const createdActivity = e.value.data.onCreateActivity
   ;
   
   // createdActivity͕, ௥Ճ͞ΕͨActivit
   y
   
   // Α͠ͳʹॲཧΛ͢Δ
   }
   
   });
   

   View Slide

8. AWS AmplifyͰྑ͔ͬͨ͜ͱ
   • ࠷খݶͷ࡞ۀͰ࠷௿ݶಈ͘΋ͷ͕࡞ΕΔ
   
   
   • ೝূ, σʔλͷ؅ཧ, ը૾ͷอଘͳͲ͸શͯAmplifyʹ೚ͤΒΕΔ
   
   
   • ࠓճͷ։ൃ߹॓ͷΑ͏ͳ, ϓϩτλΠϐϯάʹ͸ศར
   

   View Slide

9. AWS AmplifyͰ೉͔ͬͨ͜͠ͱ
   • ͪΐͬͱڽͬͨ͜ͱΛ͠Α͏ͱ͢Δͱେม(ͳ͜ͱ͕͋Δ)
   
   
   • ࣾ಺ͷ։ൃ߹॓Ͱར༻͢Δ΋ͷͩͬͨͷͰ, CognitoͰϝʔϧΞυϨ
   εͷυϝΠϯͰ੍ݶΛ͔͚Α͏ͱͨ͠
   
   
   • Կނ͔͏·͘ߦ͔ͣ, ࢼߦࡨޡͷ຤ϩάΠϯ͕Ͱ͖ͳ͘ͳͬͨ...
   
   
   • ࠷ऴతʹ, 3೔ؒͰ4ճΠν͔ΒAmplifyͰ؀ڥΛ࡞Δ͜ͱʹͳͬͨ
   
   
   • ௨শňAmplify؀ڥߏஙRTAʼn
   

   View Slide

10. AWS Amplify ײ૝
    • ϓϩτλΠϐϯάʹ͸ຊ౰ʹ࠷ద
    
    
    • "ຊ࣭"ʹूத͢Δ͜ͱ͕Ͱ͖ͨ
    
    
    • ࣮ࡍʹαʔϏεͱͯ͠ఏڙ͢Δࡍʹ࢖͏͔͸ཁݕূ
    
    
    • บ͕͋Δ఺͕ଟ͍
    
    
    • ň΋͠Ұൠʹఏڙ͢ΔͳΒGo(GraphQL) + Next.jsͰ࡞Γ௚͔͢
    ͳ...ʼnͱ͍͏ձ࿩Λͨ͠
    

    View Slide

11. ·ͱΊ
    • ࠓߋAWS Amplify৮ͬͯΈ·͕ͨ͠, ૝૾ͷ100ഒศརͩͬͨ
    
    
    • Կ͔αΫοͱಈ͘WebαʔϏε࡞Γ͍ͨ࣌͸࢖͍͖͍ͬͯͨ
    

    View Slide