【初学者必見】 HerokuとAWS S3を連携して投稿画像を保持する方法

Rails初学者なら必ずと言っていいほどデプロイで使用するHeroku
🚨 実は作成したアプリからHerokuに投稿した画像は保持されず、一定期間経つと消えてしまいます🚨
今回はRailsアプリ（CarrierWave）から投稿した画像をS3に保存して消えないようにする方法を超丁寧に解説します！

やりたいこと

Herokuにデプロイした画像投稿機能付き掲示板アプリで、ユーザーが投稿した画像をAWS S3に保存して、一定時間経過しても画像が消えないようにしたい。

開発環境 ＆ 前提条件

Ruby 3.0.1
Rails 6.1.4.1
CarrierWaveで画像投稿機能実装済み
Heroku登録済み
サンプルアプリ：【投票制】マンガ・アニメランキング

おおまかな手順

1. AWS関係の設定
2. CarrierWaveの設定
3. Herokuの設定

こちらを超丁寧に8ステップに切り分けて解説します🌿

ステップ１：AWS関係の登録

まずはこちらのAmazon公式手順の通りにAWSアカウントを作成します。
AWSとは？
→ Amazon Web Serviceの略。クラウド上でAmazonが提供するデータベースや機械学習などのサービス

アカウントを作成したら、こちらの記事の通りにIAMアカウントとS3バケットを作成します。
IAMとは？
→ Identity and Access Managementの略。AWSのIDやアクセス権を管理するサービス

S3とは？
→ Amazon Simple Storage Serviceの略。AWSが提供するオンラインストレージサービス

ステップ２：AWS用のgemをインストール

Gemfileのグローバルにgemの追記をして、bundle installします。

Gemfile

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

ステップ３：uploaderファイルの編集

carrierwave導入時に作成される app/uploaders/○○○_uploader.rb ファイルに指定されている画像のストレージ先を変更します。

○○○_uploader.rb

# storage :file から以下に変更
storage :fog

開発環境ごとに保存先を変えたい場合は、以下のようにすると本番環境でのみS3への保存ができます！

○○○_uploader.rb

if Rails.env.development?
  storage :file
elsif Rails.env.test?
  storage :file
else
  storage :fog
end

ステップ４：carrierwaveファイルの作成＆編集

app/config/initializers直下にcarrierwave.rbファイルを作成して、以下の通りに編集していきます。
'S3のバケット名'をご自身のものにするのを忘れないようにしてください！
ENV['AWS_ACCESS_KEY_ID']などの環境変数の使用についてはステップ５で解説します。

carrierwave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  config.storage :fog
  config.fog_provider = 'fog/aws'
  config.fog_directory  = 'S3のバケット名'
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_DEFAULT_REGION'],
    path_style: true
  }

end

ステップ５：storage関連ファイルの編集

以下の２つのファイルにaws関連の記述を追加します！

config/storage.yml

# コメントアウトを外す。
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: ap-northeast-1 #東京に修正
  bucket: S3のバケット名 #作成したS3のバケットの名前

config/environments/production.rb

# localからamazonに修正
config.active_storage.service = :amazon

ステップ6：環境変数の設定

環境変数とは？ → 簡単に言うと、ネット上に公開させたくない情報を入れておく箱のことです。 carrierwave.rbに直接AWSのアクセスキーなどを入れることは、セキュリティ上好ましくないのでgemを導入して環境変数を設定します。 Gemfileのグローバルに、環境変数を管理できるgemのdotenv-railsを追記して、bundle installします。

Gemfile

gem 'dotenv-rails'

続いて、環境変数を記載するファイルである.envをapp直下に作成して、そちらに必要な環境変数を設定していきます。

.env

AWS_ACCESS_KEY_ID='AWSで作成したアクセスキーのID'
AWS_SECRET_ACCESS_KEY='AWSで作成したシークレットアクセスキー'
AWS_DEFAULT_REGION='ap-northeast-1'

最後に、.envファイルがネット上にアップされないようにapp直下の.gitignoreに設定を追加します。

.gitignore

# 最終行辺りに.envを追記
/.env

ステップ7：Herokuの設定

HerokuにAWSの情報を設定します。

terminal

# Herokuへログイン
% heroku login

# Herokuに環境変数を設定
% heroku config:set AWS_ACCESS_KEY_ID="AWSで作成したアクセスキーのID"
% heroku config:set AWS_SECRET_ACCESS_KEY="AWSで作成したシークレットアクセスキー"
% heroku config:set AWS_DEFAULT_REGION="ap-northeast-1"

ステップ8：最終確認

ここまでできたら、Herokuにデプロイしましょう！
アプリで画像付きの投稿をすると、S3のバケットに画像がアップロードされます！（画像の赤枠部分）

最後に

最後まで拝読してくださりありがとうございました！！！
今回の記事が多くの初学者の方のお役に立つことを願っています🌿

参考記事

Railsでcarrierwaveを使ってAWS S3に画像をアップロードする手順を画像付きで説明する
【Rails】 dotenv-railsを使って環境変数を管理しよう