【Rails × AmazonS3】 RailsアプリでAmazonS3を利用し、本番環境に画像をアップロードする

はじめに

はじめまして、ずっと大地と申します。
2023年11月より、オンラインスクールのRUNTEQにて、未経験からのWebエンジニア転職を目指して学習をしています。
初学者のうえ、記事を書くのは初めてです。
記述漏れや作成ファイルの記載忘れなど、不備があるかもしれないので、間違いなどあれば教えて頂けたらと幸いです。
また、人によって環境の違いがあるかと思うので、あくまでも私自身の環境で、記事投稿時の記録ということをお許しください。

概要

アプリ開発にて実装した、Amazon S3での本番環境の画像アップロードについて、設定が多く難しいと感じたので、記事にしたいと思います。
CarrierWaveを導入済み、AWSにrootユーザー、IAMユーザーとしてログインできる状態を前提とします。

環境

Ruby 3.2.3
Rails 7.1.3.2
CarrierWave
Amazon S3
Render.com

手順

rootユーザーとしてサインイン

まずは、rootユーザーとしてサインインします。
右上からリージョンをアジアパシフィック（東京）にしておきます。

S3を検索

上部の検索欄からS3を検索し、S3を選びます。

バケット作成

バケット作成のボタンを押します。

AWSリージョンは、アジアパシフィック (東京) ap-northeast-1で設定、バケット名を決め、汎用を選びます。
※バケットは、簡単に言うと画像を保存する場所です。

ACLを有効にします。

下から３つの項目にチェックを入れ、他は特に変えずにスクロールしてページ下部のバケット作成ボタンを押します。

バケットポリシーの設定

作成されたバケットを選択、上部に並んでいるアクセス許可から、バケットポリシー欄の編集を押します。

バケットポリシーを編集します。
①、②、③を編集します。
編集ができたら、変更を保存を押します。
※日本語など入っていると保存できません。

{
    "Version": "2012-10-17",
    "Id": "Policy1544152951996",
    "Statement": [
        {
            "Sid": "Stmt1544152948221",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::①IAMユーザー時に必要な１２桁の数字:user/②IAMユーザー名"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::③バケット名"
        }
    ]
}

アクセスキーの取得

IAMユーザーとしてログインします。
上部の検索欄からIAMと検索し、ダッシュボードにいきます。

左側のバーからユーザーを押し、オレンジ色のユーザーの作成を押します。

ユーザー名を決めて、次へを押します。

ポリシーを直接アタッチするを選んで、AmazonS3FullAccessにチェックを入れます。s3と検索するとすぐ見つかります。

アクセスキーの発行

※ここはキーの発行なので画像を載せていません。
使いたいユーザーを選び、セキュリティ認証情報から、アクセスキーを作成を押します。
外部から...を選んで、完了を押すと、アクセスキーが発行されます。
後で.envファイルに記述するので、控えておいてください。
キーは後で表示されませんので、ご注意ください。

各設定ファイルの編集

Gemfileに下記を追記し、bundle installします。

gem "aws-sdk-s3"

config/environments/production.rbの記述を、下記のようにlocalからamazonに変更します。

config/environments/production.rb

#config.active_storage.service = :local
config.active_storage.service = :amazon

config/storage.ymlを以下のようにします。
環境変数になっている部分は後述します。
作成したバケット名を記述してください。

config/storage.yml

amazon:
  service: S3
  access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>  
  secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
  region: ap-northeast-1
  bucket: バケット名

再びGemfileに追記し、bundle installします。

gem 'fog-aws'

carrierwaveが導入してあれば、app/uploders/avatar_uploder.rbのようなファイルがあると思うので、以下のようにします。

app/uploders/avatar_uploder.rb

class AvatarUploader < CarrierWave::Uploader::Base
  # 略
  
  if Rails.env.production?
    storage :fog # 本番環境ではfogを使用
  else
    storage :file # 開発環境とテスト環境ではfileを使用
  end
  
  # 略
end

config/initializers/carrierwave.rbを作成し、以下のようにします。
コピペで問題ありませんが、①バケット名は自分のものを記述してください。
環境変数になっている部分は、config/storage.ymlと同じ記述です。

config/initializers/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  = '①バケット名'
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
      aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
      region: 'ap-northeast-1',
      path_style: true
    }
end 

.envに以下のように追記をします。
ファイルを作ったことがない方は作成してください。
ここでキーを打つことで、config/storage.ymlと、config/initializers/carrierwave.rbの環境変数が使われ、GitHubに大事な情報が上がらなくなります。

.env

AWS_ACCESS_KEY_ID=アクセスキーを記述
AWS_SECRET_ACCESS_KEY=シークレットキーを記述

デプロイ

デプロイ先の設定にもキーを追加します。
私の場合は、Render.comなので、以下のように記載します。

デプロイします。
本番環境で画像をアップロードする実装を試します。

rootユーザーとしてログインし、バケットのオブジェクトに画像が保存されていたら実装完了です。
お疲れ様でした！！

おわりに

AWSと聞くだけで少し身構えますが、実装ができて良かったです。
実装にあたって参考にさせていただいた記事や、詰まった時に助けていただいた記事は下に載せておきます。
ここまで読んでくださり、ありがとうございました。

参考記事・引用元