GuruSP - Solucionando o problema de Uploads em Apps no Heroku

Transcript

1. Solucionando o problema de Uploads em Apps no Heroku
2. @macedorafael http://github.com/macedo Rafael Macedo
3. @macedorafael http://github.com/macedo Macedo
4. backend…
5. …com chapéu de front
9. “O que pode dar errado num mero upload de uma foto?”
11. 30 segundos
12. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
13. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
14. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
15. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
16. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
17. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser
19. …
20. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
21. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
22. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
23. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
24. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
25. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
26. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
27. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
28. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
29. ! ! ! ! Unicorn Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
30. heroku addons
32. Blitline
33. Blitline Transloadit
34. Blitline Transloadit Cloudinary
35. Blitline Transloadit Cloudinary ✔
36. http://cloudinary.com
39. upload
41. •JPG, PNG, GIF, BMP, ICO, TIFF and PDF
42. •JPG, PNG, GIF, BMP, ICO, TIFF and PDF •Secure HTTP upload API
43. •JPG, PNG, GIF, BMP, ICO, TIFF and PDF •Secure HTTP upload API •Upload from your server or 
 directly from the browser
44. storage
46. •Cloud-based persistent storage
47. •Cloud-based persistent storage •Highly available redundant storage
48. •Cloud-based persistent storage •Highly available redundant storage •S3
49. delivery
51. •Fast delivery (CDN)
52. •Fast delivery (CDN) •Smart caching
53. image transformation/ manipulation
55. resize
56. resize filter
57. resize filter crop
58. resize filter crop rotate
59. resize filter crop rotate face detection
60. resize filter crop rotate face detection chained transformation …
61. {"public_id"=>"fe23qemppmcorq0grmfv",    "version"=>1403326723,    "signature"=>"4e1a7bb2e3f3eb05eed25eed10cb09807561a764",    "width"=>533,    "height"=>300,    "format"=>"jpg",    "resource_type"=>"image",    "created_at"=>"2014-­‐06-­‐21T04:58:43Z",    "bytes"=>13895,    "type"=>"upload",    "etag"=>"30b1c1b426db36b8e8c12d15d629fdb5",    "url"=>"http://res.cloudinary.com/hxjx3jqm7/image/upload/v1403326723/ fe23qemppmcorq0grmfv.jpg",    "secure_url"=>"https://res.cloudinary.com/hxjx3jqm7/image/upload/v1403326723/ fe23qemppmcorq0grmfv.jpg"}
62. {"public_id"=>"fe23qemppmcorq0grmfv",    "version"=>1403326723,    "signature"=>"4e1a7bb2e3f3eb05eed25eed10cb09807561a764",    "width"=>533,    "height"=>300,    "format"=>"jpg",    "resource_type"=>"image",    "created_at"=>"2014-­‐06-­‐21T04:58:43Z",    "bytes"=>13895,    "type"=>"upload",    "etag"=>"30b1c1b426db36b8e8c12d15d629fdb5",    "url"=>"http://res.cloudinary.com/hxjx3jqm7/image/upload/v1403326723/ fe23qemppmcorq0grmfv.jpg",    "secure_url"=>"https://res.cloudinary.com/hxjx3jqm7/image/upload/v1403326723/ fe23qemppmcorq0grmfv.jpg"}
63. http://res.cloudinary.com/hxjx3jqm7/image/ upload/v1403326723/ fe23qemppmcorq0grmfv.jpg
64. http://res.cloudinary.com/hxjx3jqm7/image/ upload/v1403326723/ fe23qemppmcorq0grmfv.jpg
65. http://res.cloudinary.com/hxjx3jqm7/image/ upload/v1403326723/ fe23qemppmcorq0grmfv.jpg http://res.cloudinary.com/hxjx3jqm7/image/ upload/w_160,h_160,c_thumb,g_face/ fe23qemppmcorq0grmfv.jpg
66. http://res.cloudinary.com/hxjx3jqm7/image/ upload/v1403326723/ fe23qemppmcorq0grmfv.jpg http://res.cloudinary.com/hxjx3jqm7/image/ upload/w_160,h_160,c_thumb,g_face/ fe23qemppmcorq0grmfv.jpg
68. gem  'cloudinary'
69.  #  config/cloudinary.yml
 
    development:          cloud_name:  “sample”          api_key:  “912739217312873”          api_secret:  “a123=asdaszad34dsf”  
70. cl_image_tag(“e23qemppmcorq0grmfv.jpg”,                              width:  160,                                height:  160,                                crop:  fill,             effect:  ”sepia”   )
71. cl_image_tag(“e23qemppmcorq0grmfv.jpg”,                                                                                               effect:   )
72. cl_image_tag(“e23qemppmcorq0grmfv.jpg”,                              width:  100,                                height:  150,                                effect:  :pixelate)
73. cl_image_tag(“e23qemppmcorq0grmfv.jpg”,                                                                                    
74. cl_image_tag(“e23qemppmcorq0grmfv.jpg”,                                                                                    
75. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
76. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
77. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
78. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
79. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
80. class  ImageUploader  <  CarrierWave::Uploader::Base      include  Cloudinary::CarrierWave            version  :standard  do          process  :resize_to_fill  =>  [100,  150,  :fill]       cloudinary_transformation  quality:  80      end            version  :thumbnail  do          process  :eager  =>  true          cloudinary_transformation  transformation:  [                {  width:  100,  height:  100,                  crop:  :thumb,  gravity:  :face  },          {  overlay:  ”watermark”,  width:  30,                  hgravity:  :south_east,  x:  5,  y:  5  }       ]      end             end
81. class  Advertisement  <  ActiveRecord::Base      ...      mount_uploader  :image,  ImageUploader      ...   end
82. =  form_for(:advertisement)  do  |f|      =  f.hidden_field(:image_cache)      =  f.file_field(:image)
84.  #  app/assets/javascripts/application.js
 
  //=  require  cloudinary  
85. =  form_for(:advertisement)  do  |f|      ...          =  cloudinary_js_config        =  f.cl_image_upload(:image)      ..
86. =  form_for(:advertisement)  do  |f|      ...          =  cloudinary_js_config        =  f.cl_image_upload(:image)      ..
87. =  form_for(:advertisement)  do  |f|      ...          =  cloudinary_js_config        =  f.cl_image_upload(:image)      ..
89. $$$
91. 10 GB Storage
92. 10 GB Storage 40 GB Bandwidth
93. Cloudinary
94. $35
95. S3
96. $7
99. $7
100. $42
101. Conclusão
102. “O que pode dar errado num mero upload de uma foto?”
103. Muita coisa!
105. Processamento background
106. Processamento background Direct Upload
108. OBRIGADO
109. OBRIGADO ?