いつもお世話になっております。
開発環境上で約1秒(1.22s)だった処理が、本番環境だと約1分(1.1 ~ 1.9m)かかってしまい
自分では原因を特定出来なかったのでご相談をさせて頂きました。
###前提
- 目的: サーバのローカルファイルの音声ファイルをWebで再生するアプリ作成したい。
- サーバサイド: Express.js
- フロントエンド: React.js
- 開発県境: Windows 10
- 本番環境: AWS EC2 t2.micro
###問題の処理
モバイル端末ではAudio要素のautoloadが効かない仕様っぽいので
ユーザがボタンを押下した瞬間に音声が再生されるようにobjectURLを生成し
Audioのsrc属性に付与する形を取っています。
- サーバサイドでローカルファイルのバッファをフロントに返す
js
1/** 2 * リクエストされた音声ファイル名のバッファを返却. 3 * 4 * @param {String} req.query 5 * 取得対象音声ファイル名. 6 * @return {Buffer} 7 * バッファ. 8 */ 9router.post('/api/v1/audio-buffer', (req, res) => { 10 const audioFile = req.query; 11 // require('fs') 12 fs.readFile(`/audio_content/${audioFile}`, (err, audioBuffer) => { 13 res.send(audioBuffer); 14 }); 15});
- フロントで受け取ったバッファをURLに変換
js
1/** 2 * パラメータ名をクエリに設定し、リクエストを発行<br> 3 * 受け取ったレスポンスのバッファをURLに変換し返却. 4 * 5 * @param {String} nameParam 6 * 音声ファイル名. 7 * @return {Promise<Any>} 8 * 音声ファイル名, 音声リソースのURL. 9 */ 10export function toURL(nameParam) { 11 return new Promise((resolve, reject) => { 12 // import request from 'superagent'; 13 request.post('/api/v1/audio-buffer') 14 .query(nameParam) 15 .end((err, res) => { 16 const url = URL.createObjectURL( 17 new Blob([new Uint8Array(res.body)], 18 { type: 'audio/mp3' })); 19 20 resolve({ 21 name: name, 22 url: url 23 }); 24 }); 25 }); 26} 27
###備考
サーバ側でレスポンスの計測を行ってみましたが、ディスクIOが遅いわけではなさそうでした。
またリクエストが発行されてから600msほどでレスポンスを返却しています。
どうかご教授お願い致します。
あなたの回答
tips
プレビュー