Q&A
ご回答ありがとうございます！やってみます。
ちなみに、S3をアメリカのリージョンで作成する場合はHerokuだとどこが一番近いのですか？
私は、「us-east-2」に作成しました。
Heroku上でのRailsアプリの速度の高速化について
Herokuでブログサイトのようなアプリを運営しているのですが、画像をAWSのS3に１回の投稿で2~3枚ほどアップロードします。
以前は、CarrierWave、fog、minimagickというgemを使っていたのですが、画像を３枚あげる場合はタイムダウンになってしまっていました。
そこで、CarrierWave、fog、minimagickというgemを使うのをやめて画像アップロードに関しては、以下の記事を参考にS3にダイレクトアップロードするように変更しました。（画像アップロードは3枚の場合でも10秒程になりました。）
参考記事：https://qiita.com/DaichiSaito/items/80e89f0c96d88afcc5ff
参考記事：https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails
画像を３枚あげる場合でもタイムダウンにはならなくなったのですが、画像アップロード完了後に投稿ボタンを押すと
画像は既にAWSのS3にアップロードされているにも関わらず、投稿完了までに３０秒程掛かってしまいます。
画像のファイルサイズはスマートフォンで撮影した画像なので、１枚あたり約１〜３MBあります。
全く同じ処理をローカルの開発環境で行うと、画像アップロードは同じで10秒程、投稿に関しては2秒程で完了します。
私は画像のアップロード処理が重かったためタイムダウンになり時間が掛かっていたと思っていたのですが、
画像は既にAWSのS3にアップロードされているにも関わらず、投稿完了までに３０秒程掛かってしまうのは、何故でしょうか？
また、どのようにすれば投稿処理を高速化できますか？
今現在はHerokuの無料版を利用しておりますが、有料版のプランに変更すれば、改善されるのでしょうか？
ちなみに、Herokuはサーバーがアメリカにあるため速度が遅いと言われていますが、投稿処理以外のページの表示速度は速いため、それが原因とは思いません。
是非、アドバイスなどよろしくお願い致します。
回答3件
0
環境作成がめんどくさいのでヤマカンですが
複数ファイルのアップロードへの対応に問題がありherokuへも画像を(無駄に)アップロードしている可能性があります。
ブラウザのデバッガ機能などでherokuへのリクエストを確認してみるとよいでしょう。
herokuにも画像ファイルを送信していた場合
js
1done: function(e, data) { 2 submitButton.prop('disabled', false); 3 fileInput.prop('disabled', true); // 追加
にて、どうにかなるかもしれないし、ならないかもしれません。
投稿2020/11/08 03:46
総合スコア15149
0
テスト用の環境を作ってみました。
ご紹介いただいた記事だと構築が煩雑なので、下記に基づいてActive Storageを利用してS3でのダイレクトアップロードをシンプルに作成しました。
https://bagelee.com/programming/ruby-on-rails/active-storage-direct-upload/
テストURL：https://s3-uploads-test.herokuapp.com/
Heroku free / S3東京リージョン / ActiveStorage
※プレビューなどは実装していません。またファイル選択ボタンを押した際に画像を複数選択してください。
全く同じ処理をローカルの開発環境で行うと、画像アップロードは同じで10秒程
体感的には、上記とおなじような感じになっているかと思います。
ということを踏まえると、切り分けとしては、下記の2つが有力かと思います。
①asmさんが指摘した件
②jQuery側の問題
②の場合、スマートではないやり方ですが・・・
まず下記のようにして、実際にデータが登録されたタイミングを画面を見て判断できるようにする。
diff
1// create hidden field 2- var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url }) 3+ var input = $("<input />", { type:'text', name: fileInput.attr('name'), value: url })
データがアップロードされたのを確認してから（つまりinputフィールドが表示されその中に値が入っているのを確認してから）、投稿ボタンを押しても30秒近くかかるか確認すれば、次のアプローチが考えられそうな気がします。
たぶんあまり関係ないとはおもいますが、Turbolinksとかの影響はあるかもしれないので、
今回は簡略化のために_form.html.erbに直接書いた。
ではなく、ロードイベントを利用してapplication.jsなどに記載しておいたほうが良いかと思います。
JavaScript
1document.addEventListener("turbolinks:load", function(){ 2 ... 3})
投稿2020/11/08 08:49
総合スコア3365
us-east-1か、us-east-2になると思います。
ありがとうございます！
0
ベストアンサー
たぶん本質的な回答としては下記のような気がしたので追記します。（2020/11/9）
①アップロードする画像をブラウザでリサイズし、プレビューできるようにする。
https://qiita.com/komakomako/items/8efd4184f6d7cf1363f2
※上記記事の途中までを実装する。
※検索キーワード「javascript ブラウザ アップロード 画像 縮小」
②ActiveStorageで画像①をダイレクトアップロードする。
リサイズしたファイル（①）をAWS東京リージョンにダイレクトアップロードする。
https://bagelee.com/programming/ruby-on-rails/active-storage-direct-upload/
※アップロードする回数より、ダウンロードされる回数＝閲覧回数のほうが多いので、ユーザービリティを考えるとダウンロード速度を優先したほうが好ましいはず・・・なので東京リージョンを選択。
※ダウンロード速度の問題はCDNを利用する（＝お金をかける）と解決する。その場合は、アップロード速度を優先したほうがよいので、S3はHerokuと同じus-east-1リージョンに設置するのが好ましい。
直接的な回答でなくて恐縮ですが・・・
今現在はHerokuの無料版を利用しておりますが、有料版のプランに変更すれば、改善されるのでしょうか？
一旦、HerokuをHobbyプランに変更することをお勧めします。
そこでテストを実行して、期待する動作をするかどうか確認すると良いかと思います。
理由としては、Herokuは秒単位での課金となるためです。
（Hobbyプランは$７/月なので１日実行しても30円もかからないはず。）
投稿2020/11/07 02:47
編集2020/11/09 00:41総合スコア3365
ご回答ありがとうございます！
そうですね、一回有料版に変更して改善されない場合はまた別の方法を考えます。
もしよろしければ、有料版に変えた場合にどの程度変わるのか追記いただけると嬉しいです。
知見がないので推測ですが、hobby = プロセスタイプが多くなるだけなので、速度には影響しない気がしています。
またこちらも知見がないので推測となりますが、データ量が多くて、ダイレクトアップロードの場合、日本リージョンにしたほうが早くなる気がします。
重いデータを日本からアメリカまで送るより、日本から日本へ送ったほうが効率が良さそうな気がするからです。
こちらも試すことがありましたら追記いただければ幸いです。
こちら、Herokuのhobbyプランに変更してもページの速度や投稿処理の速度は変化しませんでした。
画像のダイレクトアップロードはS3のバケットはアメリカのリージョンにしても日本のリージョンにしても速度は変化なかったです。しかし、投稿した後の画像の表示に関しては、日本のリージョンの方が2秒ほど早く感じました。
確認と追記いただきありがとうございます。
> アメリカのリージョンにしても日本のリージョンにしても速度は変化なかった（アップロード側）
というのは、少し違和感がありますね。
もしよければasmさんの件もためしてみてください。
こちら、上にコメントしたのですが、コードを修正後はダイレクトアップロードの場合は日本にS3のリージョンがある方が１−２秒程速くなりました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/09 00:23