【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 つまり、自分自身の解釈だとclass直下に書く変数（今回はselectedNumber）は、viewDidLoad()や@IBAction func関数などで、呼び出される事がほとんどだと思う。 そんな変数を定義する時なおかつarc4randomを使うのであれば
続きを読む

【SwiftUI】alignment(左寄せ・右寄せ)が効かない

イメージ
この記事の概要 VStack内のTextの.multilineTextAlignmentプロパティが、全然効かなくて、色々と試行錯誤をしました。とりあえずはそれっぽい仕様が出来たのですが、あまり有効な手段ではないです。※この問題に対する解決法は現在調査中です。分かり次第追記します。 目次 この記事の概要 目次 やろうとしたこと コード全文 対処法 懸念点 まとめ 参考文献 やろうとしたこと この記事を執筆した2020年3月23日現在、週刊少年ジャンプ連載の古舘春一さん原作のアニメ「ハイキュー!!」シリーズの、4期にあたる「ハイキュー!! TO THE TOP」が放送されていたので、SwiftUIの練習がてら、このアニメを紹介する簡単なアプリケーションのUIを、実装しようとした。 [図1]現在のライブプレビュー画面 ©古舘春一／集英社・「ハイキュー!!」製作委員会・MBS さて見て分かる通り、すべての要素が中央揃えになっていることが分かるだろうか。自分はこのデザインはあまり意図しておらず、Text:作品概要の位置を左寄せに、Text:絶賛放送中の位置を右寄せにしようとした。 コード全文 import SwiftUI struct ContentView : View {     var body : some View {         VStack (alignment: . center , spacing: 10.0 ) {             Text ( "ハイキュー!! TO THE TOP" )                 . font (. title )                 . fontWeight (. black )                 . foregroundColor ( Color . orange )                          Text ( "絶賛放送中" )                 . font (. subheadline )                 . multilineTextAlig
続きを読む