Недавно у меня возникла необходимость изучить более эффективные способы загрузки изображений в наше веб-приложение. Приложение основано на Rails и размещено на Heroku. Heroku, как я уверен многим из вас, ограничивает свои размещаемые приложения файловой системой только для чтения. В действительности, файловая система только для чтения — это возможное ограничение, означающее, что Heroku позволит приложению выполнять запись в небольшое временное пространство в файловой системе. Однако это временное пространство используется часто и без ущерба, поэтому любые файлы в нем не живут очень долго.
Поскольку Heroku разрешает запись в это временное пространство, можно развернуть приложение, которое позволяет пользователям загружать изображения, которыми ваше приложение может манипулировать / изменять размер в соответствии со своими потребностями. Существует множество примеров того, как это сделать, например, CarrierWave , с которой мы и начали. К сожалению, этот подход не масштабируется с Rails. Загрузка файла с использованием Rails потребует веб-dyno. Если файл большой и его загрузка занимает более 30 секунд, ваше приложение начнет выдавать ошибки времени ожидания повсюду. В этой статье немного подробнее об этом.
Короче говоря, если у вас есть серьезное приложение Rails, размещенное на Heroku, которое требует загрузки файлов, вам нужно найти подход, который загружает файл непосредственно в S3 (или выделенный сервис изображений) и выполняет манипуляции с изображениями вне вашего приложения Rails. Ваша жизнь будет намного лучше для этого.
Параметры
В своем исследовании этой проблемы я наткнулся на CarrierWave-direct , который позволяет напрямую загружать на S3. Я пытался всерьез сделать так, чтобы он соответствовал нашему существующему потоку, и не смог. Кроме того, я полагаю, что Carrierwave вытянет файл из S3 на серверы Heroku, чтобы выполнить его обработку, чего я хотел избежать. Я здесь не для того, чтобы критиковать CarrierWave или CarrierWave-direct, но чтобы привлечь к ним внимание, прежде чем я расскажу, как Transloadit вписывается в картину.
Основы Transloadit
Как и любой другой разработчик на планете, Node привлек мое внимание. Я читаю об этом ежедневно, стараюсь не отставать от событий в этом сообществе. Здесь я впервые услышал о Transloadit . С тех пор я слышал множество восторженных отзывов об этом сервисе, поэтому решил попробовать. Основы Transloadit состоят из четырех элементов: сборки, роботы, шаги и шаблоны.
сборки
Сборка — это, в основном, отдельная работа на серверах Transloadit. В нашем примере сегодня сборка будет включать загрузку и изменение размера нашего изображения.
Роботы
У роботов Transloadit (и я ЛЮБЛЮ, как они их так называют) каждый из них обладает особыми навыками. Некоторые роботы изменяют размеры изображений, некоторые хранят файлы и т. Д. Вы вводите роботов в свои рабочие места по мере необходимости, используя шаги
Шаги (или шаги сборки)
Шаги являются частью сборки. Изменение размера изображения — это шаг (выполняется роботом), а запись файла в S3 — это еще один шаг
Шаблоны
Шаблоны объединяют все остальное. Ваша задача как разработчика состоит в том, чтобы создать шаблон, который включает в себя этапы сборки, выполняемые роботами, для удовлетворения потребностей вашего приложения. Шаблоны указаны в JSON, поэтому они должны быть в вашей рубке. Другими словами, создать шаблон очень просто.
Пример приложения: загрузка изображений
Хорошо, давайте свяжем все это с надуманным приложением. Это приложение просто позволит пользователю загрузить фотографию и создать уменьшенную и полноразмерную версию фотографии. Я не буду утомлять вас основными подробностями настройки приложения Rails, но источник здесь
Настройка Transloadit
Перво-наперво, зайдите зарегистрируйтесь на Transloadit. У них есть бесплатный план, который поможет вам пройти через эту демонстрацию (хотя, к сожалению, не намного дальше).
Transloadit должен знать, что делать с нашими изображениями, поэтому нам нужно перейти в наш раздел шаблонов и создать новый шаблон.
Я упомянул выше, что нам нужны миниатюра и полноразмерная версия изображений, поэтому нам нужно определить шаблон, который создает эти версии. Просматривая эту более чем адекватную документацию на сайте Transloadit, мы можем структурировать наш шаблон следующим образом:
| { | |
| «steps»: { | |
| «thumbnail»: { | |
| «robot»: «/image/resize», | |
| «use» : «:original», | |
| «width»: «50», | |
| «height» : «50» | |
| }, | |
| «fullsize»: { | |
| «robot»: «/image/resize», | |
| «use» : «:original», | |
| «width»: «320», | |
| «height» : «1000» | |
| }, | |
| «export»: { | |
| «use» : [«:original»,«fullsize», «thumbnail»], | |
| «robot»: «/s3/store», | |
| «key»: «MY-AWS-KEY», | |
| «secret»: «MY-AWS-SECRET», | |
| «bucket»: «MY-AWS-BUCKET», | |
| «path»: «${assembly.id}/${previous_step.name}_${file.url_name}» | |
| } | |
| } | |
| } |
by Кратко пройдя по этому шаблону, первый шаг создает наше миниатюрное изображение размером 50X50 пикселей. Он использует робот изображения / изменения размера на изображении «: оригинал». Важно указать "use" : ":original" По умолчанию Transloadit будет передавать выходные данные одного шага на следующий шаг, что в этом случае исказит наше полноразмерное изображение.
Второй шаг, как вы, наверное, догадались, создает наше полноразмерное изображение с разрешением 320х1000 пикселей. Последний шаг («экспорт») записывает наш файл в S3 с помощью робота / s3 / store . Этот шаг имеет несколько интересных значений.
Параметр use Кроме того, наша аутентификация AWS (если вам нужно настроить S3, эта страница поможет) информация находится на этом шаге. Наконец, шаг path Каждое задание будет приводить к папке с именем сборки, а файлы будут основаны на имени шага, который их создал.
Шаблон можно протестировать через веб-сайт Transloadit, что действительно здорово. Предполагая, что у вас есть настройка S3, загрузите файл и ознакомьтесь с двумя версиями, которые он создает.
Рабочий процесс для загрузки изображения
Диаграмма ниже показывает высокоуровневый процесс загрузки изображения с использованием Transloadit.
1) Пользователь отправляет форму, содержащую файл ввода.
2) Файл загружается в сервис transloadit, и роботы делают свое дело.
3) Как только файлы готовы, они перемещаются на S3.
4) Отправка формы перенаправляется в приложение rails вместе с некоторыми дополнительными параметрами из Transloadit.
5) Запрос возвращается пользователю.
Теперь это всего лишь ОДИН пример рабочего процесса с использованием Transloadit. Есть много вариантов, в том числе НЕ ожидая завершения загрузки / обработки файла и просто получая уведомление, когда все это будет сделано. При изучении сервиса, изучите все варианты и используйте лучший подход для вашей конкретной ситуации (дух).
Код
Для нашего приложения мы собираемся использовать подход минимальной интеграции вместе с плагином Transloadit jQuery. Используя этот подход, мы можем принять нашу ванильную веб-форму:
| <h3>Upload a New Picture</h3> | |
| <%= form_for @picture do |f| %> | |
| <div class=»form_field«> | |
| <%= f.label :description %> | |
| <%= f.text_field :description %> | |
| </div> | |
| <div class=»form_field«> | |
| <%= f.label :file, «Choose File…» %> | |
| <%= f.file_field :file %> | |
| </div> | |
| <% end %> |
и украсить его, используя плагин Transloadit jQuery, например так:
| <script type=»text/javascript» src=»//assets.transloadit.com/js/jquery.transloadit2.js«></script> | |
| <script type=»text/javascript«> | |
| // We call .transloadit() after the DOM is initialized: | |
| $(document).ready(function() { | |
| $(‘form’).transloadit({ | |
| wait: true | |
| }); | |
| }); | |
| </script> |
Параметр wait
Чтобы это работало, мы должны включить в форму некоторые параметры, которые определяют наш ключ API Transloadit, а также какой шаблон использовать. Скрытые параметры выглядят так:
| { | |
| «auth»: { | |
| «key»: «your-auth-key» | |
| }, | |
| «template_id»: «your-template-id», | |
| «redirect_url»: «http://example.org/upload» | |
| } |
Вот наша форма с этой информацией, закодированной и добавленной в форму.
| <%= form_for @picture do |f| %> | |
| <input type=»hidden» name=»params» value= «{"auth": {"key" :"MY-TRANSLOADIT-KEY2" }, "template_id": "MY-TRANSLOADIT-TEMPLATE", "redirect_url": "http://localhost:3000/pictures" }» /> | |
| <div class=»form_field«> | |
| <%= f.label :description %> | |
| <%= f.text_field :description %> | |
| </div> | |
| <div class=»form_field«> | |
| <%= f.label :file, «Choose File…» %> | |
| <%= f.file_field :file %> | |
| </div> | |
| <%= f.hidden_field :assembly_id %> | |
| <%= f.submit %> | |
| <% end %> |
Очевидно, вам нужно изменить информацию о ключе и идентификаторе шаблона. Также обратите внимание, что redirect_urlhttp://localhost:3000/pictures
Обработка перенаправления
После того, как все клиентские возможности были загружены на клиент, последняя задача — обработать перенаправление формы из Transloadit в нашем контроллере. Поскольку каждая загрузка будет иметь уникальный идентификатор сборки, это значение будет храниться на картинке и использоваться для создания URL-адреса для каждой фотографии.
Сам код контроллера очень прост:
| class PicturesController < ApplicationController | |
| before_filter :extract_tl_parameters, only: :create | |
| def index | |
| @picture = Picture.new | |
| @pictures = Picture.all | |
| end | |
| def show | |
| @picture = Picture.find(params[:id]) | |
| end | |
| def create | |
| @picture = Picture.create!(params[:picture]) | |
| redirect_to @picture | |
| end | |
| private | |
| def extract_tl_parameters | |
| tl_params= ActiveSupport::JSON.decode(params[«transloadit»] ) | |
| params[:picture][:assembly_id] = tl_params[«assembly_id»] | |
| params[:picture][:name] = generate_file_name(tl_params) | |
| end | |
| def generate_file_name(tl_params) | |
| «#{tl_params[«uploads»][0][«basename»]}.#{tl_params[«uploads»][0][ «ext» ].downcase}« | |
| end | |
| end |
Transloadit перенаправляет форму со всеми необходимыми параметрами ( assembly_id Перенаправление также включает параметры из нашей собственной формы, что позволяет нам получить доступ к данным, введенным пользователем. Довольно легко.
Попался
Оглядываясь назад на код контроллера, вы, возможно, заметили, что я downcase URL-адреса ресурсов на S3 чувствительны к регистру, и роботы Transloadit создают свои версии файлов со значениями расширения в нижнем регистре. В результате, если вы загрузите «IMAGE.JPG», миниатюра будет называться «thumbnail_IMAGE.jpg» и будет 404, если вы не используете «jpg» в своих URL-адресах.
Загрузить прочь
Я надеюсь, что вы нашли эту статью полезной. Transloadit — это очень мощный сервис, который предлагает множество вариантов загрузки ресурсов (они делают больше, чем просто фотографии) и позволяет вам не загружать процесс загрузки из вашего основного приложения. На хостах, таких как Heroku, это может сделать ваши процессы свободными для обработки других вещей, более важными для вашего бизнеса и сделать ваших пользователей очень счастливыми.
Другие источники
Существует официальный гем Rails для использования transloadit, который абстрагирует большую часть того, что вы видели в этой статье. Существует также Ruby gem и SDK для различных других платформ.