Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TDC 2014 - Solucionando o problema de Uploads em Apps no Heroku
Search
Rafael Macedo
August 07, 2014
Programming
1
150
TDC 2014 - Solucionando o problema de Uploads em Apps no Heroku
Rafael Macedo
August 07, 2014
Tweet
Share
More Decks by Rafael Macedo
See All by Rafael Macedo
Modularização de código JS
macedorafael
0
200
GuruSP - Solucionando o problema de Uploads em Apps no Heroku
macedorafael
2
88
Aplicações Realtime com XMPP
macedorafael
3
190
Web in the cloud with ruby
macedorafael
2
370
Other Decks in Programming
See All in Programming
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Polars入門
daikikatsuragawa
1
180
Elm 0.19.0 Changes
bkuhlmann
0
510
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
雑に思考を整理する技術と効能
konifar
63
30k
Let's learn code review
riofujimon
2
580
Going beyond Apache Parquet's default settings
xhochy
0
130
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
"config" ってなんだ? / What is "config"?
okashoi
0
330
try! Swift Tokyo 初参加報告LT
hinakko2
0
240
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The Invisible Customer
myddelton
114
12k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Designing with Data
zakiwarfel
96
4.8k
Teambox: Starting and Learning
jrom
128
8.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
How to Ace a Technical Interview
jacobian
273
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Thoughts on Productivity
jonyablonski
60
3.9k
Transcript
Solucionando o problema de Uploads em Apps no Heroku
@macedorafael http://github.com/macedo Rafael Macedo
@macedorafael http://github.com/macedo Macedo
None
None
“O que pode dar errado num mero upload de uma
foto?”
None
None
heroku create
heroku create git push heroku
None
None
30 segundos
! ! ! ! “comum” Web Browser
! ! ! ! “comum” Web Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
None
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
None
Processamento background
Processamento background Direct Upload to S3
heroku addons
None
None
None
http://cloudinary.com/
upload
•JPG, PNG, GIF, BMP, ICO, TIFF and PDF •API simples
de upload •Upload pelo servidor ou diretamento pelo browser
storage
•Storage redundante e com alta disponibilidade •Backups automáticos
delivery
•CDN •Caching
Manipulação e Processamento
resize filter crop rotate face detection effects
resize filter crop rotate face detection effects …
Gerenciamento
None
None
None
“A little less conversation a little more ACTION
/tmp/carlos-mexicano.jpg
gem 'cloudinary'
# config/cloudinary.yml development: cloud_name: 'dwqsgdejq' api_key: '91230987435979324' api_secret: '**********************'
Cloudinary::Uploader.upload( '/tmp/carlos-mexicano.jpg' )
{ "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' )
\o/
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
None
w_160,h_160,c_thumb, g_face
w_160,h_160,c_thumb, g_face Processa mento
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload
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
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
http://cloudinary.com/documentation/ image_transformations
None
None
gem 'attachinary'
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
$ rake attachinary:install:migrations $ rake db:migrate
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# app/models/user.rb class User < ActiveRecord::Base ... has_attachment :avatar,
accept: [:gif, :jpg, :png] has_attachments :photos, maximum: 10 end
<%= 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
/* app/assets/javascript/application.js */ //= require jquery //= require cloudinary //=
require attachinary //= require_self $(function() { $('.attachinary-input').attachinary(); });
<%= cloudinary_js_config %> # app/views/layouts/application.html.erb
None
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= 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) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %>
<%= 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) %>
<%= 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) %>
None
None
None
$$$
None
10 GB Storage
10 GB Storage 40 GB Bandwidth
Cloudinary
$35
S3
$7
None
???
None
None
$7
$42
Conclusão
“O que pode dar errado num mero upload de uma
foto?”
Muita coisa!
None
Processamento background
Processamento background Direct Upload
http://fileupload-tdc2014- example.herokuapp.com/
https://github.com/macedo/ cloudinary_image_uploader_example
http://www.akitaonrails.com/2014/03/26/ heroku-tips-s3-direct-upload-carrierwave- sidekiq
None
OBRIGADO
OBRIGADO ?