Rails5 APIではじめるSPA開発

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