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

Rails5 APIではじめるSPA開発

hatappi
July 14, 2016

Rails5 APIではじめるSPA開発

hatappi

July 14, 2016
Tweet

More Decks by hatappi

Other Decks in Technology

Transcript

  1. Rails5Ͱߦ͏SPA։ൃ
    Roppongi.rb #1

    View Slide

  2. ࣗݾ঺հ
    —໊લ : ാத༔࡞
    —Twitter : @hatappi
    —ձࣾ : גࣜձࣾSpeee
    —໾৬ : ίʔώʔ܎

    View Slide

  3. View Slide

  4. SPAͱ͸ʁ

    View Slide

  5. SinglePageApplicaton
    ӳޠͦͷ··Ͱ୯ҰϖʔδͰߏ੒͞ΕͨΞϓϦέʔγϣ
    ϯ
    ࠷ॳϖʔδશମΛಡΈࠐΜͩޙ͸javascriptͰඞཁͳ෦
    ෼Λߋ৽͍ͯ͘͠
    σʔλ࿈ܞ͸Ajax΍WebSocketʹͯߦ͏

    View Slide

  6. Πϯϑϥߏ੒

    View Slide

  7. View Slide

  8. GCP (GoogleCloudPlatform)
    —CDNΛ࢖͏ࡍʹ͸AWSͩͱ
    S3+CloudFront
    GCPͰ͸StorageʹΞοϓϩʔ
    υͯ͠ACLͷઃఆΛมߋ͢Ε͹
    ެ։Ͱ͖Δ
    —੩తwebαΠτΛϗεςΟϯά
    Ͱ͖ΔͷͰαʔόʔϨεӡ༻͕
    Մೳ!

    View Slide

  9. Angular2
    Googleͷ։ൃ͢ΔJavascriptͷϑ
    ϨʔϜϫʔΫ
    ݱঢ়͸rc4
    React͕ViewͷίϯϙʔωϯτΛ
    ఏڙ͢Δͷʹରͯ͠MVCΛఏڙ͢
    ΔϑϧελοΫͳϑϨʔϜϫʔΫ

    View Slide

  10. Rails5ͷ࿩
    ࠓ೔ͷϝΠϯ
    RubyͷwebΞϓϦέʔγϣϯɾϑ
    ϨʔϜϫʔΫ
    7/1ʹrc͕ͱΕ͍ͯͭʹ5͕ϦϦʔ
    ε!

    View Slide

  11. View Slide

  12. Rails5Ͱͷมߋ఺
    —Action Cable
    —rakeλεΫΛrailsͰ࣮ߦ
    —turbolinks5
    —sprockets3
    —rails api

    View Slide

  13. Rails5Ͱͷมߋ఺
    —Action Cable
    —rakeλεΫΛrailsͰ࣮ߦ
    —turbolinks5
    —sprockets3
    —rails api

    View Slide

  14. Rails API
    ݩʑ͸gemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ
    —helper΍assets, views͕ͬͦ͝Γফ͑ͯΔ
    —cookieͱ͔session storeͷఆٛ΋ͳ͍
    —config͔Βassetؔ࿈ͷ΋ͷ͕ͳ͘ͳ͍ͬͯΔ

    View Slide

  15. γϯϓϧ!

    View Slide

  16. Rails apiͷͱ͖ʹ͋ͨͬͨ՝୊
    —view͕΄͘͠ͳͬͨΒ
    —CORS
    —Ϣʔβʔೝূ

    View Slide

  17. Rails apiͷͱ͖ʹ͋ͨͬͨ՝୊
    —view͕΄͘͠ͳͬͨΒ
    —CORS
    —Ϣʔβʔೝূ

    View Slide

  18. ΍ͬͺΓView͕΄͍͠ɾɾ

    View Slide

  19. View͸ޙ͔ΒͰ΋௥ՃͰ͖Δ
    ඞཁͳmiddlewareΛ௥Ճͯ͋͛͠Ε͹ݩͷඇAPIͷ
    Railsʹ͢Δ͜ͱ͸ग़དྷΔɻ
    ٯʹAPIʹ͢Δͷ͸͋Δ΋ͷΛ࡟আ͍͔ͯ͠ͳ͍ͱ͍͚
    ͳ͍ͷͰ݁ߏେม!

    View Slide

  20. Rails apiͷͱ͖ʹ͋ͨͬͨ՝୊
    —view͕΄͘͠ͳͬͨΒ
    —CORS
    —Ϣʔβʔೝূ

    View Slide

  21. CORSͱ͸?

    View Slide

  22. CORS (Cross-Origin Resource
    Sharing)
    SameOriginPolicyʹΑΓXHRͱ͔
    Ͱࠓ͍ΔαΠτͱผͷαΠτ͔Β
    σʔλΛಡΈࠐΉͱΤϥʔʹͳ
    Δɻ
    ͦΕΛڐՄ͞ΕͨαΠτʹରͯ͠
    ͸OriginΛ͑ͯ͜ΞΫηε͑͞Δ
    ࢓૊Έ

    View Slide

  23. rack-cors (https://github.com/cyu/rack-cors)
    originsͰڐՄ͢ΔϗετΛઃఆ
    '*'΋͍͚Δ͚Ͳຊ൪ʹ൓ө͢Δͱ͖͸஫ҙ
    Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
    origins 'roppongirb.com'
    resource '*',
    headers: :any,
    methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
    end

    View Slide

  24. Rails apiͷͱ͖ʹ͋ͨͬͨ՝୊
    —view͕΄͘͠ͳͬͨΒ
    —CORS
    —Ϣʔβʔೝূ

    View Slide

  25. RailsApiͰ͸cookie΍
    session͕ͦͬ͝ͱͳ͘ͳͬ
    ͯΔ!

    View Slide

  26. cookieͰ͸ͳ͘tokenͰ؅
    ཧͩ❗❗

    View Slide

  27. View Slide

  28. ೝূॲཧࣗମ͸
    GoogleOAuth2
    Ͱߦ͍ͦͷޙτ
    ʔΫϯΛੜ੒

    View Slide

  29. googleΛ࢖Θͣશ෦ࣗલͰߦ͏ͧͬͯํ
    —devise_token_auth
    deviseΛ࢖ͬͯRailsͰTokenBasedͷೝূΛߦ͏΋
    ͷ
    —doorkeeper
    RailsͰOAuth2ͷϓϩύΠμʔΛ࢖͏ͨΊͷ΋ͷ

    View Slide

  30. ·ͱΊ

    View Slide

  31. ·ͱΊ
    —SPAා͘ͳ͍
    —API modeʹͯ͠΋࠷ѱ໭ͤΔͷͰνϟϯϨϯδͯ͠
    Έͯ΋ྑ͍͔΋
    —turbolinksɺsprockets, coffeescriptͱ͍͏ݴ༿ʹർ
    Εͯ͠·ͬͨΒݕ౼ͯ͠΋ྑ͍͔΋

    View Slide