yuuki blog

プログラミング をアプトプットしています。

AWS　(S３のバケットに保存されるように設定)

プログラミング AWS

ローカル環境からS3に画像を保存

「ローカル環境」「本番環境」それぞれで画像を投稿し、S3に保存されるかを確認する方法を紹介していきます。
まずは「ローカル環境」でS3に画像を保存することを目指します。

https://tech-master.s3.amazonaws.com/uploads/curriculums//463af6d4e673d07f459e1ea12734a771.png

画像の保存先をS3に変更

　以下の順で進めていきます。

  • 必要なGemをインストール
  • 保存先を指定
  • 環境変数を設定
  • 正しく保存できるか確認

それでは実装に入ります。

必要なGemをインストール

まずは、S3を使用するために必要なGemfileを導入します。

Gemfileの一番下に追記しましょう

Gemfile
1
 
 gem "aws-sdk-s3", require: false

追記したら、ターミナルで「bundle install」を実行しましょう。

 

保存先を指定しよう

続いて画像の保存先を指定しましょう。現状画像の保存先はローカルに設定されているので、S3に保存されるように設定を変更しましょう。

development.rbを編集しましょう

画像の保存先を「:local」→「:amazon」に変更しましょう。

config/environments/development.rb
1
2
3
4
5
 
（省略）

config.active_storage.service = :local

（省略）

↓以下のように編集しましょう

config/environments/development.rb
1
2
3
4
5
 
（省略）

config.active_storage.service = :amazon

（省略）

storage.ymlを編集しましょう

以下のコードを追記しましょう。

config/storage.yml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
test:
 service: Disk
 root: <%= Rails.root.join("tmp/storage") %>

local:
 service: Disk
 root: <%= Rails.root.join("storage") %>

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

（省略）

今設定した 「 access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>」「secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>」 の部分は環境変数を読み込むための記述になります。
次はこの「環境変数」の設定をしましょう。

環境変数を設定しよう

環境変数を設定するにあたって、OSのバージョンを確認する必要があります。
ご自身のMacがどのOSバージョンなのか確認した上で設定に取り掛かりましょう。

 macOSのバージョンを確認しましょう

環境変数の設定方法はmacOSのバージョンによって異なります。そのため、以下の手順で確認を行いましょう。

デスクトップの左上にあるアイコンをクリックして、「このMacについて」を選択します。

https://tech-master.s3.amazonaws.com/uploads/curriculums//4a71a0bc6d7fed48409e3986d5374365.png

この画面で、macOSのバージョンを確認することができます。

https://tech-master.s3.amazonaws.com/uploads/curriculums//da640a7ab3bb96d25ddef246401b5764.png

ご自身のパソコンがバージョン10.15(Catalina)より新しいか、それとも10.14(Mojave)以前なのかを確認し、該当する方の操作を行います。

また、IAMユーザー設定時にダウンロードしたCSVファイル（１つ目のダウンロードファイル）を開きましょう。その中に、Access_key_IDとSecret_access_keyというカラムがあるので、こちらに書かれた値を設定していきます。

以下の作業はホームディレクトリまたはルートディレクトリで実行しましょう。

【MacOSがCatalina以降の場合】

 ターミナルに以下のコマンドを打ちましょう

ターミナル
1
 
% vim ~/.zshrc

 「i」を押して以下のコードを貼り付けましょう

既存のコードは消さないようにしましょう！
ターミナル
1
2
 
export AWS_ACCESS_KEY_ID="ここにCSVファイルのAccess key IDの値をコピー"
export AWS_SECRET_ACCESS_KEY="ここにCSVファイルのSecret access keyの値をコピー"
「SECRET_ACCESS_KEY」と「ACCESS_KEY_ID」を逆に設定しないよう注意しましょう。「AKI~」で始まるのが「ACCESS_KEY_ID」です。

 貼りつけたら「escキー」→「:wq」の順で実行し、保存しましょう

vimが終了し、通常のターミナルの状態に戻ることを確認します。

編集した「.zshrc」を読み込み直し、追加した環境変数を使えるようにしましょう

記述ができたら、以下のコマンドを実行して設定を反映させます。

ターミナル
1
 
% source ~/.zshrc
Catalina以降の方は、ここまで終えたら「正しく保存出来るか確認しよう」に移りましょう。

【MacOSがMojave以前の場合】

 ターミナルに以下のコマンドを打ちましょう

ターミナル
1
 
$ vim ~/.bash_profile

 「i」を押して以下のコードを貼り付けましょう

既存のコードは消さないようにしましょう！
ターミナル
1
2
 
export AWS_ACCESS_KEY_ID="ここにCSVファイルのAccess key IDの値をコピー"
export AWS_SECRET_ACCESS_KEY="ここにCSVファイルのSecret access keyの値をコピー"
「SECRET_ACCESS_KEY」と「ACCESS_KEY_ID」を逆に設定しないよう注意しましょう。「AKI~」で始まるのが「ACCESS_KEY_ID」です。

 貼りつけたら「escキー」→「:wq」の順で実行し、保存しましょう

vimが終了し、通常のターミナルの状態に戻ることを確認します。

編集した「.bash」を読み込み直し、追加した環境変数を使えるようにしましょう

記述ができたら、以下のコマンドを実行して設定を反映させます。

ターミナル
1
 
$ source ~/.bash_profile

ここまで終えたら、次は「正しく保存出来るか確認しよう」に移りましょう。

正しく保存出来るか確認しよう

それでは実際に保存したファイルがS3に保存されるか確認しましょう。

 画像投稿をしましょう

ローカル環境で、開発中のアプリから画像投稿を行いましょう。

 S3に保存されているか確認しましょう

下記のページで一度リロードし、S3のバケットにファイルが保存されているか確認します。
バケット名をクリックすると投稿した画像があるはずです。
投稿日時を確かめ、今投稿した画像であることを確認しましょう。

https://tech-master.s3.amazonaws.com/uploads/curriculums//8ee261c62576b77a4229ca718882c166.gif

本番環境からS3に画像を保存できるようにしよう

続いては、「本番環境」でS3に画像を保存することを目指しましょう。

https://tech-master.s3.amazonaws.com/uploads/curriculums//c0190e0938302dc8a6fd7d0bba3c45a2.png

画像の保存先をS3に変更しよう

　以下の要領で学習を進めていきます。

  • 保存先を指定
  • Heroku上で環境変数を設定
  • 正しく保存できるか確認

それでは順に進めていきましょう。

保存先の指定をしよう

本番環境の設定ファイルを開き、画像がS3に保存されるように設定を変更しましょう。

production.rbを編集しましょう

画像の保存先を「:local」→「:amazon」に変更しましょう。

config/environments/production.rb
1
2
3
4
5
 
（省略）

config.active_storage.service = :local

（省略）

↓以下のように編集しましょう。

config/environments/production.rb
1
2
3
4
5
 
（省略）

config.active_storage.service = :amazon

（省略）

Heroku上で環境変数を設定しよう

AWSのアクセスキーは、環境変数に設定して使用します。Heroku上に環境変数を指定しましょう。

ターミナルで下記のコマンドを実行しましょう

Herokuで環境変数を扱うにはマスターキーの時と同様、「heroku config:setコマンド」を打つ必要があります。
それでは以下の通りに実行しましょう。

ターミナル（開発中のアプリで実行）
1
 
heroku config:set AWS_ACCESS_KEY_ID="ここにCSVファイルの「Access key ID」の値をコピー"
ターミナル（開発中のアプリで実行）
1
 
heroku config:set AWS_SECRET_ACCESS_KEY="ここにCSVファイルの「Secret access key」の値をコピー"
「SECRET_ACCESS_KEY」と「ACCESS_KEY_ID」を逆に設定しないよう注意しましょう。「AKI~」で始まるのが「ACCESS_KEY_ID」です。

 Heroku上で環境変数を確認しましょう

環境変数が正しく設定できているかを確認するために、下記のコマンドを入力してください。

ターミナル（開発中のアプリで実行）
1
 
% heroku config

以下のように確認できれば成功です。

https://tech-master.s3.amazonaws.com/uploads/curriculums//844eee267df3317f3547ce21a0612aed.png

編集内容をHerokuに反映しよう

ローカル環境で編集した内容をHerokuに反映させた上で本番環境の挙動を確認します。

 編集内容をコミットしましょう

ここまで編集出来たらコミットをしましょう。

ブランチを切っている場合は必ずmasterブランチにマージしましょう。

ターミナルで下記のコマンドを実行しましょう

それでは編集した内容をHerokuに反映させましょう。

ターミナル（開発中のアプリで実行）
1
 
% git push heroku master

このコマンドにより、herokuがリモートリポジトリのmasterブランチを参照することが出来ます。

正しく保存出来るか確認しよう

それでは実際に保存したファイルがS3に保存されるか確認しましょう。

画像投稿をしましょう

本番環境で、開発中のアプリから画像投稿を行いましょう。
そのためには以下の方法で「Web URL」を確認する必要があります。

ターミナルで下記のコマンドを実行し、「Web URL」を確認しましょう

以下のコマンドを実行することで、Herokuにデプロイされたアプリケーションの情報を見ることができます。

ターミナル（開発中のアプリで実行）
1
 
% heroku apps:info

「Web URL: 〜〜〜」の部分を確認しましょう。

https://tech-master.s3.amazonaws.com/uploads/curriculums//4f6751971216f2eb35d406dfa87b1c47.png

「Web URL」が確認できたら公開されたページにアクセスし、画像投稿をしましょう。

 S3に保存されているか確認しましょう

下記のページで一度リロードし、S3のバケットにファイルが保存されているか確認します。
バケット名をクリックすると投稿した画像があるはずです。
投稿日時を確かめ、今投稿した画像であることを確認しましょう。

https://tech-master.s3.amazonaws.com/uploads/curriculums//babc7b64e02e9b87134110e00dab7dca.gif