【heroku】 一定時間経つとアップロードした画像にアクセスできなくなる

Question

起こっていること

ブラウザ上で画像をアップロードし、その画像を用いたアニメーションをトップページに作成するといったアプリケーションを作りました。しかし、herokuを用いた本番環境にて、アップロード後一定時間経つと画像が読み込まれなくなるエラーが発生しています。

Failed to load resource: the server responded with a status of 404 (Not Found)
165application-b72bde2b16c336771057782ab34247264d53bd3b8d95d1f3f811bfa7acba71a2.js:5 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
    at Object.n.bodies (https://chirimo-tsumoreba-nantoyara.herokuapp.com/assets/application-b72bde2b16c336771057782ab34247264d53bd3b8d95d1f3f811bfa7acba71a2.js:5:4223)
    at Object.n.world (https://chirimo-tsumoreba-nantoyara.herokuapp.com/assets/application-b72bde2b16c336771057782ab34247264d53bd3b8d95d1f3f811bfa7acba71a2.js:5:1132)
    at o (https://chirimo-tsumoreba-nantoyara.herokuapp.com/assets/application-b72bde2b16c336771057782ab34247264d53bd3b8d95d1f3f811bfa7acba71a2.js:4:31286)

アップロード直後、一時的にはどの端末からも問題なく動作が確認できます。またローカル環境ではこのようなエラーは起きませんでした。

画像のアップロードにはrefileを用い、また呼び出す際は以下のように記述しています。

    <% if @images.present? %>
      <% @images.each do |image| %>
      //matter.jsを用いた物理シミュレーションのための準備
          var x = width / 2 + Math.random() * 10;
          var y = -Math.random()*100;
          var scale = 1//Math.random() + 1
          
          bodies.push(
            Bodies.trapezoid(x, y, 70*scale, 70*scale, 0, 
              {
                density: 1, //密度
                frictionAir: 0.005, //空気抵抗
                restitution: 0.2, //反発係数
                friction: 0.8, //摩擦
                render: {
                  sprite: {
                    texture: '<%= Refile.attachment_url(image, :image) %>',
                    xScale: 0.13*scale,
                    yScale: 0.13*scale,
                  }
                }
              })
            )
            
      <% end %>
    <% end %>

試したこと

原因の特定までに試したことはいくつかありますが、原因を突きとめたところで手詰まりになったので質問させて頂きました。

使用しているgemのバージョンは以下です。
rails 5.1.6
postgresql 0.20.0
また確認の際,OSはWindows10,ブラウザはChromeを用いています。
herokuは無料ライセンスのもので、30分ごとにスリープに入る仕様です。(このことが原因なんでしょうか、、？)

Comments

[hatsu]

画像の保存はどのように行っていますか？ActiveStorageやCarrierWaveといった手段がありますが、いずれもHeroku上ではなくS3などに保存しないと消えてしまう現象があるので、保存の方法を知りたいと思っています

[knmr]

返信ありがとうございます。S3に保存、という対応を初めて知り、refileとherokuに関連した記事を調べたところ、以下のページに同様の症状についての記載と、対応策が掲載されていました。
https://qiita.com/syo19961113/items/57e0fa6947863fb03e5f
このページ通りに保存先をS3に変更したところ、当該トラブルが解消しました！
ありがとうございます！

Answer 1

「Heroku上ではなくS3などに保存しないと画像が消えてしまう現象がある」との指摘を受け、これに関連したことを調べたところ、以下のページに同様の症状についての記載と、対応策が掲載されていました。
https://qiita.com/syo19961113/items/57e0fa6947863fb03e5f

heroku上にアップロードされた画像は、一定期間しか保存してくれないとのこと
このページ通りに保存先をS3に変更したところ、当該トラブルが解消しました！

なお、このページ内の記載どおり進めていくうえでいくつか修正が必要な箇所があったので追記しておきます。

  access_key_id: "AWS_ACCESS_KEY_ID",
  secret_access_key: "AWS_SECRET_ACCESS_KEY",

上記の記述のままだと、AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEYともに文字列として認識され、変数として展開されないようだったので、下記に変更して解決しました。

  access_key_id: ENV['AWS_ACCESS_KEY_ID'],
  secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],

また、regionについては下記サイトの「リージョンエンドポイント」の項目が参考になりました。
https://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html