9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[refile][heroku]refileを使った本番環境での画像投稿機能[AWS][s3]

Last updated at Posted at 2020-04-02

#はじめに
refileを使って、画像投稿機能を作って、herokuにデプロイして、オリジナルサービス完成!
と思ってたら、思わぬことに。
なぜか投稿した画像が一定時間過ぎると見れなくなる。 とか
パソコンでは見れるのに、iPhoneで画像が見れない。
という問題に直面しました。ので、その状況に陥ったときの対処方法を今回は書いていきます。

#そもそも
herokuにアップした画像は一定時間しか保存してくれないとのこと(どっかの記事で見ました)。
なので、どこかに保存する場所を作ってあげないといけない。そこで見つけたのが、AWSのs3という機能(?)。
s3のバケットというところに保存すればこの問題は解決しました。
ちょっと長くなりますが、方法をまとめていきたいと思います。

#どうするか
細かく伝えいきますので、順にやっていってください。

##gemの追加
refileには、AWSのs3と連携してくれる便利なgemがあります。それがこれ↓です。(refile/github)

Gemfile
gem "refile-s3"

これをGemfileに記述した後、 $ bundle install します。

##ファイルの追加
config/initializersの中に refile.rbというファイルを作成します。
その後

config/initializers/refile.rb
require "refile/s3"

aws = {
  access_key_id: "AWS_ACCESS_KEY_ID",
  secret_access_key: "AWS_SECRET_ACCESS_KEY",
  region: "リージョン",
  bucket: "バケット名",
}
Refile.cache = Refile::S3.new(prefix: "cache", **aws)
Refile.store = Refile::S3.new(prefix: "store", **aws)

これをまるっと書きます。
記載してある"AWS_ACCESS_KEY_ID","AWS_SECRET_ACCESS_KEY",リージョン,バケット名はまだ置いといていいです。

##AWSのs3にバケットを作る
このバケットというところに画像を保存していくのですが、まずはAWSのアカウントを作らなくてなりません。
参考になった記事がこちら → Railsでcarrierwaveを使ってAWS S3に画像をアップロードする手順を画像付きで説明する

この記事のAWS/IAM ~ S3バケット作成まで進めてください。かなり分かりやすく、僕でも楽々できました!

!注意!
作成途中で、アクセスキーとシークレットアクセスキーは後で使うので、どこか自分しかわからないところに控えておいてください。

バケットができたら次です。

##config/initializers/refile.rb
ここに戻ってきます。
先ほど作成したrefile.rbの中にあった AWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEY ですが、
控えておいたアクセスキーとシークレットアクセスキーを入れることになります。
ただ、ここに直接は書かず、別のファイルに書いていきます。(書いてもいいのかもしれないけど。)
ひとまず、先ほどバケットを作った際にきめた リージョン と バケット名 を記述してください。
ちなみにリージョンを東京にした場合は ap-northeast-1 と記述すればいいです。

config/initializers/refile.rb
require "refile/s3"

aws = {
  access_key_id: "AWS_ACCESS_KEY_ID",
  secret_access_key: "AWS_SECRET_ACCESS_KEY",
  region: "リージョン",   ←ここと
  bucket: "バケット名",  ←ここ
}
Refile.cache = Refile::S3.new(prefix: "cache", **aws)
Refile.store = Refile::S3.new(prefix: "store", **aws)

##gemの追加
次に環境変数というものを使うために 

gem 'dotenv-rails'

を追加し、 $ bundle install します。
環境変数とはパスワードを公開しないための変数とのこと。(あまりわかっていません。)

そのあとホームディレクトリ直下(gemfileとかがあるところ)に、 .env というファイル名でファイルを作成します。
dotenvはこの .envというファイルの中に書いてあるデータを参照します。
なのでここで環境変数を定義していきます。 さきほど控えておいたキーをここに記述します。

.env
AWS_ACCESS_KEY_ID = アクセスキー
AWS_SECRET_ACCESS_KEY = シークレットアクセスキー

記述が終わったら、 .gitignoreに先ほどの .envを記述します。
これはgithubにデプロイしたときに誰にも見られたくない環境変数を隠すためのファイルです。

.gitignore
/.env

##heroku
次にherokuに移動してください。作成したアプリを選択して、 settings → Config Varsにある Reveal Config Vars を押すと
KEY と VALUE を追加する画面が出てきます。
ここで
KEYには AWS_ACCESS_KEY_ID, VALUEには アクセスキー
KEYには AWS_SECRET_ACCESS_KEY, VALUEには シークレットアクセスキー
の2つを記述してください。

##最後に

$ git add .
$ git commit -m ""
$ git push heroku master
$ heroku run rails db:migrate
$ heroku open

をして、デプロイできればOKです!
そのあと、画像投稿をしてみて先ほど作成したバケットを確認すると、投稿した画像がそこに入っていると思います!
お疲れ様でした!

#まとめ
ほんと、これをするためだけに丸2日くらいかかりました…。センスないのかなってめっちゃ思いました。
知らない言葉とか多いけど、やっていくうちに慣れると思うので、今はひたすらにいろんな事を吸収します。

とりあえずこの手順でやれば本番環境での画像投稿機能はつけられると思います!

#参考記事

9
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?