自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Rails 6.0でアプリを開発 基本の流れ⑥ Active storage

Active Storageの導入について結構詰まったのでメモ。

f:id:kslabo51:20200227223340j:plain

実現したいこと

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は別途環境変数で設定

f:id:kslabo51:20200227220501p:plain

 

access_key_idとsecret_access_keyをvimで入力

vimを使用するために拡張機能vimを導入

f:id:kslabo51:20200227220905p:plain

 

②ここで詰まったがシェルをpowershellではなく、GitBashに変更

変更手順は

Rails 6.0 VSCodeでGit Bashを使う - 自分の手で未来を創るーlav0

 

vimのエディターで環境変数を設定

$ EDITOR=vim rails credentials:editでvimに入り

iで編集モードへ

:wqで保存して終了

 

開発環境とプロダクション環境のactive_storage.serviceを変更

f:id:kslabo51:20200227221635p:plain

f:id:kslabo51:20200227221726p:plain

 

プロダクション環境はherokuを使用しているのでherokuの設定

$ heroku config:set access_key_id="access_key_idカラムの値"
$ heroku config:set secret_access_key="secret_access_keyカラムの値"

 (必要なさそう)

Gemfileに下記のGemを追加しbundle install

f:id:kslabo51:20200227222147p:plain

 

画像属性の名前とユーザー1人に対し1つの画像を付ける設定(モデル)

f:id:kslabo51:20200227222423p:plain

1対多の場合:has_many_attached :avatars

 

フォームに画像投稿を設定

f:id:kslabo51:20200227222714p:plain

 

コントローラーのストロングパラメターに加える

f:id:kslabo51:20200227222854p:plain

 

ImageMagickをインストール

インストールはこちらから

 

f:id:kslabo51:20200228192014p:plain

ImageMagick-7.0.9-26-Q16-x64-dll.exe

 

PATHの設定

f:id:kslabo51:20200228192915p:plain

システムのプロパティから環境変数に入り設定したのは右の二つ

 

Gemfileでimage_processingを追加

既にコメントに入っているのでコメントを戻す

f:id:kslabo51:20200228193149p:plain

 

show.html.erbで画像データを使用

 個人用に用意したページに、画像を載せれるようにする。

サイズとクラスのオプションも渡す。

f:id:kslabo51:20200228191545p:plain

 

軽くスタイルを整える

といっても、ひとまず丸くしただけ

f:id:kslabo51:20200228193311p:plain

 

localでアクセスしアカウントを作成すると

f:id:kslabo51:20200228193637p:plain

もっと整えなければだけど、できた(^^)/

 

最後に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

 

で、同様にアカウントを作ったところできました

f:id:kslabo51:20200228201115p:plain



参考にさせていただいたサイト

Rails 6 ActiveStorageを使用してS3に画像ファイルをアップロードし、取得した画像をリサイズして表示する方法 - Qiita

【Rails】Active Storageについて徹底解説! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

【Rails】Herokuで画像を投稿できるようにする方法(ActiveStorage + Amazon S3) - Qiita

【Windows】Ruby on Rails + Carrierwave + RMagickで画像のリサイズ - tomokiの備忘録

↑ ※環境変数の設定※ ↓

DOSプロンプト

Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー

Vim / Vi を終了させる方法 - Qiita

↓ ※こちらは途中食らってしまったエラーについて

Ruby - rails sができない(開発環境から本番環境)|teratail

HerokuにRailsアプリをデプロイする - Qiita

よく使うHerokuコマンド - Qiita