はじめに
画像アップロード機能を実装したアプリをデプロイした際の事態をメモします。
本来はスクショを撮って体系立ててまとめたかったのですが、スクショを撮り忘れてしまったのとエラーがたくさんでて後からログを追いきることが困難であったため、つらつらと書いていくことにしています。
（一部うろ覚えです。。。）
参考サイト
今回はだいぶ詰まったこともあり、参考にしたサイトは結構あります。
手順やエラーの中でも一部再掲しています。
Railsチュートリアル 第13章
【Rails5】AWS S3+CarrierWave+Fog::AWSを利用して画像アップロード機能を作成する
【Rails】S3へ『CarrierWave+fog』を使って画像アップロードする方法
【rails】S3でheroku上で画像保存しようとしたらエラー大量発生【Access denied】
エラーAccess Denied 〜Rails + Carrierwave + HerokuでAWS S3に画像を保存〜
よく使うアセット関連の設定項目まとめ
HerokuでRailsアプリをデプロイする時にCSSが反映されない場合の対処法
Railsアプリをデプロイするとbackground: url(bg-hero-001.jpg)が表示されなくなる話
手順
基本はRailsチュートリアル第１３章に沿って進めていき、エラーが出たら都度対応したという流れです。
1.fogをインストール & 本番橋での保存先設定
まずはfogをインストールします。Gemfileに含めたらbundle installします。
gem 'fog'
開発環境ではローカルファイルに画像保存で問題ありませんが、本番環境ではクラウドストレージサービス（fog）に保存するように設定します。
Carrierwaveをインストールした際に生成したuploaderファイルに以下を追加します。
if Rails.env.production?
storage :fog
else
storage :file
end
2. AWS S3の設定
ここでの流れは、
①AWSのアカウントを作成する
②AWS Identity and Access Management (IAM)でユーザーとグループ(AmazonS3FullAccess)作成（アクセスキーとシークレットアクセスキーは後から使うのでcsvはダウンロードしておくと良い）
③作成したユーザーでログインし、サービス「S3」にてバケットを作成する
チュートリアルにはざっくりとしか書いていないので、主に以下２つのサイトを大変参考にさせて頂きました。
私はスクショを撮っていなかったので皆さんもこちらを参考にしてください。。。
【Rails5】AWS S3+CarrierWave+Fog::AWSを利用して画像アップロード機能を作成する
【Rails】S3へ『CarrierWave+fog』を使って画像アップロードする方法
3. CarrieWaveの設定
carrierwave.rbを作成してCarrierWaveの設定を以下のようにします。
if Rails.env.production?
CarrierWave.configure do |config|
config.fog_credentials = {
provider: 'AWS',
aws_access_key_id: ENV['ACCESS_KEY_ID'],
aws_secret_access_key: ENV['SECRET_ACCESS_KEY'],
region: 'ap-northeast-1' # S3バケット作成時に指定したリージョン。左記は東京を指す
}
config.fog_directory = 'original-trip-sns' # 作成したS3バケット名
end
end
4.Herokuの環境変数を設定
$ heroku config:set ACCESS_KEY_ID=アクセスキー
$ heroku config:set SECRET_ACCESS_KEY=シークレットアクセスキー
ここまでやったらgit push herokuをしてデプロイしましょう
エラー
はい、出ましたエラー、毎回一発で成功してくれと思うのですがなかなか思い通りにいきませんね。
今回はHerokuでのエラー、投稿できないエラー、表示画像が出ないエラーの3種類あります。
1.We're sorry, but something went wrong.
ちょっと時間軸は戻りますが、アプリを作成してしばらくHerokuにデプロイしていなかったのでfogをインストールした後、デプロイしてみたらこのエラーが出ました。
エラーの原因を探るためにheroku logsとheroku run rails cをします。
$ heroku logs
省略
2019-03-01T05:23:23.160943+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=〇〇.herokuapp.com request_id=c8b33509-2428-4bf5
-9994-03b6c162612a fwd="124.219.169.185" dyno= connect= service= status=503 bytes= protocol=https
2019-03-01T05:23:23.963075+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=〇〇.herokuapp.com request_id=3d08eec
5-55fb-4544-b6b1-e302fcc0f86e fwd="124.219.169.185" dyno= connect= service= status=503 bytes= protocol=https
$ heroku run rails c
省略
/app/vendor/bundle/ruby/2.5.0/gems/carrierwave-1.3.1/lib/carrierwave/uploader/configuration.rb:78:in `eval': uninitialized constant CarrierWave::Storage::Fog (Name
Error)
解決
上記でのCarrierWaveの設定を行うことで無事解決しました。
2.Excon::Error::Forbidden (Expected(200) <=> Actual(403 Forbidden)
無事トップ画面が開きログインして写真を添付して投稿しようと思い、投稿ボタンを押したら上記エラーが発生しました。
今回もheroku run rails cで上記エラーを確認しました。
解決
例に漏れずスクショをとってないので参考にしたサイトを残しておきます。
なお、私はパブリックアクセス設定は修正した一方で、バケットポリシーは特に修正していませんが無事投稿することができました。
【rails】S3でheroku上で画像保存しようとしたらエラー大量発生【Access denied】
3.トップページの背景写真が反映されない
アプリ自体は問題なく動くのですが、トップページの背景は真っ白になっており、もともと設定している写真が背景に反映されるようにしなければなりません。
解決
Railsアプリをデプロイするとbackground: url(bg-hero-001.jpg)が表示されなくなる話
こちらのサイトを参考にしました。
私の場合は以下のように修正したことで、背景画像がちゃんと反映されるようになりました。
# 修正前
&__bg_photo {
background-image: url("hawaii.PNG");
# 修正後
&__bg_photo {
background-image: image-url("hawaii.PNG");
最後に
この記事が少しでも参考になれば幸いです。
AWSはちゃんと時間をとって勉強しなければと強く思いました。。。