【Rails6】herokuで投稿した画像が表示されない


この記事の概要

herokuの無料プラン（Free）プランを使ってると、更新ボタンを久方ぶりに押した時などにアップロードしたはずの画像が消えるよねーって話と、その解決策。

Railsで作成したアプリケーションにActive Storageと、Amazon S3を導入する方法で、どうやって実装していけばいいかを解説する。

目次

  • この記事の概要
  • 目次
  • 仕様
  • 画像が消える問題
  • 対処法
  • 参考文献

  • 解決策

仕様

・mac OS Catarina　バージョン10.15.1(2017モデル)
・Rails 6
・heroku

Rails 6で作成したWebアプリケーションをherokuのフリープランでアップロードしたという前提で話します。

herokuは有料プランではなく、無料プランのFreeで登録しているとします。

画像が消える問題

herokuへのwebアプリケーションのアップロードが済んだ日の翌日、localhost:3000にアクセすると、どうやら画像が表示されていない...。

試しに適当な画像を一枚選んで再アップロードしてみたら、きちんと表示される。

どうやら、画像が投稿されてしばらく経つと、画像が勝手に消去されるらしい。なぜだろう。

対処法

・画像が消える理由

herokuのリポジトリがdynoという単位で管理されており、Freeプランだと一定時間経過後にdynoが再起動される仕様になっているから。
→つまり、再起動されるたびに保存されているファイルは消去される。

・では、どうすればいい？

手順をざっくり解説すると、こうなる。

①AWSコンソール（こちら：https://aws.amazon.com/jp/console/）にアクセスし、「S3」を選択。

②「S3」で、新しいバケットを作成し、自分のトークンIDとアクセスキーを取得。

③aws-sdk-s3というgemをインストールし、vim上でcredientalファイルにIDとキーを記述する。

④$heroku buildpacks:add https://github.com/heroku/heroku-buildpack-activestorage-preview

⑤コミット＆デプロイ

という流れになる。

詳しい流れは、以下のQiitaの記事が非常に参考になりました。
https://qiita.com/DaichiSaito/items/80e89f0c96d88afcc5ff

Optional: herokuの有料プランをhobby以上にする（自分はhobbyにした）

※追記：freeでも、一応画像の保存はできるが、いちいちスリープするので、色々とめんどくさい。いっそのこと、契約しておいたほうが楽。
https://qiita.com/hmmrjn/items/479c9e9ce82771f1b6d7

参考文献

・【Rails】Herokuで画像を投稿できるようにする方法（ActiveStorage + Amazon S3）

・画像投稿機能のあるアプリでherokuを使っている場合、何故クラウドストレージでの管理が必要か

・Herokuでアップロードした画像が時間経つと消える問題



コメント

コメントを投稿

このブログの人気の投稿

【Unity】シーンギズモがデフォルトで表示されない時

イメージ
こんにちは。 先日から Unityを触り始めている私（てぃー）です。 さて、  Unityではデフォルトで表示されている「シーンギズモ」ですが、 新規プロジェクトを立ち上げたところ、表示されていなくて困りました。 ggっても解決策が出てこない...どころか、 シーンギズモっていう単語を使っているページ・解説しているページが出てこない！笑（unity 3dのofficial documentを除く） そう言う訳でちょっと困りましたので、解決策を簡単にまとめてみました〜。 ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. シーンギズモってそもそもなんやねん？って話 　2. 解決策 　3. まとめ 　1. シーンギズモってそもそもなんやねん？って話 [図]シーンギズモ シーンギズモはデフォルトのプロジェクトを立ち上げた時に、画面（画面というよりかはScene）の右上に出てくる図のような物体です。赤色・緑色・青色の三角コーンから成立しています。 シーンギズモはとても便利で、「y」とラベルが貼られた緑色のコーンをクリックすると、現在sceneで製作中のオブジェクトを上面から見ることが出来ます。 こう言う風に、[x],[y],[z]の、3つの軸からsceneを見ることができる優れものなんです。 　2. 発生している現象と解決策 [図]発生している現象 新規プロジェクトを作ろうとした時に、シーンギズモがデフォルトで表示されるようになるはずだ・・・と思いきや、表示されていなくて困りました。 前述したとおり、色々探したんですが解決策が見つからなくて困った・・・。 [図]解決策 で、どうやって解決したかというと。 [scene]バーにある[2D]ボタンを押すことです！ sceneの上部を見ると、デフォルトだと[Shaded]ってなってる場所と、電球やらなんやらのアイコンがある場所のちょうど間に、[2D]ボタンがありますよね！ これがオンになっていると、シーンギズモは出てこないみたいです。 　3. まとめ でも、なんで2Dモードがオンになってたんだろう・・・と考えていたのですが、 そういえば自分、こ...
続きを読む

【Swift4】argument passed to call that takes no arguments の解決策

イメージ
今日、Swiftでじゃんけんアプリを作っていた時に、この「 argument passed to call that takes no argument s 」というエラーが出たのでエラーが出た状況と解決策をまとめていこうと思う。 argument passed to call that takes no arguments ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. 実現しようとした事 　2. Argument Passed to call that takes no argumentsとはどんなエラー？　 　3. 解決策     4. まとめ 　1. 実現しようとした事 [図] myJankenViewControllerで発生したエラーの詳細  import UIKit   class myJankenViewController: UIViewController {       var selectedNumber: Int ( arc4random ( 2 ))                              !   Argument passed to call that takes no arguments     （以下省略）  } 「グー」「チョキ」「パー」の３種類の出目をCPUが出してくれる、そんなじゃんけんアプリを作っていたのだが、 相手のCPUの出目をarc4random関数で指定してあげようと思ったところ、このようなエラーが出てしまった。 　2.  Argument Passed to call that takes no arguments とはどんなエラー？　 日本語訳してみると、「 呼び出すために渡される引数は引数を取りません 」というのが妥当だろうか。 技術用語マシマシの英文翻訳は本当に難しい・・・orz つ...
続きを読む

【Rails5】SyntaxError: (): mapping values are not allowed エラーの解決法

この記事の概要 SyntaxError: (<unknown>): mapping values are not allowed 上記エラーに対応するために調べたところ、.ymlファイルのインデントが原因であることがわかった。 目次 この記事の概要 目次 試そうとしたこと エラーの分析 ja.ymlを見てみる 解決策 まとめ 試そうとしたこと Rails5で簡単なTaskアプリケーションを作って学んでいたのだが、 SyntaxError: (<unknown>): mapping values are not allowed  エラーにハマった。 エラーの分析 can not load translations from /Users/*****/Task_App/config/locales/ja.yml: # ): mapping values are not allowed in this context at line 15 column 7 どうやらja.ymlにエラーがあるらしい。 ymlファイルは、エラーメッセージが日本語を出すためのrawファイルであり、 GitHubのrails-|18nリポジトリにあるファイルを適当にダウンロードしたものである。 ja.ymlなので日本語設定である。 en.ymlだと英語設定になる。 ja.ymlファイルを見てみる （中略） 　 　models: 　　 task: タスク 　 　attributes: 　　 task:          id: ID 　　 name: 名称 　　 description: 詳しい説明 　　 created_at: 登録日時 　　 updated_at: 更新日時 んー？ 15行目あたりにエラーがあるらしいが、特に変わったところは見当たらない。 何がおかしいのだろうかと思って色々と検索してみた。 解決策 どうやら、ymlファイルにはスペースの数が決まっているようだ。 一番最初の階層のスペースゼロだとすると、 最初の階層はスペース無し。二番目の階層は半角スペース2つ 三番目の階層は半角スペー...
続きを読む