ActiveStorage使ってみた

TECH::CAMPでプログラミングを勉強し始めて、１５週目。

いよいよ来週から最終課題か・・

 

今週いっぱいは、個人の勉強に当てるということで

個人アプリをherokuにデプロイしたところ、

なんと、herokuって一定期間しか画像が保存されないんですね・・（投稿画像のこと）

 

ということで外部ストレージを使用しようと、

応用課題で使用したS3を使用することにしたのですが

carrierwaveやらfogやらとの連携がうまくいかない。

 

どうしたもんかと考えていると、

rails5以降は、「Activestorage」という画像アップロード機能が備えられていると言う事！！

一回使ってみよう！

 

 

 

AcriveStorageのインストール

まずは、ある程度アプリができている前提で、ActiveStorageをインストールします。

$ rails active_storage:install
$ rails db:migrate
 

この2つのコマンドを打つ事で、

ActiveStorageによる画像保存用テーブルと、画像と他のモデルを紐づける中間テーブルが出来上がります。

 

他のモデルと紐付け

今回は、投稿（post)モデルと紐付けます。

model/post.rbに

has_one_attached :image

と記載します。

今回は１枚の画像だけですが、

もしいくつも添付する場合は

has_many_attached :image

と言うふうに書きます。

 

ビューの編集

<%= form_for(@post) do |form| %>
<%= form.text_field :tweet, placeholder: "text" %>
<%= form.file_field :image, placeholder: "image" %>
<%= form.submit '投稿する' %>
<% end %>

フォームは通常通り書きます。

 

<% @posts.each do |post|%>
<div class="tweet-wrapper">
<% if post.tweet && post.image.attached? %>
<%= post.tweet %>
<%= image_tag post.image, class:"image"%>
<% elsif post.tweet %>
<%= post.tweet %>
<% elsif post.image.attached? %>
<%= image_tag post.image, class:"image"%>
<% end %>
</div>
<% end %>

投稿一覧ページです。

ポイントは、

<% if post.tweet && post.image.attached? %>

です。「.attached?」と言うふうに記載します。

 

保存先フォルダの変更

producition.rb

config.active_storage.service = :amazon

:trueとなっているのを:amazonに変更しました。

もし開発環境でもS3に保存するなら、

developmentの方も上記と同様に設定してもいいかと思います。

 

storage.yml

test:
service: Disk
root: <%= Rails.root.join("tmp/storage") %>

local:
service: Disk
root: <%= Rails.root.join("storage") %>

# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
service: S3
access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
region: ap-northeast-1
bucket: バケット名を書く

test:　とlocal:　はそのままでOK

amazon:　以下をコメントアウトし、

regionとバケット名を記入します。

 

AWS　S3に必要なgemをダウンロードします。

gem 'aws-sdk-s3', require: false

 

 

下記コマンドで、エディタを開きます。

EDITOR=vim rails credentials:edit
iと打ち込むと入力開始。
aws:
 access_key_id: 123 #自分のアクセスキーIDに書き換える
 secret_access_key: 456 #自分のシークレットアクセスキーに書き換える

esc →　:wqで終了。
herokuの方にも上記idと、rails masterkey,バケット名、regionを渡せば
S3に保存できました。