大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【Gem】fog-aws

はじめに

こんにちは!大ちゃんの駆け出し技術ブログです。

ついにPFを昨日アップロードしたのですが、案の定複数の不具合が起きてしまいました。その一つにcarriwaveの画像が読み込まれないというものがありました。これはよくよく調べるとherokuではcarriwaveをそのまま使用できないという記事が複数あったので、自分の調査不足が原因でもあります。

解決策としてはfog-awsを使用して画像をAWS上にアップロードすることだそうですので、こちらで備忘録として残しておきます。まだAWSの登録をしていない方は登録を済ませてください。

AWSでS3の設定

まずはAWSの設定から。AWSはほとんど触ったことがないので疑問点が多いですが、一つ一つ調べていきます。

まずそもそもS3というのはなんなのかと思って調べてみました。S3は「データを保存したり取得できるオブジェクトストレージ」というのが公式の記述で書かれています。データをAWS上に保存するという比較的シンプルでよく使うようなサービスなのかなと思います。

それではAWSの設定を始めていきます。 「S3」のダッシュボード画面に遷移しバケットを作成をクリックしてください。

https://i.gyazo.com/5ce86d84d4d33c576c37f99e31e44b1b.png

一般的な設定の画面ではバケット名に任意の名前と、リージョンにアジアパジフィック(東京)を選択します。

https://i.gyazo.com/d6dc13588976b34dadd5e2c2d7070f3a.png

※ 画像のバケット名だと保存できません!バケット命名規則_は使えなかったみたいですね、、、。

Bucket naming rules

このバケットのブロックパブリックアクセス設定では以下のように項目を設定します。

https://i.gyazo.com/7a042206d4dc764ac74bfe388d09c729.png

これで「バケットを作成」をクリックしてください。これでバケットが作成されたと思いまうs。

次にS3のポリシーを編集していきます。作成したバケットの管理画面に遷移します。アクセス許可のタブを開き下にスクロールすると、バケットポリシーという画面があると思います。

https://i.gyazo.com/a99e7411228a3f7fae0ccd93ed657d00.gif

編集ボタンをクリックすると下記画面が表示されます。

https://i.gyazo.com/911c73aa22d680cd8baa9fb8a9092a4f.png

ここでポリシーを作成するのですが、このポリシーを作成する上で「ポリシージェネレーター」を使用します。

入力方法としては下記記事を参考にするといいと思います。

AWS のポリシーを楽に作成する方法(ポリシージェネレーター) - Qiita

ポリシーを無事に生成したら生成されたJSONバケットポリシーにそのまま貼り付け保存します。

これでバケットポリシーの設定は完了です。基本的なAWSの設定は完了となります。

fog-awsの導入

AWSの設定が長かったですが、いよいよ実際のアプリにS3を反映させていきます。

fog-awsをインストールします。

※ 意外と依存関係で新しくインストールされるgemがかなりありました。

gem 'fog-aws'

bundle install
Fetching formatador 0.2.5
Installing formatador 0.2.5
Fetching mime-types-data 3.2021.0225
Installing mime-types-data 3.2021.0225
Fetching mime-types 3.3.1
Installing mime-types 3.3.1
Fetching fog-core 2.2.4
Installing fog-core 2.2.4
Using multi_json 1.15.0
Fetching fog-json 1.2.0
Installing fog-json 1.2.0
Fetching fog-xml 0.1.3
Installing fog-xml 0.1.3
Fetching ipaddress 0.8.3
Installing ipaddress 0.8.3
Fetching fog-aws 3.10.0
Installing fog-aws 3.10.0

carriwaveの導入時に設定したapp/uploaders/image_uploader.rbを編集します。storage :fileコメントアウトstorage :fogコメントアウトから外します。

# app/uploaders/image_uploader.rb
# Choose what kind of storage to use for this uploader:
# storage :file
storage :fog

config/initializers/carrierwave.rbを新規で作成します。ファイルを以下のように記述します。

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  config.storage :fog
  config.fog_provider = 'fog/aws'
  config.fog_directory  = 'prof-chan-carriwave' # AWSで作成したバケット名
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_DEFAULT_REGION'],
    path_style: true
  }

end

環境変数の設定には定番のgemであるdotenvを使用します。導入はすごく簡単ですので自分の下記記事を参照してください。

【Gem】dotenv - 大ちゃんの駆け出し技術ブログ

.envファイルに書き込むものは以下の3つです。これはバケット作成時にダウンロードしたcsvファイルから参照できます。

AWS_ACCESS_KEY_ID='AWSで作成したAccess key ID'
AWS_SECRET_ACCESS_KEY='AWSで作成したSecret access key'
AWS_DEFAULT_REGION='ap-northeast-1'

この環境変数をherokuでも設定します。

ブラウザから直接入力してもコンソールから直接入力しても大丈夫です。

自分はherokuから設定しました。環境変数の設定ですので画面はお見せできないですが、下記の項目から環境変数を設定できます。

https://i.gyazo.com/095fe74f6c012a3dd875c77266e610d5.png

じつはこれで設定は完了しています。実際にcarriwaveに画像を投稿すると作成したバケットの配下に画像が格納されているのがわかるかと思います。

https://i.gyazo.com/77518266ed135f0a457787bc531df99c.png

AWSの設定の複雑さに比べるとこちらは断然導入がしやすかったですね。gem最高。

参考記事

Rails, Laravel(画像アップロード)向けAWS(IAM:ユーザ, S3:バケット)の設定 - Qiita

Rails+CarrierWave+heroku環境でAWS S3へ画像をアップロードする - Qiita