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 e...
Search
Rafael Macedo
August 07, 2014
Programming
1
160
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
220
GuruSP - Solucionando o problema de Uploads em Apps no Heroku
macedorafael
2
100
Aplicações Realtime com XMPP
macedorafael
3
210
Web in the cloud with ruby
macedorafael
2
380
Other Decks in Programming
See All in Programming
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
decksh - a little language for decks
ajstarks
4
21k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
190
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.1k
CSC305 Summer Lecture 06
javiergs
PRO
0
100
Langfuseと歩む生成AI活用推進
licux
3
300
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
790
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Bash Introduction
62gerente
614
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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 ?