Web Marina

日々の業務や勉強などで得た知識をアウトプットしていきます。

画像が表示されないからfogとかS3とか使う。

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

早速問題発生しました。

ポートフォリオの画像が、一瞬表示されるのに気づいたら消えてる!?

調べてみたら、Herokuは画像データを保存できないので、

クラウドストレージがマストだとのこと。

Rails Tutorialの13.4.4「本番環境での画像アップロード」ところです。

「上手くいかなかったらここ飛ばしちゃっていいよ〜👍」なんて書いてあったけど、

飛ばしたら全然ダメじゃん!!(えぇ。私は飛ばしましたとも。)

Heroku使って本番運用をお考えの方はサラッとでも見とくことをオススメします。

と言うことで、今更ながら13章を見直した話しです。

13.4.4 本番環境での画像アップロードです。 railstutorial.jp

fog

まずはfog gemから。Gemfileに追加して$bundle installです。

gem 'fog'

fogはRubyクラウドサービスを使いやすくするためのGemです。

次に本番環境での画像ファイルの保存場所を変更します。

app/uploaders/○○_uploader.rbを変更します。

  if Rails.env.production?
    storage :fog
  else
    storage :file
  end

論理値を返すproduction?メソッドで環境毎に保存先を変えられるようにします。

S3

S3はAWSのサービスの一つです。

*長くなるのでセットアップについては別記事で書こうと思います。

S3のセットアップが終了してからの設定です。

 1. config/initializerscarrier_wave.rbファイルを作ります。

$touch config/initializers/carrier_wave.rb

 2. CarrierWaveを通してS3を使う設定

if Rails.env.production?
  CarrierWave.configure do |config|
    config.fog_credentials = {
      # Amazon S3用の設定
      :provider              => 'AWS',
      :region                => ENV['S3_REGION'], 
      :aws_access_key_id     => ENV['S3_ACCESS_KEY'],
      :aws_secret_access_key => ENV['S3_SECRET_KEY']
    }
    config.fog_directory     =  ENV['S3_BUCKET']
  end
end

 3. Herokuの環境変数を設定

AWSでIAMを作成した際のアクセスキー、シークレットキー、バケット名、レギオン(地域)を入力。

$ heroku config:set S3_ACCESS_KEY="Accessキーを入力"
$ heroku config:set S3_SECRET_KEY="同様に、Secretキーを入力"
$ heroku config:set S3_BUCKET="Bucketの名前を入力"
$ heroku config:set S3_REGION="Regionの名前を入力"

 4. .gitignoreを編集

ローカルの画像ファイルをGitの対象から外します。

.
.
.
/public/uploads

 5. デプロイします

$git add -A
$git commit -m "hoge hoge"
$git push
$git push heroku
$heroku run pg:reset DATABASE
$heroku run rails db:migrate

データベースのリセットやサンプルデータがある場合などはご自身の環境に合わせて行ってください。

これで設定は完了です。

コケたところ

Herokuの環境変数についてよくわかっていなかったので、

REGIONの入力方法を間違えました。

さらにその間違えた変数を消去せずに正しいものを追加してしまったので、

ポートフォリオを全然追加できず、ハマってしまいました。

詳細

  • REGIONの値をS3の設定時に選択した「Asia pacific(Tokyo)」と入力。

  • 上記を削除することなく、追加で正規のリージョンを設定してしまう。

対処

 1. 状況確認

まず全体的に意味がわからなかったので、とりあえず一覧表示させて状況を確認しました。

 2. ダブり

上書きされてると勘違いしていたREGIONが正誤ダブっていることに気づいたので、

間違えた方を削除しました。

誤 -> Asia pacific(Tokyo)

正 -> ap-northeast-1

ちなみにS3でのRegionの表記についてはこちらに書かれています。

AWS のリージョンとエンドポイント - アマゾン ウェブ サービス

Herokuの環境変数について

一覧表示

$heroku config

変数名指定

$heroku config:get 環境変数名
$heroku config:set 環境変数名=値
$heroku config:unset 環境変数名

こちらのサイトを参考にさせていただきました。

chomast.com

まとめ

やはり一番大変だったのはAWS関係でした。

全く触ったことがない、名前しか知らないような状況でしたので・・・

今回行ったセットアップの方法については別記事で書こうと思います。

ここでは書かれていたことしかやっていないので氷山の一角だと思いますが、

かなり奥が深く、またとても便利なツールのようですね。

最近では結構必須な知識にもなっているようですし、

今までなんとなく避けていた分、これからきちんと勉強しようと思います。

追記

AWS系の方も記事書きましたのでよろしければどうぞ。

S3 song-of-life.hatenablog.com