Q&A
＞リサイズした画像を3枚生成し合計4枚の画像をアップロード
のくだりがよくわかりません。
リサイズはサーバー側の処理にまかせれば１画像だけで済みます？
その方がデータ通信量は減るはずですが
いつもお世話になっております。
最近まで開発していたLaravelプロジェクトを検証サーバーにデプロイし動作検証をしています。
会員制のサービスで、新規登録をした後エンドユーザーさんは自分の商品画像を10枚までアップロードでき、
必要情報を記入した上で登録をする、メルカリとほぼ似たような仕組みのサービスになります。
画像アップロード部分は「Dropzone.js」というライブラリを使用しておりまして、
アップロードの処理自体は「laravel-medialibrary」というライブラリを使用しています。
https://docs.spatie.be/laravel-medialibrary/v7/introduction/
アップロードする際はフルサイズの画像の他に、リサイズした画像を3枚生成し合計4枚の画像をアップロードしております。
ローカルで作業している時は全く気にならなかったんですが、検証用サーバーでスマホで確認しているとアップロードの処理が非常に重いです。
通信速度なども含まれるのである程度重くなるのは仕方ないとは思うんですが、php側の処理や、サーバーのスペック？、設定？などこちら側でできる速度の向上方法があればご教示いただけないでしょうか。
検索で調べてもブラウザ表示のスピード向上などの記事ばかり出てきてしまいます。。
それと、画像のアップロードサイズの上限についてなのですが、基本的にはスマホで利用していただくWebサービスを想定しているため、
何枚か自分の所持しているスマホで撮影した画像サイズを確認すると3MBいかないくらい、
なので3MBを上限にしようと考えているのですが推奨サイズなどありましたらご教示いただけますと幸いです。
環境は以下になります。
サーバー: Amazon Linux
インスタンスタイプ: t2.micro
php: 7.3
S3: 画像はS3に保存します
mysql(RDS): 8.0
apache: 2.4
Laravel: 5.8
config/medialibrary.phpの設定
'image_driver' => 'gd'
参考仕様メモリ
total: 1007332
used: 549156
free: 108384
shared: 384
buff/cache: 349792
available: 276768
PCとスマホで両方確認してみました。
体感としてスマホの方が5〜10秒ほどかかる印象でした。
（PC/スマホで同様のサイズの画像を3枚選択しアップロードしてみました）
※検証サーバーのためAWSで無料利用枠を利用しての検証になります。
使用メモリなど追ってみました？
> ローカルで作業している時は全く気にならなかったんですが、検証用サーバーでスマホで確認しているとアップロードの処理が非常に重いです。
検証用サーバーでPCで確認しても重いですか？
ご回答いただきありがとうございます。
上記返答いただきました内容を追記いたしました。
何卒よろしくお願いいたいします。
＞リサイズした画像を3枚生成し合計4枚の画像をアップロード
こちら私の認識違いです、申し訳ありません。
config/medialibrary.phpの設定ファイルにGDライブラリを設定していますのでリサイズ自体はサーバー側で処理しております。
ap-east-01使った場合は？
回答3件
0
前置き
実際のアップロード速度を高めるのではなく、体感速度を上げる方法です
投稿画面で一斉にPOSTするのではなく
ファイルが選択された時点で、API経由でファイルのアップロードを即座に開始することにより
トータルの体感速度を低下することができると思います。（POSTするのはファイルのID)
また、アップロードの進捗状況を見せることでも体感速度を低下させる事ができると思います。
そんなライブラリがこちら！
flow.jsです。
https://github.com/flowjs/flow.js
大きなファイルもChunked uploadできるFlow.jsを実装してみた（サーバ側はPHP）
投稿2020/02/10 04:29
総合スコア5036
ご回答いただきありがとうございます！
Dropzoneの機能でQueueの機能のon offがあり、postで処理させるのではなく画像アップロード時にapi経由でアップロードする仕様にしております。ただローカル時は複数の画像アップロードの処理が高速だったためサーバーにデプロイして検証すると予想外に重く、、アップロードの処理自体のスピードを上げる方法はないか調べていた、という感じです。
進捗状況をバーなどで表記する方法体感的にも必要と感じました！
導入を検討します、ありがとうございます！
あとは
jsでリサイズしてからアップロードする手もあります
jsでリサイズできるんですね。
https://blog.capilano-fw.com/?p=3578
この辺りでしょうか？
色々とありがとうございます！
そうです、そのあたりです
0
Laravelでは時間のかかる処理はキューを使う。
t2.microでLaravelは厳しい。詳しい人がLaravel用に最適化すれば大丈夫だけど色々足りない。
はっきり書けばLaravel用のサーバーを正しく構築できてる人は日本にはいない。
なんとなく動かせてるだけでそこからチューニングまでできてる人は見たことない。
誰もできてないので検索しても情報はない。
細かい所だとAmazon LinuxよりUbuntuのほうがいいかも。Laravel公式はすべてUbuntu推奨。
OSなんかで変わりそうにないけど実際Ubuntuに変えたら安定度が段違いだった。
投稿2020/02/10 04:10
退会済みユーザー
総合スコア0
キューに入れるためにはアップロードを待つ必要があるので意味がありません。
アップロードされた画像を複雑な処理で加工する、とかならキューに入れる必要はあるでしょうが・・・
>Laravel公式はすべてUbuntu推奨
そうなのですね、、今回初めてAWSでサーバー構築をするのでお手軽というところからAmazonLinux使っていました。Ubuntuを構築したことがないんですが、コケたらやばい案件なので安定度が増すならUbuntu構築考えたいです。自分なりに調べてみます、ありがとうございました！
0
ベストアンサー
PCとスマホで両方確認してみました。
体感としてスマホの方が5〜10秒ほどかかる印象でした。
（PC/スマホで同様のサイズの画像を3枚選択しアップロードしてみました）
というのが、同じ写真での結果であれば、スマホ側の回線速度等の問題に思えます。
(3MB*3枚のアップロードサイズは結構大きいので、4G回線だと時間次第では結構時間がかかってもおかしくありません。その場合、プログラム的に直接何か出来ることはありません)
PCとスマホで全く同じ画像ファイル（似たサイズでは無く、全く同じファイル）を同じ回線(同じwifi)からアップロードしてみて、結果を追記して下さい。
また、その際にApacheのアクセスログに処理時間を表示するように設定して、
参考
PC/スマホのアクセスで体感で時間が変わったときに、実際にサーバ側の処理時間が変わっているのかを確認してみてください。
あとは、t2.microだとCPUもネットワークもバースト出来ない状態になるととても遅くなるので、
一時的に強いインスタンスにしてみて（無料では無いですが）改善するかを確認してみるのも良いと思います。
インスタンスを強くしたら改善する→サーバサイドで何か出来る（可能性がある）
インスタンスを強くしても改善しない→サーバサイドでのチューニングは出来ないと思われる
投稿2020/02/10 03:45
総合スコア18727
ご回答いただきありがとうございます！
検証してみましたがPC・スマホでの速度にほとんど違いがありませんでした！
>一時的に強いインスタンスにしてみて（無料では無いですが）改善するかを確認してみるのも良いと思います。
こちらは近々ステージングを作るスケジュールでして、m5largeで環境を構築する予定です。
その際に改善できる、できている部分はあるのか確認してみようと思います。
メルカリなどのサービスでアップロードを試してみましたがやはりそれなりにアップロードの重さは感じ、ある程度は仕方の無いことなのかなとも感じております。
メルカリは画像の容量が無制限だったのでサーバーのスペックすごく高いのかもしれませんね。
大変参考になりました、ありがとうございました！
あなたの回答
tips
プレビュー
