【Rails】AWSのS3を使ってHerokuで画像を投稿できるようにする方法

Herokuで画像を投稿するまでの手順

一見多そうに見えますが、step2さえ終わればあとは一瞬です(一瞬とは言ってない)。

RailsでS3を使ってHerokuで画像を投稿する方法

AWSアカウントの作成

まずはAWSのアカウントを作る必要があります。

AWSアカウント作成の流れが参考になります。

IAMユーザーを作成する

ここは何もしないで次のページへ。

ここも何もしない。

ここでゲットしたCSVファイルは後々使います。

これでIAMユーザーの作成は完了です。

バケットを作成する

TOP画面から「S3」を選ぶと以下の画面にいきます。

確認画面が表示されるので「バケットを作成」をクリック。

これでAWS側の作業は終わりっ。

CA証明書を設置する

SSL接続で使用するCA証明書を設置するために以下のコマンドを叩きます。

$ CERT_PATH=$(ruby -ropenssl -e "puts OpenSSL::X509::DEFAULT_CERT_FILE")

$ sudo curl "https://curl.haxx.se/ca/cacert.pem" -o $CERT_PATH

これをやっとかないとファイルをアップした時にエラーが起きることがあるらしいです。(知識不足)

Gemをインストールする

gem "aws-sdk-s3", require: false

これをGemfileに追記してあげて、

bundle install

資格情報を編集する

先ほど得たアクセスキーを設定していきます。

アクセスキーは先ほどゲットしたCSVファイルに記述されています。

(左がアクセスキーID。右がシークレットアクセスキー。)

$ EDITOR=vim rails credentials:edit

エディターを開いてあげると…

aws:
    access_key_id: (アクセスキーID)
    secret_access_key: (シークレットアクセスキー)

このような表示(最初は多分コメントアウトされてる)が出てくると思うので、そこに先ほど得たアクセスキーさん達をペーストしてあげます。

編集や保存をするためのキーは以下の通り。

画像の保存先をS3に変更する

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: #アクセスキーID
  bucket: #バケット名

config/storage.ymlに上のように記述してあげます。

ブログ主の場合、ここで変に空白を入れてしまいエラーに3時間ほど悩まされました…ﾄﾎﾎ…

development.rbをいじる

config.active_storage.service = :amazon

config/environments/development.rbを上のように記述してあげます。

マスターキーをセットする

config/master.keyを開いてみると羅列された謎の文字列があると思うのでそれをコピーします。

$ heroku config:set RAILS_MASTER_KEY= (マスターキーをここに)

そしてそのマスターキーをペーストして上のように叩いてあげます。

$ heroku buildpacks:add -i 1 https://github.com/heroku/heroku-buildpack-activestorage-preview

そしてこのようなおまじないを叩いてあげます。

pushしてあげる

$ git add .
$ git commit -m "s3 edit"
$ git push heroku master
$ heroku run rails db:migrate

そしてpushしてあげれば終了です！終わりっ！

エラーが発生した際の対処法

実際にアプリを開いて上のように「エラーだぜ。出直してきな。」と言われた時は

$ heroku logs --tail

でログを見たり

$ heroku run rails c

でコンソールを起動してあげるとエラーの原因が分かるかと思います。

ブログ主もこれに助けられました。参考程度に。

assets/images内の画像が表示されない時

「Heroku下で投稿した画像じゃなく、assets/images内にある画像が表示されないんやけどどないして…?」という時はconfig/environments/development.rb内の

config.assets.compile = false

という記述を

config.assets.compile = true

trueにしてあげれば治るかもしれません。参考程度に。

まとめ

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝