画像が表示されないからfogとかS3とか使う。
こんにちは、マリンです。
早速問題発生しました。
ポートフォリオの画像が、一瞬表示されるのに気づいたら消えてる!?
調べてみたら、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/initializers
にcarrier_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 環境変数名
こちらのサイトを参考にさせていただきました。
まとめ
やはり一番大変だったのはAWS関係でした。
全く触ったことがない、名前しか知らないような状況でしたので・・・
今回行ったセットアップの方法については別記事で書こうと思います。
ここでは書かれていたことしかやっていないので氷山の一角だと思いますが、
かなり奥が深く、またとても便利なツールのようですね。
最近では結構必須な知識にもなっているようですし、
今までなんとなく避けていた分、これからきちんと勉強しようと思います。
追記
AWS系の方も記事書きましたのでよろしければどうぞ。