ShrineでS3に画像をアップロードする

1 はじめに
- 1.1 前提条件
- 1.2 関連記事
2 AWS側の準備
3 Rails側の設定
- 3.1 Initializerの設定
4 さいごに

はじめに

RailsアプリケーションからS3に画像をアップロードするケースはよくあるのではないかと思います。
今回はShrineというGemを使ってS3に画像をアップロードする方法を紹介します。

前提条件

ruby 2.4.1
rails 5.1.0
shrine 2.6.1

Gemの使い方等は下記の記事を御覧ください。
Shrineでアップロードする際に画像を加工する
 Shrineを使って画像をアップロードする

AWS側の準備

AWS側で必要な設定は下記のとおりです。

S3バケットを作成する
CORSを設定する
アクセス用のユーザを作成する

S3バケットを作成する

S3バケットはマネジメントコンソールの「S3」から作成できます。

「バケットを作成する」をクリックして下記の画像のようにバケット名を指定して「次へ」をクリックします。

プロパティの設定は特に変更せず「次へ」をクリックします。

アクセス許可の設定も特に変更せず「次へ」をクリックします。

設定内容を確認して「バケットの作成」をクリックします。

CORSを設定する

CORSはCross-Origin Resource Sharingの略で「特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義します」

先程作成したバッケット名をクリックし、「アクセス制限」→「CORSの設定」をクリックします。

「CORS構成エディター」に下記の通り入力して「保存」をクリックします。

 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://your.domain.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>

<?xml version="1.0" encoding="UTF-8"?>

<AllowedOrigin>https://your.domain.com</AllowedOrigin>

<AllowedMethod>DELETE</AllowedMethod>

<AllowedHeader>Authorization</AllowedHeader>

</CORSRule>

<AllowedHeader>Authorization</AllowedHeader>

</CORSRule>

</CORSConfiguration>

アクセス用のユーザを作成する

「IAM」からS3にアクセスするためのユーザを作成します。
「IAM」の画面の左のメニューから「ユーザ」をクリックします。

「ユーザを追加」をクリックします。

ユーザ名を入力し、アクセスの種類のプログラムによるアクセスにチェックを入れて「次のステップ」をクリックします。

「既存のポリシーを直接アタッチ」をクリックしてAmazonS3FullAccessにチェックを入れて「次のステップ」をクリックします。

内容を確認して「ユーザの作成」をクリックします。

ユーザが作成できたら「アクセスキーID」と「シークレットアクセスキー」をメモします（CSVをダウンロードすることもできます）

Rails側の設定

Rails側はInitializerを設定するだけでローカルのサーバへのアップロードと同様に行えます。

Initializerの設定

shrine.rbを下記のように設定します。

 require 'shrine' require 'shrine/storage/file_system' require 'shrine/storage/s3' # アップロードするディレクトリの指定 if Rails.env.production? s3_options = { access_key_id: 'your_access_key_id', secret_access_key: 'your_secret_access_key', region: 'ap-northeast-1', bucket: 'abc.example.com', } Shrine.storages = { cache: Shrine::Storage::S3.new(prefix: 'cache', **s3_options), store: Shrine::Storage::S3.new(prefix: 'store', **s3_options), } else Shrine.storages = { cache: Shrine::Storage::FileSystem.new('public', prefix: 'images/uploads/cache'), store: Shrine::Storage::FileSystem.new('public', prefix: 'images/uploads/store'), } end # 使用するプラグインの宣言 Shrine.plugin :activerecord Shrine.plugin :cached_attachment_data # for forms

require 'shrine'

require 'shrine/storage/file_system'

require 'shrine/storage/s3'

# アップロードするディレクトリの指定

if Rails.env.production?

s3_options = {

access_key_id: 'your_access_key_id',

secret_access_key: 'your_secret_access_key',

region: 'ap-northeast-1',

bucket: 'abc.example.com',

}

Shrine.storages = {

cache: Shrine::Storage::S3.new(prefix: 'cache', **s3_options),

store: Shrine::Storage::S3.new(prefix: 'store', **s3_options),

}

else

Shrine.storages = {

cache: Shrine::Storage::FileSystem.new('public', prefix: 'images/uploads/cache'),

store: Shrine::Storage::FileSystem.new('public', prefix: 'images/uploads/store'),

}

end

# 使用するプラグインの宣言

Shrine.plugin :activerecord

Shrine.plugin :cached_attachment_data # for forms

さいごに

Shrineを使ってS3に画像をアップロードする方法をAWS側の設定も含めて紹介しました。

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31