Rails 6.0でアプリを開発 基本の流れ⑥ Active storage
Active Storageの導入について結構詰まったのでメモ。
実現したいこと
Active Storageを使用して、プロフィール画像や投稿画像を簡単にアップしたい。以前まで使用していたGravatarやuploaderを使用せず、直接AWSのS3にアップしたい。
Active Storage+S3
今回はすでにAWSのアカウントがあるのでAWSを使用することにする。
S3にバケットを作成しリージョンは東京でパブリックアクセス許可も設定
Active Storageとは
クラウドストレージサービスへのファイルアップロードを簡単にしてくれる機能。ファイルをアクティブレコードオブジェクトにアタッチし、ImageMagickで画像を変換。PDF、ビデオなどの非画像表現の生成やファイルからメタデータの抽出もできる。
Active Storageの導入
$ rails active_storage:install
$ rails db:migrate
active_storage_attachmentsとactive_storage_blobsというテーブルができているのでdb:migrateも行う。
S3のストレージを使用する記述を追加
amazonのコーナーのコメントを取る形
access_key_idとsecret_access_keyは別途環境変数で設定
access_key_idとsecret_access_keyをvimで入力
②ここで詰まったがシェルをpowershellではなく、GitBashに変更
変更手順は
Rails 6.0 VSCodeでGit Bashを使う - 自分の手で未来を創るーlav0
$ EDITOR=vim rails credentials:editでvimに入り
iで編集モードへ
:wqで保存して終了
開発環境とプロダクション環境のactive_storage.serviceを変更
プロダクション環境はherokuを使用しているのでherokuの設定
$ heroku config:set access_key_id="access_key_idカラムの値"
$ heroku config:set secret_access_key="secret_access_keyカラムの値"
(必要なさそう)
Gemfileに下記のGemを追加しbundle install
画像属性の名前とユーザー1人に対し1つの画像を付ける設定(モデル)
1対多の場合:has_many_attached :avatars
フォームに画像投稿を設定
コントローラーのストロングパラメターに加える
ImageMagickをインストール
インストールはこちらから
ImageMagick-7.0.9-26-Q16-x64-dll.exe
PATHの設定
システムのプロパティから環境変数に入り設定したのは右の二つ
Gemfileでimage_processingを追加
既にコメントに入っているのでコメントを戻す
show.html.erbで画像データを使用
個人用に用意したページに、画像を載せれるようにする。
サイズとクラスのオプションも渡す。
軽くスタイルを整える
といっても、ひとまず丸くしただけ
localでアクセスしアカウントを作成すると
もっと整えなければだけど、できた(^^)/
最後にHerokuにプッシュする前に
$ heroku buildpacks:add -i 1 https://github.com/heroku/heroku-buildpack-activestorage-preview
$ git add -A
$ git commit-m "Added ActiveStorage"
$ git push
$ git push heroku master
※credentials.yml.enc を使っている場合は、以下のコマンドで master.key を heroku の環境変数としてセット(master.keyにある)↓↓↓
$ heroku config:set RAILS_MASTER_KEY=railsのマスターキーを貼り付け
$ heroku run rails db:migrate
で、同様にアカウントを作ったところできました
参考にさせていただいたサイト
Rails 6 ActiveStorageを使用してS3に画像ファイルをアップロードし、取得した画像をリサイズして表示する方法 - Qiita
【Rails】Active Storageについて徹底解説! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
【Rails】Herokuで画像を投稿できるようにする方法(ActiveStorage + Amazon S3) - Qiita
【Windows】Ruby on Rails + Carrierwave + RMagickで画像のリサイズ - tomokiの備忘録
↑ ※環境変数の設定※ ↓
Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー
↓ ※こちらは途中食らってしまったエラーについて
Ruby - rails sができない(開発環境から本番環境)|teratail
HerokuにRailsアプリをデプロイする - Qiita