joppot

コピペで絶対動く。説明を妥協しない

プログラミング

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

投稿日:2014年9月3日 更新日:

Pocket

inihfa

概要

railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、
それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。

前提

ruby on railsの環境が整っている
ckeditorがフォームに適応されている
私はscaffoldのフォームにckeditorを適応しています。
もしもまだな人は、下のURLを参考にしてください。

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

SPONSORED LINK


carrierwaveとfogをインストールする

railsのGemfileを開いて、下の内容を書き込んでください。
もしも、まだrmagickとminimagickが入っていない場合はそれも合わせてGemfileに書き込んでください。

gem 'carrierwave'
gem 'fog'

gem 'rmagick'
gem 'mini_magick'

usefivegems

保存したら、下のコマンドでgemファイルをインストールします。

bundle install --path vendor/bundle

インストールが完了しました。

ckeditorの設定を変更する

ckeditorで画像をアップロードする方法として公式サイトにもあるように、carrierwaveを使う方法が記載されています。

その方法に従えば、下のコマンドでまずサーバにアップロードするための設定が作られます。
もしも、既にckeditorでcarrierwaveを使ってサーバにファイルをアップロードする為の設定ファイルがある場合はもう作らなくてよいです。

rails generate ckeditor:install --orm=active_record --backend=carrierwave

コマンドを実行すると、いくつか設定ファイルが作られます。
その中のapp/uploaders/ckeditor_picture_uploader.rbをエディタで開きます。

strage :fileという箇所があると思うのでそれを

strage :fog

に変更します。

ckeditorpicup

保存しましょう。

次に、railsプロジェクトのconfig/initializers/に移動して、carrierwave.rbを作成します。

touch carrierwave.rb

carrierwave.rbをエディタで開いて、下の内容を記述します。
もしも、s3へのアクセスキーなどを持っていない場合は下の記事を参照して取得してください。
awsのs3を操作する為のaccess keyとsecret keyを取得する(IAM)

CarrierWave.configure do |config|
  config.fog_credentials = {
    :provider               => 'AWS',
    :aws_access_key_id      => 'IAMで取得したs3のアクセスキー',
    :aws_secret_access_key  => 'IAMで取得したs3のシークレットキー',
    :region                 => 'ap-northeast-1'
  }
  config.fog_directory = 'bucket名' if Rails.env.development?
end

例えば下のようになります(下のキーは適当に書いたものです。間違っても他人にアクセスキーとシークレットを見せないようにしてください)。

ckexample

保存しましょう。

設定は以上です。

ckeditorからs3にアップロードしてみる

サーバを起動しましょう

bundle exec rails s

次に、ckeditorがあるURLに移動します。

checkpictos3

画像アップのボタンをおして、「アップロード」からファイルを選択して「サーバーに送信」からファイルをアップロードしてみます。

ckeupwindow

アップしたら、画像のをURLを見ると、s3に上がっていますね。

yesitiss3

s3をみると
therearepics
ありますね。

まとめ

どうでしょうか?うまくいきましたか?ckeditorは素晴らしいのですが、設定をうまくやらないとできないので精密にやってみましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

javascriptでのJSONの大きさ(サイズ)の取得

概要 みなさんこんにちはcandleです。今回はプログラミングで少し手間取ったJSONサイズ取得の問題について書いていこうと思います。 JSONはjavascirptでわりと多く使われるオブジェクト型 …

wordpressのget_categoriesでサブカテゴリーを含まないカテゴリー一覧を取得する

概要 みなさんこんにちはcandleです。今回はカテゴリー一覧にサブカテゴリーを含まない取得の仕方を紹介します。 サブカテゴリーを使用しているサイトの場合、場合によってはサブカテゴリーとトップの階層の …

memcachedサーバとruby on railsのdalliを使用してセッションを管理する

概要 みなさんこんにちはcandleです。今回はmemcachedサーバを利用してrailsのセッションを管理してみたいと思います。 一般にrailsでセッション管理をしていると、ブラウザのcooki …

railsでsvgをviewに表示する

概要 みなさんこんにちはcandleです。 今回はrailsでsvgを出力します。 レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。 手こずらずにsv …

railsのaws-sdk gemを使ってs3のフォルダ(folder)を削除する

概要 みなさんこんにちはcandleです。今回はs3にあるフォルダを丸ごとrailsのaws-sdk gemを使用して削除してみたいと思います。 実はこの方法を確立するまですごく四苦八苦しました。なん …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ