Active Storageを使ってS3にファイルをダイレクトアップロードする

はじめに

bagelee Advent Calendar 2019 のDay16です！

昨日は『React Hooksを使う【Reactで作るマラソンペースメーカー】』についての記事でした。

React Hooksを使う【Reactで作るマラソンペースメーカー】

今日はRails5.2から追加された Active Storage を使って、S3にファイルをダイレクトアップロードする方法を紹介します。

導入

ActiceStorageとは

Active Storageとは、Rails5.2で追加された機能で、ファイルアップロード機能を提供します。ローカル環境のアップロードだけでなく、クラウドストレージサービスへのアップロードも可能となっており、Carrierwaveなどのファイルアップロード機能を提供するgemの代わりとしてしようすることができます。しかし、Active Storageにはバリデーションの機能がないため、その辺りも触れながら本日はAWS S3へのアップロード方法を紹介していきます。

ActiceStorageの準備

今回はUserモデルを例に説明を進めていきます。scaffoldコマンドを使ってUserのCRUD機能を用意しました。
Active Storageに必要なマイグレーションファイルが1つ作成されます。

 bin/rails active_storage:install

マイグレーションを実行すると、active_storage_blobsとactive_storage_attachmentsの2つのテーブルが生成されます。
これでActive Storageを使うための準備は完了となります。

 bin/rails db:migrate

使い方

1つのファイルをアップロード

まずはじめに、1つのファイルをローカル環境でアップロードする方法をご紹介します。
以下をUserモデルに記述します。:imageの部分はアップロードファイルのカラム名として扱うことができるので自由に設定することができます。

class User < ApplicationRecord
   has_one_attached :image
 end

controller側では上記で設定したカラム名を、パラメータに追加します。

def user_params
   params.require(:user).permit(:name, :image)
 end

同様にview側でも上記のカラム名を使用してfile_fieldを記述すると、以下の画像のようにファイルをアップロードすることができるformが表示され、情報をpostすることでユーザの作成とファイルアップロードが完了します。(Name部分はscaffoldコマンドで作りました。)

 form.file_field :image

アップロードしたファイルは以下のようにimage_tagを使用して表示することができます。先程アップロードした私のアイコンが1つ表示されました。

image_tag(@user.image)

複数のファイルをアップロード

続いて複数のファイルをローカル環境でアップロードする方法をご紹介します。 先程同様Userモデルに関連付けの記述をしていきます。複数のファイルと紐付けを行うため、has_many_attachedの記述になっていることに注意が必要です。カラムの命名も:imagesとしました。

class User < ApplicationRecord
   has_many_attached :images
 end

controller側のパラメータにはimages: []と記述をして複数の値を配列で受け取ることができるように設定します。

def user_params
   params.require(:user).permit(:name, images: [])
 end

view側では先程同様カラム名を指定してfile_fieldを記述します。こちらも複数ファイルを受け取ることができるようmultiple: trueの記述が必要になります。ファイルを複数選択すると画像のように○ファイルと表示されるようになります。今回は私のアイコンの画像を2つアップロードしてみます。

 form.file_field :images, multiple: true

userに紐づくimagesの中身をimage_tagで表示します。アップロードに成功すると画像のようにアイコンが2つ表示されました。

@user.images.each do |image|
   image_tag(image) 
 end

バリデーションについて

記事の冒頭でも触れましたが、Active Recordにはバリデーションの機能がありません。ここでは自作バリデーションに活用できるアップロードファイルの情報の取得方法をご紹介します。

アップロードファイルが紐付けられているかを確認したい

userにアップロードファイルが紐付いているかを確認することができ、結果はbooleanで返ってきます。

@user.image.attached?

アップロードファイルの中身を確認したい

以下のコードでuserに紐付けされているファイルのサイズを確認することができます。

@user.image.byte_size

また、以下のような記述でファイル形式も確認することができます。

@user.image.content_type

ファイルのサイズと形式をviewに設置してみるとそれぞれ以下のように出力されます。

S3にアップロード

ここからはアップロード先をAWS S3へ変更する方法をご紹介していきます。まずはAWS上でS3バケットとアクセスユーザを用意します。S3バケットは以下のように、東京リージョン、バケット名はkobori-no-test-storageとして作成しました。

ユーザ名をkobori-no-test-userとしてユーザを作成し、credential.csvというアクセス情報が記載されたファイルをダウンロードしておきます。最後に作成したユーザにAmazonS3FullAccessのポリシーをアタッチします。これでAWSでの準備は完了です。

ローカル環境でRails側の設定ファイルを記述していきます。まず、aws-sdk-s3というgemをインストールして、Rails側でS3サービスへの接続ができる環境を作ります。

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

config/environments/development.rbでActive Storageの参照先を:localから:amazonへと変更します。

config.active_storage.service = :amazon

config/storage.ymlで下記コードの該当部分のコメントアウトを外して編集していきます。access_key_id:とsecret_access_key:にはAWSからダウンロードしてきたアクセス情報のファイルの情報を記載していきます。重要な情報なのでcredentialsや環境変数を使用して外部からは見えないように設定しましょう。最後にリージョンとバケット名を記述していきます。

amazon: service:  S3
 access_key_id: AWSアクセスID
 secret_access_key: AWSアクセスキー
 region: us-east-1(東京リージョンの場合)
 bucket: S3のバケット名

サーバを再起動しアップロードをしてみると、ファイルがS3にアップロードされたことが確認できました。

まとめ

本日はActive Storageを使ってS3にファイルをダイレクトアップロードする方法を紹介してきました。gemを使用する場合よりもシンプルに実装ができる一方で、バリデーションなどの機能が不足しているため、状況によって使い分けてみてはいかがでしょうか。最後まで読んでいただきありがとうございます。