Rails5 APIではじめるSPA開発

Transcript

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

2. ࣗݾ঺հ —໊લ : ാத༔࡞ —Twitter : @hatappi —ձࣾ : גࣜձࣾSpeee

   —໾৬ : ίʔώʔ܎
3. None

4. SPAͱ͸ʁ

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

6. Πϯϑϥߏ੒

7. None

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

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

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

11. None

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

13. Rails5Ͱͷมߋ఺ —Action Cable —rakeλεΫΛrailsͰ࣮ߦ —turbolinks5 —sprockets3 —rails api <- ࠓ೔͸͜͜

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

15. γϯϓϧ!

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

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

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

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

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

21. CORSͱ͸?

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

    ࢓૊Έ

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

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

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

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

27. None

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

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

30. ·ͱΊ

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