...

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

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

どうもおはようポテト(@ohayoupoteto22)です。

AWSとか触ったことないよ
\(^o^)/

という感じだったブログ主でもなんとか、RailsのアプリをAWSのS3を使って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にしてあげれば治るかもしれません。参考程度に。

 

以上になります。では⸝⸝- ̫ -⸝⸝

参考 S3の設定(Ruby + Heroku + carrierwave )Qiita 参考 Active Storage Overview-Rails GuidesRailsガイド
参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA