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

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

くるみ

AWSとか触ったことないよ…
という感じだったブログ主でもなんとか、RailsのアプリをAWSのS3を使ってHeroku下でも画像を投稿できるようにしたので、備忘録としてまとめようと思います。

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

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

手順
step1
AWSアカウントの作成
step2
IAMユーザーとバケットを作成する
step3
CA証明書を設置する
step4
Gemをインストールする
step5
資格情報を編集する1
step6
画像の保存先をS3に変更する
step7
マスターキーをセットする
やっていこう!

くるみ

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

AWSアカウントの作成

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

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

IAMユーザーを作成する

ログインできたら、ダッシュボードから「IAM」を選択します

 

  • 左側のメニューから「ユーザー」を選択

 

「ユーザーを追加」を選択。

 

  • ユーザー名を入力し「プログラムによるアクセス」にチェック

 

  • 「既存のポリシーを直接アタッチ」を選択し、「AmazonS3FullAccess」にチェックを入れる

ブログ主

結構下の方にあります。


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


ここも何もしない。

  • CSVファイルをダウンロードしておく

ここでゲットした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: (シークレットアクセスキー)

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

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

  • iキーで編集開始
  • escキーで終了
  • ZZ(大文字)キーで保存

画像の保存先を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にしてあげれば治るかもしれません。参考程度に。

まとめ

記事を読んでくれてありがとう

以上、RailsでAWSのS3を使ってHerokuで画像を投稿できるようにする方法でした。

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

参考 S3の設定(Ruby + Heroku + carrierwave )Qiita 参考 Active Storage Overview-Rails GuidesRailsガイド

1 COMMENT

のと

初めまして。
railsでS3を利用したく、こちらの記事を参考にさせていただきました。
その中で、「CA証明書を設置する」にある通り、
$ CERT_PATH=$(ruby -ropenssl -e “puts OpenSSL::X509::DEFAULT_CERT_FILE”)
$ sudo curl “https://curl.haxx.se/ca/cacert.pem” -o $CERT_PATH
こちらのコマンドを実行したのですが、その後、bundle installの際にCA証明書がないため?SSL通信ができないというエラーが出ます。
httpsからhttpに変更しbundle installをすると一応できるのですが、いざデプロイとなると、CA証明書がないためデプロイできないというエラーになります。
調べてもあまり有力な情報が無かったため、こちらにコメントさせていただきます。
エラーについて何かわかることがあれば、教えていただきたいです。

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではReactで宅配冷凍弁当の比較・口コミサイトの開発・運営をしています。お問い合わせはこちらよりどうぞ。