質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

3回答

3153閲覧

Laravel5.8 画像アップロードの処理速度について

paranoaman1217

総合スコア24

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2020/02/10 01:20

編集2020/02/10 03:26

いつもお世話になっております。
最近まで開発していた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で無料利用枠を利用しての検証になります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/02/10 01:59

>リサイズした画像を3枚生成し合計4枚の画像をアップロード のくだりがよくわかりません。 リサイズはサーバー側の処理にまかせれば1画像だけで済みます? その方がデータ通信量は減るはずですが
m.ts10806

2020/02/10 02:19

使用メモリなど追ってみました?
tanat

2020/02/10 02:23

> ローカルで作業している時は全く気にならなかったんですが、検証用サーバーでスマホで確認しているとアップロードの処理が非常に重いです。 検証用サーバーでPCで確認しても重いですか?
paranoaman1217

2020/02/10 03:28

ご回答いただきありがとうございます。 上記返答いただきました内容を追記いたしました。 何卒よろしくお願いいたいします。
paranoaman1217

2020/02/10 03:31

>リサイズした画像を3枚生成し合計4枚の画像をアップロード こちら私の認識違いです、申し訳ありません。 config/medialibrary.phpの設定ファイルにGDライブラリを設定していますのでリサイズ自体はサーバー側で処理しております。
退会済みユーザー

退会済みユーザー

2020/02/10 05:35

ap-east-01使った場合は?
guest

回答3

0

前置き
実際のアップロード速度を高めるのではなく、体感速度を上げる方法です


投稿画面で一斉にPOSTするのではなく
ファイルが選択された時点で、API経由でファイルのアップロードを即座に開始することにより
トータルの体感速度を低下することができると思います。(POSTするのはファイルのID)

また、アップロードの進捗状況を見せることでも体感速度を低下させる事ができると思います。

そんなライブラリがこちら!
flow.jsです。

https://github.com/flowjs/flow.js
大きなファイルもChunked uploadできるFlow.jsを実装してみた(サーバ側はPHP)

投稿2020/02/10 04:29

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

paranoaman1217

2020/02/10 05:20

ご回答いただきありがとうございます! Dropzoneの機能でQueueの機能のon offがあり、postで処理させるのではなく画像アップロード時にapi経由でアップロードする仕様にしております。ただローカル時は複数の画像アップロードの処理が高速だったためサーバーにデプロイして検証すると予想外に重く、、アップロードの処理自体のスピードを上げる方法はないか調べていた、という感じです。 進捗状況をバーなどで表記する方法体感的にも必要と感じました! 導入を検討します、ありがとうございます!
mikkame

2020/02/10 05:24

あとは jsでリサイズしてからアップロードする手もあります
mikkame

2020/02/10 05:36

そうです、そのあたりです
guest

0

Laravelでは時間のかかる処理はキューを使う。

t2.microでLaravelは厳しい。詳しい人がLaravel用に最適化すれば大丈夫だけど色々足りない。
はっきり書けばLaravel用のサーバーを正しく構築できてる人は日本にはいない。
なんとなく動かせてるだけでそこからチューニングまでできてる人は見たことない。
誰もできてないので検索しても情報はない。

細かい所だとAmazon LinuxよりUbuntuのほうがいいかも。Laravel公式はすべてUbuntu推奨。
OSなんかで変わりそうにないけど実際Ubuntuに変えたら安定度が段違いだった。

投稿2020/02/10 04:10

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikkame

2020/02/10 04:21

キューに入れるためにはアップロードを待つ必要があるので意味がありません。 アップロードされた画像を複雑な処理で加工する、とかならキューに入れる必要はあるでしょうが・・・
paranoaman1217

2020/02/10 05:29

>Laravel公式はすべてUbuntu推奨 そうなのですね、、今回初めてAWSでサーバー構築をするのでお手軽というところからAmazonLinux使っていました。Ubuntuを構築したことがないんですが、コケたらやばい案件なので安定度が増すならUbuntu構築考えたいです。自分なりに調べてみます、ありがとうございました!
guest

0

ベストアンサー

PCとスマホで両方確認してみました。
体感としてスマホの方が5〜10秒ほどかかる印象でした。
(PC/スマホで同様のサイズの画像を3枚選択しアップロードしてみました)

というのが、同じ写真での結果であれば、スマホ側の回線速度等の問題に思えます。
(3MB*3枚のアップロードサイズは結構大きいので、4G回線だと時間次第では結構時間がかかってもおかしくありません。その場合、プログラム的に直接何か出来ることはありません)

PCとスマホで全く同じ画像ファイル(似たサイズでは無く、全く同じファイル)を同じ回線(同じwifi)からアップロードしてみて、結果を追記して下さい。

また、その際にApacheのアクセスログに処理時間を表示するように設定して、
参考

PC/スマホのアクセスで体感で時間が変わったときに、実際にサーバ側の処理時間が変わっているのかを確認してみてください。


あとは、t2.microだとCPUもネットワークもバースト出来ない状態になるととても遅くなるので、
一時的に強いインスタンスにしてみて(無料では無いですが)改善するかを確認してみるのも良いと思います。
インスタンスを強くしたら改善する→サーバサイドで何か出来る(可能性がある)
インスタンスを強くしても改善しない→サーバサイドでのチューニングは出来ないと思われる

投稿2020/02/10 03:45

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

paranoaman1217

2020/02/10 07:28

ご回答いただきありがとうございます! 検証してみましたがPC・スマホでの速度にほとんど違いがありませんでした! >一時的に強いインスタンスにしてみて(無料では無いですが)改善するかを確認してみるのも良いと思います。 こちらは近々ステージングを作るスケジュールでして、m5largeで環境を構築する予定です。 その際に改善できる、できている部分はあるのか確認してみようと思います。 メルカリなどのサービスでアップロードを試してみましたがやはりそれなりにアップロードの重さは感じ、ある程度は仕方の無いことなのかなとも感じております。 メルカリは画像の容量が無制限だったのでサーバーのスペックすごく高いのかもしれませんね。 大変参考になりました、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問