TDC 2014 - 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
6. “O que pode dar errado num mero upload de uma foto?”
9. heroku create
10. heroku create git push heroku
13. 30 segundos
14. ! ! ! ! “comum” Web Browser
15. ! ! ! ! “comum” Web Browser
16. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
17. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
18. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
19. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
20. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
21. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
22. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
23. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
25. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser
26. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
27. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
28. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
29. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
30. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
31. ! ! ! ! Heroku Rails AWS S3 Image Magick Browser ! ! ! ! Resque/Sidekiq Worker
33. Processamento background
34. Processamento background Direct Upload to S3
35. heroku addons
39. http://cloudinary.com/
40. upload
41. •JPG, PNG, GIF, BMP, ICO, TIFF and PDF •API simples de upload •Upload pelo servidor ou diretamento pelo browser
42. storage
43. •Storage redundante e com alta disponibilidade •Backups automáticos
44. delivery
45. •CDN •Caching
46. Manipulação e Processamento
47. resize filter crop rotate face detection effects
48. resize filter crop rotate face detection effects …
49. Gerenciamento
53. “A little less conversation a little more ACTION
54. /tmp/carlos-mexicano.jpg
55. gem 'cloudinary'
56. # config/cloudinary.yml
 
 development:
 cloud_name: 'dwqsgdejq'
 api_key: '91230987435979324'
 api_secret: '**********************'
57. Cloudinary::Uploader.upload(
 '/tmp/carlos-mexicano.jpg'
 )
58. {
 "public_id"=>"babtchij80xduih97me0",
 "version"=>1407375612,
 "signature"=>"00b0721d1af7fd0c69eb3bc112e89022406bd027",
 "width"=>3096,
 "height"=>4128,
 "format"=>"jpg",
 "resource_type"=>"image",
 "created_at"=>"2014-08-07T01:40:12Z",
 "bytes"=>4280618,
 "type"=>"upload",
 "etag"=>"97358d56df90e5ea49e64d76c1108533",
 "url"=>"http://res.cloudinary.com/dwqsgdejq/image/ upload/v1407375612/babtchij80xduih97me0.jpg",
 "secure_url"=>"https://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/babtchij80xduih97me0.jpg"
 } Cloudinary::Uploader.upload(
 '/tmp/carlos-mexicano.jpg'
 )
59. \o/
60. http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
61. http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
62. http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
63. http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
65. w_160,h_160,c_thumb, g_face
66. w_160,h_160,c_thumb, g_face Processa mento
67. w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia
68. w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload
69. w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
70. w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
71. http://cloudinary.com/documentation/ image_transformations
74. gem 'attachinary'
75. # config/application.rb
 require File.expand_path('../boot', __FILE__)
 
 require ‘rails/all' #active_record or mongoid
 require ‘attachinary/orm/active_record' …
76. # config/application.rb
 require File.expand_path('../boot', __FILE__)
 
 require ‘rails/all' #active_record or mongoid
 require ‘attachinary/orm/active_record' …
77. $ rake attachinary:install:migrations
 $ rake db:migrate
78. # config/routes.rb
 Rails.application.routes.draw do
 devise_for :users
 resources :users, only: [:update]
 root to: 'album#show'
 mount Attachinary::Engine => '/attachinary'
 end

79. # config/routes.rb
 Rails.application.routes.draw do
 devise_for :users
 resources :users, only: [:update]
 root to: 'album#show'
 mount Attachinary::Engine => '/attachinary'
 end

80. # app/models/user.rb
 class User < ActiveRecord::Base
 ...
 
 has_attachment :avatar, accept: [:gif, :jpg, :png]
 has_attachments :photos, maximum: 10
 end
81. <%= simple_form_for @user do |f| %>
 <%= f.attachinary_file_field :avatar %>
 <%= f.attachinary_file_field :photos %>
 
 <%= f.submit %>
 <% end %> # app/views/users/_form.html.erb
82. /* app/assets/javascript/application.js */
 //= require jquery
 //= require cloudinary
 //= require attachinary
 //= require_self
 
 $(function() {
 $('.attachinary-input').attachinary();
 });
83. <%= cloudinary_js_config %> # app/views/layouts/application.html.erb
85. <%= cl_image_tag(@photo.path, width: 160, height: 160) %>
86. <%= cl_image_tag(@photo.path, width: 160, height: 160) %>
87. <%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :fit) %>
88. <%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :fit) %>
89. <%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :thumb, gravity: :face) %>
90. <%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160,
 crop: :thumb, gravity: :face) %>
94. $$$
96. 10 GB Storage
97. 10 GB Storage 40 GB Bandwidth
98. Cloudinary
99. $35
100. S3
101. $7
103. ???
106. $7
107. $42
108. Conclusão
109. “O que pode dar errado num mero upload de uma foto?”
110. Muita coisa!
112. Processamento background
113. Processamento background Direct Upload
114. http://fileupload-tdc2014- example.herokuapp.com/
115. https://github.com/macedo/ cloudinary_image_uploader_example
116. http://www.akitaonrails.com/2014/03/26/ heroku-tips-s3-direct-upload-carrierwave- sidekiq
118. OBRIGADO
119. OBRIGADO ?