LoginSignup
3
1

More than 3 years have passed since last update.

herokuエラー H12:Request timeout

Last updated at Posted at 2021-04-15

開発途中でHerokuでデプロイしたwebアプリを確認中に出てきたエラーに関してです。

画像つきで投稿機能があるアプリで、画像一覧が表記されずにこのエラーが発生しました。WiFiの調子が悪かったりなどもあり、はっきりとした原因はわかりませんでしたが、解決しました。

結果

AWSのS3を利用して画像を管理することで解決しました。

画像1つは1MB程度ですが、一覧で十数枚が一度に出てくる画面だったので、WiFiの環境も影響してリクエストタイムアウトが出たものと思います。
S3の設定方法に関しては公式ページ(下記参照)をご確認ください。※後日まとめてアップ予定です

何が起きたのか

デプロイ済の対象ページへ遷移しようとした際になかなか繋がらず、

Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command

と表記が出てきました。
確かに長いこと読み込んでいたので、おかしいとは思いましたが、、

ここで指示にある[check your logs for details]通りに、herokuのエラーログを確認しました。

エラーログの確認はアプリのターミナルで

heroku logs --tail 

を実行し確認したところ、長いエラー文の中より

heroku[router]: at=error code=H12 desc="Request timeout" 

という文を見つけました。

パっと見た感じでも、どうやら時間がオーバーの様子。
Herokuのエラーコード(下記参照)にて確認してみると
30秒を超えると強制終了されるそう。

Heroku によって処理される Web リクエストは、いくつかの Heroku ルーター を経由して dyno に転送されます。これらのリクエストは、アプリケーションですぐに処理されることになっています。ベストプラクティスは、Web アプリケーションの応答時間を 500 ミリ秒未満にすることで、これによりアプリケーションが解放されてさらに多くのリクエストを受けられるようになり、訪問者に対して高品質のユーザーエクスペリエンスを提供できます。たまに Web リクエストが異常停止したり、アプリケーションによる処理に非常に時間がかかったりすることがあります。このような場合、完了までにかかる時間が 30 秒を超えると、ルーターはリクエストを強制終了します。

また、サイズの大きいファイルはアップロードが原因である可能性が書かれていましたので、下記の通りS3を利用しました。

多くの Web アプリケーションではユーザーがファイルをアップロードできます。これらのファイルのサイズが大きかったり、ユーザーのインターネット接続が遅い場合、アップロードにかかる時間が 30 秒を超えることがあります。リクエストをブロックする一部の種類の Web アプリケーションでは、これにより H12 リクエストタイムアウトが発生することがあります。これについては、 S3 に直接アップロードする ことをお勧めします。

サイズの大きいファイルとは4MBを超える可能性のあるアップロードだそうです。今回はそこまで大きくないはずですが、トータルの大きさでしょうか(知識不足すみません。。)

直接アップロードでは、ファイルは最初にアプリを経由せずに、ユーザーのブラウザーからS3バケットにアップロードされます。この方法は、サイズが4MBを超える可能性のあるユーザーのアップロードに推奨されます。

上記により問題なく表示はされるようになりました。
が、時々遅いことがあるので少し不安はありますが。。
何かわかれば追記させていただきます。

参照リンク

AWS公式リンク
https://aws.amazon.com/jp/

エラーコード一覧
https://devcenter.heroku.com/ja/articles/error-codes

リクエストタイムアウト詳細
https://devcenter.heroku.com/ja/articles/request-timeout

AWSS3を使用して静的アセットとファイルアップロードを保存する
https://devcenter.heroku.com/articles/s3#direct-upload

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1