【Rails】Carrierwaveとfog-awsを用いて、画像をAWS S3へアップロードする方法

# 目標

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/6bbd5e51-b52b-41f9-eda5-fda0d5f6e008.gif)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

AWSのアカウントを登録済み。

下記実装済み。

・[投稿機能実装](https://qiita.com/matsubishi5/items/1a5aeab651b5822d1f2c)
・[Carrierwaveを用いた画像投稿機能実装](https://qiita.com/matsubishi5/items/a0ff8ab9a830d2cfcc7e)

# AWSの設定

### 1.下記リンクへアクセス

[AWS マネジメントコンソール](https://ap-northeast-1.console.aws.amazon.com/console/home?region=ap-northeast-1)

### 2.`サービス`をクリック
![スクリーンショット 2020-06-16 19.30.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/871bcf50-adc6-cbbf-912f-32401e5e3e3d.png)

### 3.`IAM`をクリック
![スクリーンショット 2020-06-16 19.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/8aae38ef-d83b-ac02-a5a5-2567c12af47a.png)

### 4.`ユーザー`をクリック
![スクリーンショット 2020-06-16 19.31.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/4050293e-aa95-ae8b-ebb4-af95339b7d91.png)

### 5.`ユーザーを追加`をクリック
![スクリーンショット 2020-06-16 19.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/d859fecc-2743-4675-59b8-1e7f7d91f405.png)

### 6.ユーザー詳細の設定
**①ユーザー名を記入する。(適当で良い)**

**②アクセスの種類を`プログラムによるアクセス`に設定する。**

**③`次のステップ：アクセス制限`をクリック**
![スクリーンショット 2020-06-16 19.32.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/9b02143b-ff8d-50d5-3144-fc43fd836703.png)

### 7.`既存のポリシーを直接アタッチ`をクリック
![スクリーンショット 2020-06-16 19.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/661ebcfd-08f0-ff99-a33d-c19f6f08e187.png)

### 8.`AmazonS3FullAccess`を選択し、`次のステップ：タグ`をクリック
![スクリーンショット 2020-06-16 19.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/1d88f291-819b-7150-e85d-8852843b9df8.png)

### 9.`次のステップ：確認`をクリック
![スクリーンショット 2020-06-16 19.33.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/a963eec9-50d6-c6ab-9446-3f4c5c76e2c2.png)

### 10.`ユーザーの作成`をクリック
![スクリーンショット 2020-06-16 19.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/2dfc2be1-4de0-af67-551a-bd6284c1427a.png)

### 11.`アクセスキーID`と`シークレットアクセスキー`をコピーして控え、`サービス`をクリック
![スクリーンショット 2020-06-16 19.35.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/44a70790-69f0-c124-4f26-2b9482f546a9.png)

### 12.`S3`をクリック
![スクリーンショット 2020-06-16 19.36.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/2b086cf3-1465-f205-b38c-e8aca3276513.png)

### 13.`バケットを作成する`をクリック
![スクリーンショット 2020-06-16 19.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/af2a9bfe-d55e-0cb2-f180-87ad7dc14dd6.png)

### 14.名前とリージョンを設定

**①バケット名を入力する。(適当で良い)**

**②リージョンを`アジアパシフィック(東京)`に設定する。**

**③`次へ`をクリックする。**

![スクリーンショット 2020-06-16 19.37.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/70a16d02-eaef-1a38-a730-598e541e1313.png)

### 14.`次へ`をクリック
![スクリーンショット 2020-06-16 19.38.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/64bec54a-8696-7734-d36f-38d5242ad905.png)

### 15.`次へ`をクリック
![スクリーンショット 2020-06-16 19.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/d9c36863-7b35-62bf-cb1f-1ea121f4ab6f.png)

### 16.`バケットを作成`をクリック
![スクリーンショット 2020-06-16 19.38.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/9b556dd2-ac02-5447-e68a-c3d1b2341df9.png)

# 実装

### 1.キーを環境変数化

**①「gem 'dotenv-rails'」を導入**

```ruby:Gemfile
gem 'dotenv-rails'
```

```terminal:ターミナル
& bundle
```

**②アプリケーション直下に「.env」ファイルを作成**
※アプリケーションのディレクトリに移動してから下記コマンドを実行

```terminal:ターミナル
$ touch .env 
```
![スクリーンショット 2020-06-02 11.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/6136dec1-89a9-94cb-0410-8aec11f79a8b.png)

**③`.env`ファイルを編集**

```:.env
S3_ACCESS_KEY_ID = 'アクセスキー' # 追記
S3_SECRET_ACCESS_KEY = 'シークレットアクセスキー' # 追記
```

**④`.gitignore`ファイルを編集**

```:.gitignore
/.env # 追記
```

### 2.Gemを導入

```ruby:Gemfile
gem 'fog-aws'
```

```terminal:ターミナル
$ bundle
```

### 3.`image_uploader.rb`を編集

7行目の`storage :file`をコメントアウトし、下記コードを追記する。

```ruby:image_uploader.rb
# 追記
if Rails.env.development? # 開発環境の場合
  storage :file
elsif Rails.env.test? # テスト環境の場合
  storage :file
else # 本番環境の場合
  storage :fog
end
```

`storage :file`
➡︎ 画像をアプリケーション内へアップロードする。

`storage :fog`
➡︎ 画像をS3へアップロードする。

### 4.`carrierwave.rb`を作成・編集

```terminal:ターミナル
$ touch config/initializers/carrierwave.rb
```

```ruby:carrierwave.rb
require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  if Rails.env.production? # 本番環境の場合はS3へアップロード
    config.storage :fog
    config.fog_provider = 'fog/aws'
    config.fog_directory  = 'matsubishi-sample' # バケット名
    config.fog_public = false
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: ENV['S3_ACCESS_KEY_ID'], # アクセスキー
      aws_secret_access_key: ENV['S3_SECRET_ACCESS_KEY'], # シークレットアクセスキー
      region: 'ap-northeast-1', # リージョン
      path_style: true
    }
  else # 本番環境以外の場合はアプリケーション内にアップロード
    config.storage :file
    config.enable_processing = false if Rails.env.test?
  end
end
```