AWSのS3で本番環境でも画像を保存できるようにしよう。【vol3】

【概要】

---

AWSのS3についてのアウトプット(備忘)、また、これからはじめて触れるよ！って方の参考になればと思います〜。
設定に若干苦戦したのと、他の記事で情報の過不足の部分があったので初めての方でもわかりやすく設定できればと思います！！
(画面は2023年11月時点のものとなります。)

【対象】

---

・S3でクラウド環境に画像を保存したい。
・renderでdeployをしたい。(Herokuなどでも可ですが、環境ヘ変数の設定が少し異なります。)
・.envファイルで管理したい。(credentialファイルでも設定可ですが、今回は.envで管理します。)

【環境】

---

・Rails7系
・Ruby3.2.2
・CarrierWave導入済。(carrierwaveについては省略します。)
・Docker ver3
・render

【前提条件】

---

・・AWSのS3で本番環境でも画像を保存できるようにしよう。【vol1】
・・AWSのS3で本番環境でも画像を保存できるようにしよう。【vol3】
・・AWSのS3で本番環境でも画像を保存できるようにしよう。【vol3】 ←イマココ

【手順】

---

1.初めに
2.Gemのインストール
3.アップローダーの設定
4.carrierwave.rbの設定
5.環境変数をセット

【1.初めに】

---

最後です。
S3に画像アップロードができているか確認してみましょう。

【2.Gemfileをインストール】

---

gemfile

gem 'fog-aws'

ターミナル

bundle install

まず、上記をインストールします。

このfog-awsというライブラリを使用することで、AWS のクラウドリソースを操作するコードを簡潔に記述でき、開発プロセスを効率化することができます。たとえば、S3 バケットへのファイルのアップロードやダウンロード、EC2 インスタンスの作成や削除など、さまざまな操作が可能です。(ChatGPTより引用)

【3.アップローダーの編集】

---

次に、画像の保存先を変更します。
下記のように変更してください。

app/uploaders/avatar_uploader.rb

class AvatarUploader < CarrierWave::Uploader::Base

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

上記の変更で、本番環境のみS3に保存される設定になります。S3は一定の容量を超えると、お金が発生するので、開発環境などで、不用意にS3にアップしないようにしておきましょう。

【4.carrierwave.rbの編集】

---

今回は、CarrierWaveを使用しているので、下記ファイルを編集します。
ここで、記述する内容は、バゲット名、リージョン名、環境変数を設定します。(コメントの部分を変更。)

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 

開発環境でテストする場合は、下記の手順も実施しましょう。
開発環境でテストする際は、保存先を開発環境に設定してから検証してください。

ターミナル

touch .env #.envファイルを作成

.env

AWS_ACCESS_KEY_ID=発行したアクセスキー
AWS_SECRET_ACCESS_KEY=シークレットキー
AWS_BUCKET_NAME=バケット名
#上記の3つを設定。(開発環境でテストする場合は、上記を使用します。)

【5.環境変数の設定】

---

本番用の環境変数を設定します。
今回は、renderでの環境設定になりますので、下記の手順を実装しております。

renderのEnvironmentから、Secret Filesを選択
※編集後にSave Changesを忘れずに！！

環境変数の中身を下記のように編集。(※.envで設定しているものと同じになります。)

下記をご使用ください。

.env

AWS_ACCESS_KEY_ID=発行したアクセスキー
AWS_SECRET_ACCESS_KEY=シークレットキー
AWS_BUCKET_NAME=バケット名

depoly完了後、画像を保存して下記を確認。

オブジェクトが作成されていれば問題ありません！！
お疲れ様でした〜。

【備忘録】
画像をアップロードしたタイミングで下記、関連errorが発生した場合は、下記をお試し下さい。
The bucket does not allow ACLs

【引用】

---