Upgrade to Pro — share decks privately, control downloads, hide ads and more …

(今更)Amplifyさっくり体験

papix
July 06, 2021

 (今更)Amplifyさっくり体験

papix

July 06, 2021
Tweet

More Decks by papix

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ࣗݾ঺հ
    • papix (id:papix / @__papix__)


    • גࣜձࣾ͸ͯͳ WebΞϓϦέʔγϣϯΤϯδχΞ (2017೥ʙ)


    • ϒϩάMediaνʔϜ → ϚϯΨνʔϜ


    • Ұൠࣾஂ๏ਓJapan Perl Associationཧࣄ


    • ϒϩά: https://papix.hatena(blog.(com|jp)|diary.jp)

    View full-size slide

  3. AWS Amplify
    • ެࣜᐌ͘...


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

    View full-size slide

  4. ࡞ͬͨ΋ͷ: SmartP
    • ࣾ಺ͷ։ൃ߹॓(3೔ؒ)Ͱ࡞ͬͨϓϩμ
    Ϋτ


    • ٕज़ελοΫ: Amplify / Next.js
    (SSR)


    • Πϕϯτͷܭը/ڞ༗/ه࿥(อଘ)͕Ͱ͖
    ΔWebαʔϏε

    View full-size slide

  5. AWS AmplifyͰྑ͔ͬͨ͜ͱ
    • CLIͰαΫοͱϦιʔε͕ੜ͑Δ


    • ňamplify auth addʼnͰCognito͕ੜ͑Δ


    • ňamplify storage addʼnͰS3͕ੜ͑Δ


    • ňamplify api addʼnͰGraphQL endpoint (AppSync)͕ੜ͑Δ

    View full-size slide

  6. AWS AmplifyͰྑ͔ͬͨ͜ͱ
    • AppSync͕ศར


    • GraphQLͷschemaΛॻ͍ͯdeploy͢Δͱγϡοͱಈ͘


    • Subscriptionͷॲཧ΋࠷௿ݶͷίʔυͰ࣮૷Ͱ͖Δ

    View full-size 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 full-size slide

  8. AWS AmplifyͰྑ͔ͬͨ͜ͱ
    • ࠷খݶͷ࡞ۀͰ࠷௿ݶಈ͘΋ͷ͕࡞ΕΔ


    • ೝূ, σʔλͷ؅ཧ, ը૾ͷอଘͳͲ͸શͯAmplifyʹ೚ͤΒΕΔ


    • ࠓճͷ։ൃ߹॓ͷΑ͏ͳ, ϓϩτλΠϐϯάʹ͸ศར

    View full-size slide

  9. AWS AmplifyͰ೉͔ͬͨ͜͠ͱ
    • ͪΐͬͱڽͬͨ͜ͱΛ͠Α͏ͱ͢Δͱେม(ͳ͜ͱ͕͋Δ)


    • ࣾ಺ͷ։ൃ߹॓Ͱར༻͢Δ΋ͷͩͬͨͷͰ, CognitoͰϝʔϧΞυϨ
    εͷυϝΠϯͰ੍ݶΛ͔͚Α͏ͱͨ͠


    • Կނ͔͏·͘ߦ͔ͣ, ࢼߦࡨޡͷ຤ϩάΠϯ͕Ͱ͖ͳ͘ͳͬͨ...


    • ࠷ऴతʹ, 3೔ؒͰ4ճΠν͔ΒAmplifyͰ؀ڥΛ࡞Δ͜ͱʹͳͬͨ


    • ௨শňAmplify؀ڥߏஙRTAʼn

    View full-size slide

  10. AWS Amplify ײ૝
    • ϓϩτλΠϐϯάʹ͸ຊ౰ʹ࠷ద


    • "ຊ࣭"ʹूத͢Δ͜ͱ͕Ͱ͖ͨ


    • ࣮ࡍʹαʔϏεͱͯ͠ఏڙ͢Δࡍʹ࢖͏͔͸ཁݕূ


    • บ͕͋Δ఺͕ଟ͍


    • ň΋͠Ұൠʹఏڙ͢ΔͳΒGo(GraphQL) + Next.jsͰ࡞Γ௚͔͢
    ͳ...ʼnͱ͍͏ձ࿩Λͨ͠

    View full-size slide

  11. ·ͱΊ
    • ࠓߋAWS Amplify৮ͬͯΈ·͕ͨ͠, ૝૾ͷ100ഒศརͩͬͨ


    • Կ͔αΫοͱಈ͘WebαʔϏε࡞Γ͍ͨ࣌͸࢖͍͖͍ͬͯͨ

    View full-size slide